feat: service worker (#1045)

* init

* use workbox-window

* Try to accomodate SW hosted at non root url

* v5 updated namespaces

* Test w/ no prompt

* add icons to manifest

* remove scope for now

* add icon tile information to entrypoint

* See if we can skirt by without a duplicate install

* shift client claims to skip waiting message

* Remove prepended slash

* comment out cache handler for now

* Simplify service-worker to skip waiting and install when a new worker is detected

* Use generated icons

* Update rollbar config

.vscode/settings.json

@@ -1,8 +1,5 @@
 {
-  "editor.rulers": [
-    80,
-    120
-  ],
+  "editor.rulers": [80, 120],
   // ===
   // Spacing
   // ===
@@ -29,7 +26,7 @@
       "autoFix": true
     }
   ],
-  "prettier.disableLanguages": [],
+  "prettier.disableLanguages": ["html"],
   "prettier.endOfLine": "lf",
   "workbench.colorCustomizations": {}
 }

netlify.toml

@@ -38,7 +38,8 @@
 [context.deploy-preview]
   base = ""
   publish = ".netlify/www/"
-  command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  command = "chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  # command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
 
 [[headers]]
   # Define which paths this specific [[headers]] block will cover.

package.json

@@ -72,6 +72,7 @@
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.5.0",
     "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "favicons-webpack-plugin": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
@@ -102,7 +103,7 @@
     "webpack-dev-server": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.1",
-    "workbox-webpack-plugin": "^4.3.1",
+    "workbox-webpack-plugin": "^5.0.0-beta.1",
     "worker-loader": "^2.0.0"
   },
   "husky": {

platform/viewer/.webpack/webpack.pwa.js

@@ -1,3 +1,4 @@
+// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
 // ~~ WebPack
 const path = require('path');
 const merge = require('webpack-merge');
@@ -9,8 +10,9 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
+// const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 // ~~ Rules
@@ -80,12 +82,14 @@ module.exports = (env, argv) => {
         templateParameters: {
           PUBLIC_URL: PUBLIC_URL,
         },
-        // favicon: `${PUBLIC_DIR}/favicon.ico`,
       }),
