Add back service worker

author: Anton Tananaev <anton@traccar.org> 2022-06-04 17:03:33 -0700
committer: Anton Tananaev <anton@traccar.org> 2022-06-04 17:03:33 -0700
commit: 61b6d0abd721283f757d431b82f9db8d24945b2f (patch)
tree: 0ddcb38892c30c21ab526227450ea9c404e0b4fa /modern
parent: 73cd7a510a88abb63b2393b1dfdbfe56865378af (diff)
download: trackermap-web-61b6d0abd721283f757d431b82f9db8d24945b2f.tar.gz
trackermap-web-61b6d0abd721283f757d431b82f9db8d24945b2f.tar.bz2
trackermap-web-61b6d0abd721283f757d431b82f9db8d24945b2f.zip
7 files changed, 231 insertions, 4 deletions
diff --git a/modern/.eslintrc.js b/modern/.eslintrc.js
index df0dcd15..12382f3e 100644
--- a/modern/.eslintrc.js
+++ b/modern/.eslintrc.js
@@ -6,7 +6,7 @@ module.exports = {
   plugins: [
     'react',
   ],
-  ignorePatterns: ['serviceWorker.js', 'switcher.js'],
+  ignorePatterns: ['service-worker.js', 'serviceWorkerRegistration.js', 'switcher.js'],
   rules: {
     'max-len': [0],
     'no-shadow': [0],
diff --git a/modern/package.json b/modern/package.json
index fe8b01b7..6912fbb0 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -28,7 +28,19 @@
     "recharts": "^2.1.10",
     "redux": "^4.2.0",
     "typeface-roboto": "1.1.13",
-    "wellknown": "^0.5.0"
+    "wellknown": "^0.5.0",
+    "workbox-background-sync": "^6.5.3",
+    "workbox-broadcast-update": "^6.5.3",
+    "workbox-cacheable-response": "^6.5.3",
+    "workbox-core": "^6.5.3",
+    "workbox-expiration": "^6.5.3",
+    "workbox-google-analytics": "^6.5.3",
+    "workbox-navigation-preload": "^6.5.3",
+    "workbox-precaching": "^6.5.3",
+    "workbox-range-requests": "^6.5.3",
+    "workbox-routing": "^6.5.3",
+    "workbox-strategies": "^6.5.3",
+    "workbox-streams": "^6.5.3"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/modern/public/index.html b/modern/public/index.html
index 864263cb..7285fbdf 100644
--- a/modern/public/index.html
+++ b/modern/public/index.html
@@ -8,6 +8,7 @@
     <meta name="description" content="Traccar GPS tracking system" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/styles.css">
     <title>Traccar</title>
   </head>
   <body>
diff --git a/modern/public/manifest.json b/modern/public/manifest.json
index 59b5056d..555b819b 100644
--- a/modern/public/manifest.json
+++ b/modern/public/manifest.json
@@ -10,12 +10,14 @@
     {
       "src": "logo192.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "192x192",
+      "purpose": "any maskable"
     },
     {
       "src": "logo512.png",
       "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "512x512",
+      "purpose": "any maskable"
     }
   ],
   "start_url": ".",
diff --git a/modern/src/index.js b/modern/src/index.js
index 4a5a9e4b..dbbf2da4 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -12,6 +12,7 @@ import SocketController from './SocketController';
 import theme from './common/theme';
 import Navigation from './Navigation';
 import preloadImages from './map/core/preloadImages';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 preloadImages();
 
@@ -36,3 +37,5 @@ ReactDOM.render(
     </Provider>
   ), document.getElementById('root'),
 );
+
+serviceWorkerRegistration.register();
diff --git a/modern/src/service-worker.js b/modern/src/service-worker.js
new file mode 100644
index 00000000..0f1e0ce0
--- /dev/null
+++ b/modern/src/service-worker.js
@@ -0,0 +1,72 @@
+/* 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.
diff --git a/modern/src/serviceWorkerRegistration.js b/modern/src/serviceWorkerRegistration.js
new file mode 100644
index 00000000..2262ecdb
--- /dev/null
+++ b/modern/src/serviceWorkerRegistration.js
@@ -0,0 +1,137 @@
+// 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 subsequent visits to a page, after all the
+// 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 and instructions on how to
+// 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.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 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.href);
+    if (publicUrl.origin !== window.location.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
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        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://cra.link/PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+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 updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                '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);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  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 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.');
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}
author	Anton Tananaev <anton@traccar.org>	2022-06-04 17:03:33 -0700
committer	Anton Tananaev <anton@traccar.org>	2022-06-04 17:03:33 -0700
commit	61b6d0abd721283f757d431b82f9db8d24945b2f (patch)
tree	0ddcb38892c30c21ab526227450ea9c404e0b4fa /modern
parent	73cd7a510a88abb63b2393b1dfdbfe56865378af (diff)
download	trackermap-web-61b6d0abd721283f757d431b82f9db8d24945b2f.tar.gz trackermap-web-61b6d0abd721283f757d431b82f9db8d24945b2f.tar.bz2 trackermap-web-61b6d0abd721283f757d431b82f9db8d24945b2f.zip