Add service-worker via workbox

hms-dbmi · Jun 10, 2021 · 432f90e · 432f90e
1 parent 213051f
commit 432f90e
Show file tree

Hide file tree

Showing 8 changed files with 5,363 additions and 229 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,11 +12,12 @@
     "react-dom": "^17.0.1",
     "recoil": "0.0.13",
     "reference-spec-reader": "^0.1.1",
+    "workbox-cli": "^6.1.5",
     "zarr": "^0.4.0"
   },
   "scripts": {
     "start": "snowpack dev",
-    "build": "snowpack build",
+    "build": "snowpack build && workbox generateSW workbox-config.js",
     "export": "npm run build",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",

diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <title>vizarr</title>
     <meta charset="utf-8" />
+    <meta name="description" content="A minimal, purely client-side program for viewing Zarr-based images." />
+
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔬</text></svg>">
     <link rel="alternate icon" href="%PUBLIC_URL%favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="A minimal, purely client-side program for viewing Zarr-based images." />
-    <title>vizarr</title>
+
+    <link rel="manifest" href="%PUBLIC_URL%manifest.json">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="vizarr">
+    <meta name="apple-mobile-web-app-title" content="vizarr">
+    <meta name="theme-color" content="#000000">
+    <meta name="msapplication-navbutton-color" content="#000000">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="msapplication-starturl" content=".">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   </head>
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="%PUBLIC_URL%_dist_/index.js"></script>
+    <script type="module">
+      // Check if service worker is supported
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('%PUBLIC_URL%sw.js')
+        });
+      }
+    </script>
     <style>
       @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
       html {

diff --git a/public/logo-192.png b/public/logo-192.png
diff --git a/public/logo-256.png b/public/logo-256.png
diff --git a/public/logo-512.png b/public/logo-512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "name": "vizarr",
+  "short_name": "vizarr",
+  "lang": "en-US",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "logo-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "logo-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/workbox-config.js b/workbox-config.js
@@ -0,0 +1,7 @@
+module.exports = {
+	globDirectory: 'out/',
+	globPatterns: [
+		'**/*.{js,json,ico,png,html,txt}'
+	],
+	swDest: 'out/sw.js'
+};