about summary refs log tree commit diff
path: root/MatrixUtils.Web/wwwroot
diff options
context:
space:
mode:
Diffstat (limited to 'MatrixUtils.Web/wwwroot')
-rw-r--r--MatrixUtils.Web/wwwroot/index.html3
-rw-r--r--MatrixUtils.Web/wwwroot/service-worker.published.js35
-rw-r--r--MatrixUtils.Web/wwwroot/sw-registrator.js41
3 files changed, 73 insertions, 6 deletions
diff --git a/MatrixUtils.Web/wwwroot/index.html b/MatrixUtils.Web/wwwroot/index.html
index a40f38c..5182193 100644
--- a/MatrixUtils.Web/wwwroot/index.html
+++ b/MatrixUtils.Web/wwwroot/index.html
@@ -59,7 +59,8 @@
             }
         </script>
         <script src="_framework/blazor.webassembly.js"></script>
-        <script>navigator.serviceWorker.register('service-worker.js');</script>
+<!--        <script>navigator.serviceWorker.register('service-worker.js');</script>-->
+        <script src="sw-registrator.js"></script>
     </body>
 
 </html>
diff --git a/MatrixUtils.Web/wwwroot/service-worker.published.js b/MatrixUtils.Web/wwwroot/service-worker.published.js
index 003e3e7..9219755 100644
--- a/MatrixUtils.Web/wwwroot/service-worker.published.js
+++ b/MatrixUtils.Web/wwwroot/service-worker.published.js
@@ -8,8 +8,10 @@ self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
 

 const cacheNamePrefix = 'offline-cache-';

 const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;

-const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/ ];

-const offlineAssetsExclude = [ /^service-worker\.js$/ ];

+const offlineAssetsInclude = [// Standard resources

+    /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/, /* Extra known-static paths */

+    /\/_matrix\/media\/.{2}\/download\//, /api\.dicebear\.com\/6\.x\/identicon\/svg/];

+const offlineAssetsExclude = [/^service-worker\.js$/];

 

 // Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'.

 const base = "/";

@@ -19,11 +21,14 @@ const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.ur
 async function onInstall(event) {

     console.info('Service worker: Install');

 

+    // Activate the new service worker as soon as the old one is retired.

+    self.skipWaiting();

+

     // Fetch and cache all matching items from the assets manifest

     const assetsRequests = self.assetsManifest.assets

         .filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))

         .filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))

-        .map(asset => new Request(asset.url, { integrity: asset.hash, cache: 'no-cache' }));

+        .map(asset => new Request(asset.url, {integrity: asset.hash, cache: 'no-cache'}));

     await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));

 }

 

@@ -43,12 +48,32 @@ async function onFetch(event) {
         // For all navigation requests, try to serve index.html from cache,

         // unless that request is for an offline resource.

         // If you need some URLs to be server-rendered, edit the following check to exclude those URLs

-        const shouldServeIndexHtml = event.request.mode === 'navigate'

-            && !manifestUrlList.some(url => url === event.request.url);

+        const shouldServeIndexHtml = event.request.mode === 'navigate' && !manifestUrlList.some(url => url === event.request.url);

 

         const request = shouldServeIndexHtml ? 'index.html' : event.request;

+        const shouldCache = offlineAssetsInclude.some(pattern => pattern.test(request.url));

+

         const cache = await caches.open(cacheName);

         cachedResponse = await cache.match(request);

+        let exception;

+        let fetched;

+        if (!cachedResponse && shouldCache) {

+            console.log("Service worker caching: fetching ", request.url)

+            try {

+                fetched = true;

+                await cache.add(request);

+                cachedResponse = await cache.match(request);

+            } catch (e) {

+                exception = e;

+                console.error("cache.add error: ", e, request.url)

+            }

+        }

+        let consoleLog = {

+            fetched, shouldCache, request, exception, cachedResponse, url: request.url,

+        }

+        Object.keys(consoleLog).forEach(key => consoleLog[key] == null && delete consoleLog[key])

+        if(consoleLog.exception)

+            console.log("Service worker caching: ", consoleLog)

     }

 

     return cachedResponse || fetch(event.request);

diff --git a/MatrixUtils.Web/wwwroot/sw-registrator.js b/MatrixUtils.Web/wwwroot/sw-registrator.js
new file mode 100644
index 0000000..94b96b2
--- /dev/null
+++ b/MatrixUtils.Web/wwwroot/sw-registrator.js
@@ -0,0 +1,41 @@
+// source: https://whuysentruit.medium.com/blazor-wasm-pwa-adding-a-new-update-available-notification-d9f65c4ad13
+
+window.updateAvailable = new Promise((resolve, reject) => {
+    if (!('serviceWorker' in navigator)) {
+        const errorMessage = `This browser doesn't support service workers`;
+        console.error(errorMessage);
+        reject(errorMessage);
+        return;
+    }
+
+    navigator.serviceWorker.register('/service-worker.js')
+        .then(registration => {
+            console.info(`Service worker registration successful (scope: ${registration.scope})`);
+
+            // detect updates every minute
+            setInterval(() => {
+                registration.update();
+            }, 5 * 1000); // 60000ms -> check each minute
+
+            registration.onupdatefound = () => {
+                const installingServiceWorker = registration.installing;
+                installingServiceWorker.onstatechange = () => {
+                    if (installingServiceWorker.state === 'installed') {
+                        resolve(!!navigator.serviceWorker.controller);
+                    }
+                }
+            };
+        })
+        .catch(error => {
+            console.error('Service worker registration failed with error:', error);
+            reject(error);
+        });
+});
+
+window.registerForUpdateAvailableNotification = (caller, methodName) => {
+    window.updateAvailable.then(isUpdateAvailable => {
+        if (isUpdateAvailable) {
+            caller.invokeMethodAsync(methodName).then();
+        }
+    });
+};
\ No newline at end of file