fix PWA

.pnp.cjs

@@ -55,7 +55,19 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["react-lazyload", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:3.2.0"],\
             ["react-polls", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:1.2.0"],\
             ["react-scripts", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:5.0.1"],\
-            ["react-timeago", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:7.1.0"]\
+            ["react-timeago", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:7.1.0"],\
+            ["workbox-background-sync", "npm:6.5.4"],\
+            ["workbox-broadcast-update", "npm:6.5.4"],\
+            ["workbox-cacheable-response", "npm:6.5.4"],\
+            ["workbox-core", "npm:6.5.4"],\
+            ["workbox-expiration", "npm:6.5.4"],\
+            ["workbox-google-analytics", "npm:6.5.4"],\
+            ["workbox-navigation-preload", "npm:6.5.4"],\
+            ["workbox-precaching", "npm:6.5.4"],\
+            ["workbox-range-requests", "npm:6.5.4"],\
+            ["workbox-routing", "npm:6.5.4"],\
+            ["workbox-strategies", "npm:6.5.4"],\
+            ["workbox-streams", "npm:6.5.4"]\
           ],\
           "linkType": "SOFT"\
         }]\
@@ -16989,7 +17001,19 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["react-lazyload", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:3.2.0"],\
             ["react-polls", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:1.2.0"],\
             ["react-scripts", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:5.0.1"],\
-            ["react-timeago", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:7.1.0"]\
+            ["react-timeago", "virtual:d489c25e2ebeea07458b58e50f8ccfb31c1a2205a90b069d1097b87c37e4691c13f2247338ffb59360c079762786d6bbbc895d4b6a241f03e5878297f15a38ca#npm:7.1.0"],\
+            ["workbox-background-sync", "npm:6.5.4"],\
+            ["workbox-broadcast-update", "npm:6.5.4"],\
+            ["workbox-cacheable-response", "npm:6.5.4"],\
+            ["workbox-core", "npm:6.5.4"],\
+            ["workbox-expiration", "npm:6.5.4"],\
+            ["workbox-google-analytics", "npm:6.5.4"],\
+            ["workbox-navigation-preload", "npm:6.5.4"],\
+            ["workbox-precaching", "npm:6.5.4"],\
+            ["workbox-range-requests", "npm:6.5.4"],\
+            ["workbox-routing", "npm:6.5.4"],\
+            ["workbox-strategies", "npm:6.5.4"],\
+            ["workbox-streams", "npm:6.5.4"]\
           ],\
           "linkType": "SOFT"\
         }]\

package.json

@@ -19,7 +19,19 @@
     "react-lazyload": "^3.2.0",
     "react-polls": "^1.2.0",
     "react-scripts": "5.0.1",
-    "react-timeago": "^7.1.0"
+    "react-timeago": "^7.1.0",
+    "workbox-background-sync": "^6.4.2",
+    "workbox-broadcast-update": "^6.4.2",
+    "workbox-cacheable-response": "^6.4.2",
+    "workbox-core": "^6.4.2",
+    "workbox-expiration": "^6.4.2",
+    "workbox-google-analytics": "^6.4.2",
+    "workbox-navigation-preload": "^6.4.2",
+    "workbox-precaching": "^6.4.2",
+    "workbox-range-requests": "^6.4.2",
+    "workbox-routing": "^6.4.2",
+    "workbox-strategies": "^6.4.2",
+    "workbox-streams": "^6.4.2"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -10,7 +10,7 @@
 
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon/512.png">
-    <link rel="manifest" href="./static/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <meta name="theme-color" content="#333333"/>
 
     <meta name="apple-mobile-web-app-capable" content="yes">

public/manifest.json

@@ -13,7 +13,7 @@
       "type": "image/png"
     }
   ],
-  "start_url": "../",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#333333",
   "background_color": "#333333"

src/index.js

@@ -3,11 +3,11 @@ import './index.css';
 import './fonts_7/icomoon.css';
 import App from './App';
 //import {elevate} from './infrastructure/elevator';
-import registerServiceWorker from './registerServiceWorker';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 //elevate();
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(<App tab="home" />);
 
-registerServiceWorker();
+serviceWorkerRegistration.register();

src/service-worker.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-restricted-globals */
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }) => {
+    // If this isn't a navigation, skip.
+    if (request.mode !== 'navigate') {
+      return false;
+    } // If this is a URL that starts with /_, skip.
+
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    } // If this looks like a URL for a resource, because it contains // a file extension, skip.
+
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    } // Return true to signal that we want to use the handler.
+
+    return true;
+  },
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html'),
+);
+
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+  // Add in any other file extensions or routing criteria as needed.
+  ({ url }) =>
+    url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  new StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
+  }),
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Any other custom service worker logic can go here.

src/serviceWorkerRegistration.js

@@ -1,76 +1,93 @@
-// In production, we register a service worker to serve assets from local cache.
+// This optional code is used to register a service worker.
+// register() is not called by default.
 
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
+// will only see deployed updates on subsequent visits to a page, after all the
-// cached resources are updated in the background.
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
 
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// To learn more about the benefits of this model and instructions on how to
-// This link also includes instructions on opting out of this behavior.
+// opt-in, read https://cra.link/PWA
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
+    // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
     ),
 );
 
