fix(pwa): update gracefully despite missing clients info (#679)

* fix(pwa-update): handle getClientsInfo rejections gracefully * refactor(offline-interface): request client info from latest SW; lower timeout * fix(pwa-update): use better i18n
dhis2 · Oct 14, 2021 · c7fe509 · c7fe509
1 parent a32f969
commit c7fe509
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/adapter/i18n/en.pot b/adapter/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-10-06T14:48:14.669Z\n"
-"PO-Revision-Date: 2021-10-06T14:48:14.669Z\n"
+"POT-Creation-Date: 2021-10-12T12:20:51.045Z\n"
+"PO-Revision-Date: 2021-10-12T12:20:51.045Z\n"
 
 msgid "An error occurred in the DHIS2 application."
 msgstr "An error occurred in the DHIS2 application."
@@ -59,6 +59,13 @@ msgstr ""
 "data will be lost. Save any data you need to, then click 'Reload' when "
 "ready."
 
+msgid ""
+"Updating will reload all open instances of this app, and any unsaved data "
+"will be lost. Save any data you need to, then click 'Reload' when ready."
+msgstr ""
+"Updating will reload all open instances of this app, and any unsaved data "
+"will be lost. Save any data you need to, then click 'Reload' when ready."
+
 msgid "Cancel"
 msgstr "Cancel"
 

diff --git a/adapter/src/components/PWAUpdateManager.js b/adapter/src/components/PWAUpdateManager.js
@@ -16,10 +16,15 @@ function ConfirmReloadModal({ clientsCount, onCancel, onConfirm }) {
         <Modal position="middle">
             <ModalTitle>{i18n.t('Save your data')}</ModalTitle>
             <ModalContent>
-                {i18n.t(
-                    "Updating will reload all {{n}} open instances of this app, and any unsaved data will be lost. Save any data you need to, then click 'Reload' when ready.",
-                    { n: clientsCount }
-                )}
+                {clientsCount
+                    ? i18n.t(
+                          "Updating will reload all {{n}} open instances of this app, and any unsaved data will be lost. Save any data you need to, then click 'Reload' when ready.",
+                          { n: clientsCount }
+                      )
+                    : // Fallback if clientsCount is unavailable:
+                      i18n.t(
+                          "Updating will reload all open instances of this app, and any unsaved data will be lost. Save any data you need to, then click 'Reload' when ready."
+                      )}
             </ModalContent>
             <ModalActions>
                 <ButtonStrip end>
@@ -47,7 +52,7 @@ ConfirmReloadModal.propTypes = {
  */
 export default function PWAUpdateManager({ offlineInterface }) {
     const [confirmReloadModalOpen, setConfirmReloadModalOpen] = useState(false)
-    const [clientsCountState, setClientsCountState] = useState(1)
+    const [clientsCountState, setClientsCountState] = useState(null)
     const { show } = useAlert(
         i18n.t("There's an update available for this app."),
         ({ onConfirm }) => ({
@@ -59,16 +64,25 @@ export default function PWAUpdateManager({ offlineInterface }) {
         })
     )
 
-    const confirmReload = async () => {
-        const { clientsCount } = await offlineInterface.getClientsInfo()
-        setClientsCountState(clientsCount)
-        if (clientsCount <= 1) {
-            // Just one client; go ahead and reload
-            offlineInterface.useNewSW()
-        } else {
-            // Multiple clients open; warn about data loss before reloading
-            setConfirmReloadModalOpen(true)
-        }
+    const confirmReload = () => {
+        offlineInterface
+            .getClientsInfo()
+            .then(({ clientsCount }) => {
+                setClientsCountState(clientsCount)
+                if (clientsCount === 1) {
+                    // Just one client; go ahead and reload
+                    offlineInterface.useNewSW()
+                } else {
+                    // Multiple clients; warn about data loss before reloading
+                    setConfirmReloadModalOpen(true)
+                }
+            })
+            .catch(reason => {
+                // Didn't get clients info
+                console.warn(reason)
+                // Go ahead with confirmation modal with `null` as clientsCount
+                setConfirmReloadModalOpen(true)
+            })
     }
 
     useEffect(() => {

diff --git a/pwa/src/offline-interface/offline-interface.js b/pwa/src/offline-interface/offline-interface.js
@@ -65,8 +65,7 @@ export class OfflineInterface {
     }
 
     /**
-     * Requests clients info from the active service worker. Works for
-     * both first activation and SW update by using `reg.active` worker.
+     * Requests clients info from the active service worker.
      * @returns {Promise}
      */
     getClientsInfo() {
@@ -75,15 +74,16 @@ export class OfflineInterface {
                 if (!registration || !registration.active) {
                     reject('There is no active service worker')
                 }
-                // Send request message to SW
-                registration.active.postMessage({ type: swMsgs.getClientsInfo })
+                // Send request message to newest SW
+                const newestSW = registration.waiting || registration.active
+                newestSW.postMessage({ type: swMsgs.getClientsInfo })
                 // Resolve with payload received from SW `clientsInfo` message
                 this.offlineEvents.once(swMsgs.clientsInfo, resolve)
                 // Clean up potentially unused listeners eventually
                 setTimeout(() => {
                     reject('Request for clients info timed out')
                     this.offlineEvents.removeAllListeners(swMsgs.clientsInfo)
-                }, 10000)
+                }, 2000)
             })
         })
     }