Merge pull request #766 from dhis2/LIBS-374-handle-sw-errors

fix(pwa): handle sw errors [LIBS-374]

adapter/src/components/PWALoadingBoundary.js

@@ -29,7 +29,10 @@ export const PWALoadingBoundary = ({ children }) => {
                 setPWAReady(true)
             }
         }
-        checkRegistration()
+        checkRegistration().catch((err) => {
+            console.error(err)
+            setPWAReady(true)
+        })
     }, [offlineInterface])
 
     return pwaReady ? children : null

pwa/src/offline-interface/offline-interface.js

@@ -8,6 +8,45 @@ import {
 } from '../lib/registration.js'
 import { openSectionsDB, SECTIONS_STORE } from '../lib/sections-db.js'
 
+const PWA_ENABLED = process.env.REACT_APP_DHIS2_APP_PWA_ENABLED === 'true'
+
+/**
+ * This and the following 'test' functions test for PWA features and log errors
+ * if there's an issue so they can be reused in the Offline Interface methods.
+ *
+ * Known situations when navigator.serviceWorker is not available:
+ * 1. Private browsing in firefox
+ * 2. Insecure contexts (e.g. http that's not local host)
+ */
+function testSWAvailable() {
+    if ('serviceWorker' in navigator) {
+        return true
+    }
+
+    const msg =
+        (!window.isSecureContext
+            ? 'This window is not a secure context -- see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts.'
+            : '`serviceWorker` is not available on `navigator`.') +
+        ' PWA features will not work.'
+    console.error(new Error(msg))
+    return false
+}
+
+function testPWAEnabled() {
+    if (PWA_ENABLED) {
+        return true
+    }
+
+    const msg =
+        'PWA is not enabled in `d2.config.js`. No service worker will be registered and offline interface features will not work.'
+    console.error(new Error(msg))
+    return false
+}
+
+function testPWAAndSW() {
+    return testSWAvailable() && testPWAEnabled()
+}
+
 /** Helper to simplify SW message sending */
 function swMessage(type, payload) {
     if (!navigator.serviceWorker.controller) {
@@ -26,15 +65,16 @@ function swMessage(type, payload) {
  */
 export class OfflineInterface {
     constructor() {
-        this.pwaEnabled = process.env.REACT_APP_DHIS2_APP_PWA_ENABLED === 'true'
+        // Helper property that consumers can check
+        this.pwaEnabled = PWA_ENABLED
 
         if (this.pwaEnabled) {
             register()
         } else {
             unregister()
         }
 
-        if (!('serviceWorker' in navigator)) {
+        if (!testSWAvailable()) {
             return
         }
 
@@ -78,6 +118,10 @@ export class OfflineInterface {
      * @returns {Promise}
      */
     getClientsInfo() {
+        if (!testSWAvailable()) {
+            return Promise.resolve({ clientsCount: 0 })
+        }
+
         return new Promise((resolve, reject) => {
             navigator.serviceWorker.getRegistration().then((registration) => {
                 const newestSW = registration?.waiting || registration?.active
@@ -104,22 +148,28 @@ export class OfflineInterface {
      * or claim clients if it's the first SW activation
      */
     useNewSW() {
-        navigator.serviceWorker.getRegistration().then((registration) => {
-            if (!registration) {
-                throw new Error('No service worker is registered')
-            }
-            if (registration.waiting) {
-                // Update existing service worker
-                registration.waiting.postMessage({
-                    type: swMsgs.skipWaiting,
-                })
-            } else if (registration.active) {
-                // (First SW activation) Have SW take control of clients
-                registration.active.postMessage({
-                    type: swMsgs.claimClients,
-                })
-            }
-        })
+        if (!testSWAvailable()) {
+            return Promise.resolve()
+        }
+
+        return navigator.serviceWorker
+            .getRegistration()
+            .then((registration) => {
+                if (!registration) {
+                    throw new Error('No service worker is registered')
+                }
+                if (registration.waiting) {
+                    // Update existing service worker
+                    registration.waiting.postMessage({
+                        type: swMsgs.skipWaiting,
+                    })
+                } else if (registration.active) {
+                    // (First SW activation) Have SW take control of clients
+                    registration.active.postMessage({
+                        type: swMsgs.claimClients,
+                    })
+                }
+            })
     }
 
     /**
@@ -146,11 +196,10 @@ export class OfflineInterface {
         onCompleted,
         onError,
     }) {
-        if (!this.pwaEnabled) {
-            throw new Error(
-                'Offline features are not enabled. Make sure `pwa.enabled` is `true` in `d2.config.js`'
-            )
+        if (!testPWAAndSW()) {
+            return
         }
+
         if (!sectionId || !onStarted || !onCompleted || !onError) {
             throw new Error(
                 '[Offline interface] The options { sectionId, onStarted, onCompleted, onError } are required when calling startRecording()'
@@ -202,10 +251,8 @@ export class OfflineInterface {
      * @returns {Promise} A promise that resolves to an array of cached sections.
      */
     async getCachedSections() {
-        if (!this.pwaEnabled) {
-            throw new Error(
-                'Cannot get cached sections - PWA is not enabled in d2.config.js'
-            )
+        if (!testPWAAndSW()) {
+            return []
         }
 
         await navigator.serviceWorker.ready
@@ -230,10 +277,8 @@ export class OfflineInterface {
      * @returns {Promise} A promise that resolves to `true` if at least one of the cache or the idb entry are deleted or `false` if neither were found.
      */
     async removeSection(sectionId) {
-        if (!this.pwaEnabled) {
-            throw new Error(
-                'Cannot remove section - PWA is not enabled in d2.config.js'
-            )
+        if (!testPWAAndSW()) {
+            return false
         }
         if (!sectionId) {
             throw new Error('No section ID specified to delete')