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

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"
 

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(() => {

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)
  })
  })
  }