-export default function register() {
+export function register(config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    // const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    // if (publicUrl.origin !== window.location.origin) {
+    if (publicUrl.origin !== window.location.origin) {
-    // Our service worker won't work if PUBLIC_URL is on a different origin
+      // Our service worker won't work if PUBLIC_URL is on a different origin
-    // from what our page is served on. This might happen if a CDN is used to
+      // from what our page is served on. This might happen if a CDN is used to
-    // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-    // return;
+      return;
-    // }
+    }
 
     window.addEventListener('load', () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
+        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
+        checkValidServiceWorker(swUrl, config);
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ',
+              'worker. To learn more, visit https://cra.link/PWA',
           );
         });
       } else {
-        // Is not local host. Just register service worker
+        // Is not localhost. Just register service worker
-        registerValidSW(swUrl);
+        registerValidSW(swUrl, config);
       }
     });
   }
 }
 
-function registerValidSW(swUrl) {
+function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
     .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
+              // At this point, the updated precached content has been fetched,
-              // the fresh content will have been added to the cache.
+              // but the previous service worker will still serve the older
-              // It's the perfect time to display a "New content is
+              // content until all client tabs are closed.
-              // available; please refresh." message in your web app.
+              console.log(
-              console.log('New content is available; please refresh.');
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://cra.link/PWA.',
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
               console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
             }
           }
         };
@@ -81,14 +98,17 @@ function registerValidSW(swUrl) {
     });
 }
 
-function checkValidServiceWorker(swUrl) {
+function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
     .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
       if (
         response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
+        (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then((registration) => {
@@ -98,7 +118,7 @@ function checkValidServiceWorker(swUrl) {
         });
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
+        registerValidSW(swUrl, config);
       }
     })
     .catch(() => {
@@ -110,8 +130,12 @@ function checkValidServiceWorker(swUrl) {
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then((registration) => {
+    navigator.serviceWorker.ready
-      registration.unregister();
+      .then((registration) => {
-    });
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
   }
 }

yarn.lock

@@ -12703,6 +12703,18 @@ __metadata:
     react-polls: ^1.2.0
     react-scripts: 5.0.1
     react-timeago: ^7.1.0
+    workbox-background-sync: ^6.4.2
+    workbox-broadcast-update: ^6.4.2
+    workbox-cacheable-response: ^6.4.2
+    workbox-core: ^6.4.2
+    workbox-expiration: ^6.4.2
+    workbox-google-analytics: ^6.4.2
+    workbox-navigation-preload: ^6.4.2
+    workbox-precaching: ^6.4.2
+    workbox-range-requests: ^6.4.2
+    workbox-routing: ^6.4.2
+    workbox-strategies: ^6.4.2
+    workbox-streams: ^6.4.2
   languageName: unknown
   linkType: soft
 
@@ -12976,7 +12988,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-background-sync@npm:6.5.4":
+"workbox-background-sync@npm:6.5.4, workbox-background-sync@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-background-sync@npm:6.5.4"
   dependencies:
@@ -12986,7 +12998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-broadcast-update@npm:6.5.4":
+"workbox-broadcast-update@npm:6.5.4, workbox-broadcast-update@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-broadcast-update@npm:6.5.4"
   dependencies:
@@ -13040,7 +13052,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-cacheable-response@npm:6.5.4":
+"workbox-cacheable-response@npm:6.5.4, workbox-cacheable-response@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-cacheable-response@npm:6.5.4"
   dependencies:
@@ -13049,14 +13061,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-core@npm:6.5.4":
+"workbox-core@npm:6.5.4, workbox-core@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-core@npm:6.5.4"
   checksum: d973cc6c1c5fdbde7f6642632384c2e0de48f08228eb234db2c97a18a7e5422b483005767e7b447ea774abc0772dfc1edef2ef2b5df174df4d40ae61d4c49719
   languageName: node
   linkType: hard
 
-"workbox-expiration@npm:6.5.4":
+"workbox-expiration@npm:6.5.4, workbox-expiration@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-expiration@npm:6.5.4"
   dependencies:
@@ -13066,7 +13078,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-google-analytics@npm:6.5.4":
+"workbox-google-analytics@npm:6.5.4, workbox-google-analytics@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-google-analytics@npm:6.5.4"
   dependencies:
@@ -13078,7 +13090,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-navigation-preload@npm:6.5.4":
+"workbox-navigation-preload@npm:6.5.4, workbox-navigation-preload@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-navigation-preload@npm:6.5.4"
   dependencies:
@@ -13087,7 +13099,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-precaching@npm:6.5.4":
+"workbox-precaching@npm:6.5.4, workbox-precaching@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-precaching@npm:6.5.4"
   dependencies:
@@ -13098,7 +13110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-range-requests@npm:6.5.4":
+"workbox-range-requests@npm:6.5.4, workbox-range-requests@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-range-requests@npm:6.5.4"
   dependencies:
@@ -13121,7 +13133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-routing@npm:6.5.4":
+"workbox-routing@npm:6.5.4, workbox-routing@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-routing@npm:6.5.4"
   dependencies:
@@ -13130,7 +13142,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-strategies@npm:6.5.4":
+"workbox-strategies@npm:6.5.4, workbox-strategies@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-strategies@npm:6.5.4"
   dependencies:
@@ -13139,7 +13151,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workbox-streams@npm:6.5.4":
+"workbox-streams@npm:6.5.4, workbox-streams@npm:^6.4.2":
   version: 6.5.4
   resolution: "workbox-streams@npm:6.5.4"
   dependencies: