diff --git a/docs/css/custom.css b/docs/css/custom.css index 617894e..9062173 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -100,7 +100,13 @@ img.shadow{ h1 img{ vertical-align: middle; } + +#updater{ + background-color: khaki; + border: 1px solid gray; +} /* for Alpine.js */ [x-cloak] { display: none !important; } + diff --git a/docs/index.html b/docs/index.html index 24d4683..a3c8735 100644 --- a/docs/index.html +++ b/docs/index.html @@ -28,8 +28,6 @@ - -
@@ -39,6 +37,17 @@

Push Push icon Push Push Editor

+
+ There is a new version of the editor available. Load it now? +
+ + + + + + +
+
[]
diff --git a/docs/js/app.js b/docs/js/app.js index 636fd73..193811b 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -1,4 +1,4 @@ -var editor_version = '1.2.1'; +var editor_version = '1.3.0'; var PP_MIDI_MANUF_ID_1 = 0x37; var PP_MIDI_MANUF_ID_2 = 0x72; @@ -16,6 +16,41 @@ var X_ERROR = 0x7F; // Something went wrong var X_OK = 0x01; var X_FAILED = 0x7F; +let newWorker; +// navigator.serviceWorker.register("service-worker.js") +navigator.serviceWorker.register('service-worker.js').then(reg => { + reg.addEventListener('updatefound', () => { + // An updated service worker has appeared in reg.installing! + newWorker = reg.installing; + newWorker.addEventListener('statechange', () => { + // Has service worker state changed? + switch (newWorker.state) { + case 'installed': + // There is a new service worker available, show the notification + if (navigator.serviceWorker.controller) { + showUpdateNotification(); + } + break; + case 'activated': + // The new Service Worker was installed and activated. Hide the notification + hideUpdateNotification() + break; + } + }); + }); +}); + +function showUpdateNotification(){ + Alpine.store('pp').show_update = true; +} +function hideUpdateNotification(){ + Alpine.store('pp').show_update = false; + location.reload() +} +function postSkipWaiting(){ + newWorker.postMessage( 'SKIP_WAITING' ); +} + document.addEventListener('alpine:init', () => { Alpine.store('pp', { editor_version: editor_version, @@ -33,7 +68,8 @@ document.addEventListener('alpine:init', () => { pp_stored: false, pp_errors: false, pp_import_error: false, - show_page: 'editor', + show_page: 'editor', + show_update: false }); diff --git a/docs/service-worker.js b/docs/service-worker.js index d58619a..64fc77b 100644 --- a/docs/service-worker.js +++ b/docs/service-worker.js @@ -1,5 +1,6 @@ -const VERSION = "1.2.1"; -const CACHE_NAME = `PushPushEditor-${VERSION}`; +const BUILD = "202402141747"; + +const CACHE_NAME = `PushPushEditor-${BUILD}`; const PRE_CACHED_RESOURCES = [ "index.html", "manifest.json", @@ -30,7 +31,7 @@ const expectedCaches = [CACHE_NAME] // Add a cache-busting query string to the pre-cached resources. // This is to avoid loading these resources from the disk cache. const PRE_CACHED_RESOURCES_WITH_VERSIONS = PRE_CACHED_RESOURCES.map(path => { - return `${path}?v=${VERSION}`; + return `${path}?v=${BUILD}`; }); // Use the install event to pre-cache all initial resources. @@ -79,7 +80,7 @@ self.addEventListener('fetch', event => { const cache = await caches.open(CACHE_NAME); // Get the resource from the cache. - const versionedUrl = `${event.request.url}?v=${VERSION}`; + const versionedUrl = `${event.request.url}?v=${BUILD}`; const cachedResponse = await cache.match(versionedUrl); if (cachedResponse) { @@ -99,9 +100,10 @@ self.addEventListener('fetch', event => { })()); }); + +/* force update Service Worker */ self.addEventListener('message', (event) => { if (event.data === 'SKIP_WAITING') { - console.log('received PUSH SKIP_WAITING'); self.skipWaiting(); } }); \ No newline at end of file