migrate to vite-pwa-plugin

hms-dbmi · Oct 8, 2021 · 349b5f4 · 349b5f4
1 parent fbc134c
commit 349b5f4
Show file tree

Hide file tree

Showing 8 changed files with 2,118 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -1,37 +1,24 @@
 <!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="/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." />
 
-    <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">
+    <title>vizarr</title>
   </head>
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="/src/index.tsx"></script>
-    <script type="module">
-      // Check if service worker is supported
-      if ('serviceWorker' in navigator) {
-        window.addEventListener('load', () => {
-          navigator.serviceWorker.register(new URL('sw.js', import.meta.url))
-        });
-      }
-    </script>
     <style>
       @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
       html {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@vitejs/plugin-react": "^1.0.1",
     "prettier": "^2.2.0",
     "typescript": "^4.4.3",
-    "vite": "^2.5.10"
+    "vite": "^2.5.10",
+    "vite-plugin-pwa": "^0.11.3"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/index.tsx b/src/index.tsx
@@ -11,6 +11,9 @@ import { version } from '../package.json';
 
 console.log(`vizarr v${version}: https://github.com/hms-dbmi/vizarr`);
 
+import { registerSW } from 'virtual:pwa-register';
+registerSW();
+
 ReactDOM.render(
   <ThemeProvider theme={theme}>
     <Provider>

diff --git a/tsconfig.json b/tsconfig.json
@@ -15,6 +15,9 @@
     "importsNotUsedAsValues": "error",
     "paths": {
       "zarr": ["node_modules/zarr"]
-    }
+    },
+    "types": [
+      "vite-plugin-pwa/client"
+    ]
   }
 }
diff --git a/vite.config.js b/vite.config.js
@@ -1,10 +1,47 @@
+// @ts-check
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 import { resolve } from 'path';
 
+const manifest = {
+  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',
+    },
+  ],
+};
+
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt'],
+      manifest,
+      workbox: {
+        globPatterns: ['**/*.{js,json,ico,png,html,txt}'],
+      },
+    }),
+  ],
   base: process.env.VIZARR_PREFIX || './',
   build: {
     outDir: 'out',

diff --git a/workbox-config.js b/workbox-config.js