-      new WorkboxPlugin.GenerateSW({
+      // No longer maintained; but good for generating icons + manifest
+      // new FaviconsWebpackPlugin( path.join(PUBLIC_DIR, 'assets', 'icons-512.png')),
+      new InjectManifest({
         swDest: 'sw.js',
-        clientsClaim: true,
-        skipWaiting: true,
+        swSrc: path.join(SRC_DIR, 'service-worker.js'),
+        // Increase the limit to 4mb:
+        // maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
       }),
     ],
     // https://webpack.js.org/configuration/dev-server/

platform/viewer/public/assets/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/assets/mstile-70x70.png"/>
+            <square150x150logo src="/assets/mstile-150x150.png"/>
+            <wide310x150logo src="/assets/mstile-310x150.png"/>
+            <square310x310logo src="/assets/mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

platform/viewer/public/assets/manifest.webapp

@@ -0,0 +1,14 @@
+{
+  "version": "2.2.1",
+  "name": "OHIF Viewer",
+  "description": "OHIF Viewer",
+  "icons": {
+    "60": "/assets/firefox_app_60x60.png",
+    "128": "/assets/firefox_app_128x128.png",
+    "512": "/assets/firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": "OHIF Contributors",
+    "url": "https://github.com/ohif/viewers"
+  }
+}

platform/viewer/public/assets/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "2.2.1",
+  "api_version": 1,
+  "layout": {
+    "logo": "/assets/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

platform/viewer/public/html-templates/index.html

@@ -1,35 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="OHIF Viewer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="@ohif/viewer">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-TileImage" content="<%= PUBLIC_URL %>assets/mstile-144x144.png">
+    <meta name="msapplication-config" content="<%= PUBLIC_URL %>assets/browserconfig.xml">
+    <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json">
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png">
+    <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">
 
-  <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
-  <!-- Built with: https://polyfill.io/v3/url-builder/ -->
-  <!-- Targets IE11 -->
-  <script
-    src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
-  <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <!-- Built with: https://polyfill.io/v3/url-builder/ -->
+    <!-- Targets IE11 -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
+    <script type="text/javascript">
+      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
+    </script>
+    <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <script type="module" src="<%= PUBLIC_URL %>init-service-worker.js"></script>
 
-  <title>OHIF Viewer</title>
+    <title>OHIF Viewer</title>
 
-  <!-- WEB FONTS -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />
+    <!-- WEB FONTS -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap"
+      rel="stylesheet"
+    />
 
-  <!-- EXTENSIONS -->
-  <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
+    <!-- EXTENSIONS -->
+    <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
 
     <script>
       window.config.extensions = [SomeExtension];
     </script> -->
-</head>
+  </head>
 
-<body>
-  <noscript> You need to enable JavaScript to run this app. </noscript>
-
-  <div id="root"></div>
-</body>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
 
+    <div id="root"></div>
+  </body>
 </html>

platform/viewer/public/html-templates/rollbar.html

@@ -1,17 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
-
-  <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
-  <!-- Built with: https://polyfill.io/v3/url-builder/ -->
-  <!-- Targets IE11 -->
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="OHIF Viewer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="@ohif/viewer">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-TileImage" content="<%= PUBLIC_URL %>assets/mstile-144x144.png">
+    <meta name="msapplication-config" content="<%= PUBLIC_URL %>assets/browserconfig.xml">
+    <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json">
+
+    <link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png">
+    <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">
+
+    <!-- Built with: https://polyfill.io/v3/url-builder/ -->
+    <!-- Targets IE11 -->
   <script
     src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
   <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+  <script type="module" src="<%= PUBLIC_URL %>init-service-worker.js"></script>
 
   <title>OHIF Viewer</title>
 

platform/viewer/public/init-service-worker.js

@@ -0,0 +1,52 @@
+// https://developers.google.com/web/tools/workbox/modules/workbox-window
+// All major browsers that support service worker also support native JavaScript
+// modules, so it's perfectly fine to serve this code to any browsers
+// (older browsers will just ignore it)
+//
+import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-window.prod.mjs';
+
+var supportsServiceWorker = 'serviceWorker' in navigator;
+var isNotLocalDevelopment =
+  ['localhost', '127'].indexOf(location.hostname) === -1;
+
+if (supportsServiceWorker && isNotLocalDevelopment) {
+  const swFileLocation = window.PUBLIC_URL + 'sw.js';
+  const wb = new Workbox(swFileLocation);
+
+  // Add an event listener to detect when the registered
+  // service worker has installed but is waiting to activate.
+  wb.addEventListener('waiting', event => {
+    // customize the UI prompt accordingly.
+    const isFirstTimeUpdatedServiceWorkerIsWaiting =
+      event.wasWaitingBeforeRegister === false;
+    console.log(
+      'isFirstTimeUpdatedServiceWorkerIsWaiting',
+      isFirstTimeUpdatedServiceWorkerIsWaiting
+    );
+
+    // Assumes your app has some sort of prompt UI element
+    // that a user can either accept or reject.
+    // const prompt = createUIPrompt({
+    //  onAccept: async () => {
+    // Assuming the user accepted the update, set up a listener
+    // that will reload the page as soon as the previously waiting
+    // service worker has taken control.
+    wb.addEventListener('controlling', event => {
+      window.location.reload();
+    });
+
+    // Send a message telling the service worker to skip waiting.
+    // This will trigger the `controlling` event handler above.
+    // Note: for this to work, you have to add a message
+    // listener in your service worker. See below.
+    wb.messageSW({ type: 'SKIP_WAITING' });
+    // },
+
+    // onReject: () => {
+    //   prompt.dismiss();
+    // },
+    // });
+  });
+
+  wb.register();
+}

platform/viewer/public/manifest.json

@@ -1,8 +1,59 @@
 {
-  "short_name": "react-cornerstone-viewport",
-  "name": "react-cornerstone-viewport",
+  "name": "OHIF Viewer",
+  "short_name": "Viewer",
+  "description": "OHIF Viewer",
+  "dir": "auto",
+  "lang": "en-US",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/assets/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
   "start_url": "./index.html",
+  "background_color": "#000000",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#20a5d6"
 }