4 files changed, 124 insertions, 57 deletions
diff --git a/MatrixRoomUtils.Web/wwwroot/index.html b/MatrixRoomUtils.Web/wwwroot/index.html
index 7eef159..a40f38c 100644
--- a/MatrixRoomUtils.Web/wwwroot/index.html
+++ b/MatrixRoomUtils.Web/wwwroot/index.html
@@ -1,63 +1,65 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-    <meta charset="utf-8"/>
-    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
-    <title>MatrixRoomUtils.Web</title>
-    <base href="/"/>
-    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
-    <link href="css/app.css" rel="stylesheet"/>
-    <link href="favicon.png" rel="icon" type="image/png"/>
-    <link href="MatrixRoomUtils.Web.styles.css" rel="stylesheet"/>
-    <link rel="manifest" href="mru.webmanifest" />
-</head>
+    <head>
+        <meta charset="utf-8"/>
+        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
+        <title>MatrixUtils.Web</title>
+        <base href="/"/>
+        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
+        <link href="css/app.css" rel="stylesheet"/>
+        <link rel="manifest" href="rmu.webmanifest"/>
+        <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png"/>
+        <link href="favicon.png" rel="icon" type="image/png"/>
+        <link href="MatrixUtils.Web.styles.css" rel="stylesheet"/>
+    </head>
 
-<body>
-<div id="app">
-    <svg class="loading-progress">
-        <circle cx="50%" cy="50%" r="40%"/>
-        <circle cx="50%" cy="50%" r="40%"/>
-    </svg>
-    <div class="loading-progress-text"></div>
-</div>
+    <body>
+        <div id="app">
+            <svg class="loading-progress">
+                <circle cx="50%" cy="50%" r="40%"/>
+                <circle cx="50%" cy="50%" r="40%"/>
+            </svg>
+            <div class="loading-progress-text"></div>
+        </div>
 
-<div id="blazor-error-ui">
-    An unhandled error has occurred.
-    <a class="reload" href="">Reload</a>
-    <a class="dismiss">🗙</a>
-</div>
-<script>
-    function BlazorFocusElement(element) {
-        if (element == null) return;
-        if (element instanceof HTMLElement) {
-            console.log(element);
-            element.focus();
-        } else if (element.hasOwnProperty("__internalId")) {
-            console.log("Element is not an HTMLElement", element);
-        }
-    }
+        <div id="blazor-error-ui">
+            An unhandled error has occurred.
+            <a class="reload" href="">Reload</a>
+            <a class="dismiss">🗙</a>
+        </div>
+        <script>
+            function BlazorFocusElement(element) {
+                if (element == null) return;
+                if (element instanceof HTMLElement) {
+                    console.log(element);
+                    element.focus();
+                } else if (element.hasOwnProperty("__internalId")) {
+                    console.log("Element is not an HTMLElement", element);
+                }
+            }
 
-    function getWidth(element) {
-        console.log("getWidth", element);
-        if (element == null) return 0;
-        if (element instanceof HTMLElement) {
-            return element.offsetWidth
-        } else if (element.hasOwnProperty("__internalId")) {
-            console.log("Element is not an HTMLElement", element);
-            return 0;
-        }
-        return 0;
-    }
+            function getWidth(element) {
+                console.log("getWidth", element);
+                if (element == null) return 0;
+                if (element instanceof HTMLElement) {
+                    return element.offsetWidth
+                } else if (element.hasOwnProperty("__internalId")) {
+                    console.log("Element is not an HTMLElement", element);
+                    return 0;
+                }
+                return 0;
+            }
 
-    function getWindowDimensions() {
-        return {
-            width: window.innerWidth,
-            height: window.innerHeight
-        };
-    }
-</script>
-<script src="_framework/blazor.webassembly.js"></script>
-</body>
+            function getWindowDimensions() {
+                return {
+                    width: window.innerWidth,
+                    height: window.innerHeight
+                };
+            }
+        </script>
+        <script src="_framework/blazor.webassembly.js"></script>
+        <script>navigator.serviceWorker.register('service-worker.js');</script>
+    </body>
 
 </html>
diff --git a/MatrixRoomUtils.Web/wwwroot/mru.webmanifest b/MatrixRoomUtils.Web/wwwroot/rmu.webmanifest
index ef1ee66..27088c0 100644
--- a/MatrixRoomUtils.Web/wwwroot/mru.webmanifest
+++ b/MatrixRoomUtils.Web/wwwroot/rmu.webmanifest
@@ -1,16 +1,22 @@
 {
   "name": "Rory&::MatrixUtils",
-  "short_name": "MRU",
+  "short_name": "RMU",
   "description": "A collection of Matrix utilities.",
   "icons": [
     {
       "src": "icon-192.png",
       "sizes": "192x192",
       "type": "image/png"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
-  "start_url": "/index.html",
-  "display": "fullscreen",
+  "start_url": "./",
+  "id": "./",
+  "display": "minimal-ui",
   "theme_color": "#052767",
   "background_color": "#3A0647"
 }
diff --git a/MatrixRoomUtils.Web/wwwroot/service-worker.js b/MatrixRoomUtils.Web/wwwroot/service-worker.js
new file mode 100644
index 0000000..c6d0085
--- /dev/null
+++ b/MatrixRoomUtils.Web/wwwroot/service-worker.js
@@ -0,0 +1,4 @@
+// In development, always fetch from the network and do not enable offline support.
+// This is because caching would make development more difficult (changes would not
+// be reflected on the first load after each change).
+self.addEventListener('fetch', () => { });
diff --git a/MatrixRoomUtils.Web/wwwroot/service-worker.published.js b/MatrixRoomUtils.Web/wwwroot/service-worker.published.js
new file mode 100644
index 0000000..003e3e7
--- /dev/null
+++ b/MatrixRoomUtils.Web/wwwroot/service-worker.published.js
@@ -0,0 +1,55 @@
+// Caution! Be sure you understand the caveats before publishing an application with
+// offline support. See https://aka.ms/blazor-offline-considerations
+
+self.importScripts('./service-worker-assets.js');
+self.addEventListener('install', event => event.waitUntil(onInstall(event)));
+self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
+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$/ ];
+
+// Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'.
+const base = "/";
+const baseUrl = new URL(base, self.origin);
+const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.url, baseUrl).href);
+
+async function onInstall(event) {
+    console.info('Service worker: Install');
+
+    // 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' }));
+    await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
+}
+
+async function onActivate(event) {
+    console.info('Service worker: Activate');
+
+    // Delete unused caches
+    const cacheKeys = await caches.keys();
+    await Promise.all(cacheKeys
+        .filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName)
+        .map(key => caches.delete(key)));
+}
+
+async function onFetch(event) {
+    let cachedResponse = null;
+    if (event.request.method === 'GET') {
+        // 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 request = shouldServeIndexHtml ? 'index.html' : event.request;
+        const cache = await caches.open(cacheName);
+        cachedResponse = await cache.match(request);
+    }
+
+    return cachedResponse || fetch(event.request);
+}