Introduction

This article provides a simple method to check if the Progressive Web App's (PWA) Service Worker is ready and precaching has been completed.

Environment

Progressive Web Apps (PWA)

Instructions/Procedure

Service workers are at the heart of PWAs, enabling features like offline access and fast loading times through precaching. Mendix does not currently provide a built-in mechanism to indicate precaching completion.

The navigator.serviceWorker.ready promise provides a straightforward way to determine when a service worker has become active and is controlling the page. Once this promise resolves, the service worker has registered successfully and has completed its precaching. 

To check if the service worker is active and precaching is complete, follow these steps:

1. Create a JavaScript action in the project and add below code. 

   export async function CheckIfServiceWorkerIsActive() {
       // navigator.serviceWorker.ready returns a Promise that resolves
       // when the service worker is active and controlling the page.
       navigator.serviceWorker.ready.then(registration => {
           console.log("Service worker is active:", registration);
       }).catch(error => {
           console.error("Service Worker registration failed or is not active:", error);
       });
   }

2. Call this JavaScript action from a nanoflow.
3. Add an Events widget in the Home page and call this nanoflow.

Outcome

If the service worker is active, a message displays under the Console tab similar to: Service worker is active: ServiceWorkerRegistration { ... }. If there is an issue, an error message displays in the console.

Additional information

Not applicable