From 8d033e16f8d8fdbd6b82cdb88634e7b11dce8883 Mon Sep 17 00:00:00 2001 From: Enas Gaber Date: Mon, 16 Mar 2026 12:09:47 +0100 Subject: [PATCH 1/5] Service worker and PWA Updates guide --- .../progressive-web-app.md | 4 + .../service-worker.md | 125 ++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md index a47183692f3..4c6260aee29 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md @@ -107,6 +107,10 @@ Next to that, it is possible to force a profile by providing the profile name in When forcing a specific profile on a cloud deployment, it can be necessary to first clear the browser cache. +## Managing PWA Updates + +To learn more about the Service Worker life cycle and how to detect and handle PWA updates to provide users with the latest version, see [Service Worker and PWA Updates](/refguide/mobile/introduction-to-mobile-technologies/service-worker). + ## Advanced Settings See the sections below for information on advanced settings. diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md new file mode 100644 index 00000000000..eb0888914cb --- /dev/null +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md @@ -0,0 +1,125 @@ +--- +title: "Service Worker and PWA Updates" +url: /refguide/mobile/introduction-to-mobile-technologies/service-worker +weight: 20 +--- + +## Introduction + +A Service Worker is a powerful type of web worker, essentially a JavaScript file that runs in the background, separate from your main web page. It can control pages within its [scope](#scope), and acts as a proxy, sitting between your PWA and the network. + +Its primary role is to intercept network requests made by your PWA, allowing it to decide whether to fetch resources from the network or retrieve them from the cache. This interception capability is crucial for providing robust offline experiences, enabling your PWA to function even when the user has no network connectivity. + +## Service worker Scope {#scope} + +A service worker’s scope is determined by the location of its JavaScript file on the web server. + +If a service worker runs on a page located at /subdir/index.html, and is located at /subdir/sw.js, the service worker's scope is /subdir/ + +Scope limits which pages are controlled by a service worker, not which requests it can intercept. Once a service worker controls a page, it can intercept any network request that page makes, including requests to cross-origin resources. + +## The Service Worker Life Cycle + +Understanding the Service Worker life cycle is key to understand how updates to your Mendix PWA are handled. A Service Worker goes through several distinct phases: + +1. Registration: + This is the initial step. The browser downloads the Service Worker file. If the code contains syntax errors, registration fails, and the Service Worker is discarded. +2. Installation + During this phase, the Service Worker typically caches static assets your PWA needs to function offline. If all assets are successfully precached, the installation succeeds. If installation fails the service worker is discarded. + Once installed: + - It becomes activated immediately if no other Service Worker is currently controlling the page. + - If there is already an active Service Worker, the new one will be installed but enters a waiting state. + The "waiting" state, ensures that updates to your application are delivered smoothly and without interrupting your users' current interactions. +3. Activation: + Once installed, the Service Worker enters the activating state and then becomes activated. An activated Service Worker takes control of pages within its scope, that means it is ready to intercept requests. +4. Redundant: + A Service Worker can become redundant if a new version replaces it, or if it fails to install. + +## Service Worker Update + +When you deploy a new version of your Mendix PWA, a new Service Worker file is generated with updated caching strategies and assets list. +The browser detects this update and initiates a new life cycle for the updated Service Worker. + +1. New Service worker installation: The new Service Worker starts to install and cache assets. +2. Waiting state: Once the new Service Worker was successfully installed, it enters a waiting state. The old Service Worker remains active and in control of your PWA. +3. Activation of the new service worker: The new Service Worker will only activate and take control when all instances of your PWA (all open tabs or windows) that are controlled by the old Service Worker are closed. + +## Detecting and Handling Updates in Your PWA + +The browser's ServiceWorkerRegistration interface provides properties and methods to monitor its state and detect updates. Starting from Mendix 11.9.0, a client API is available to skip the waiting phase and immediately activates the new service worker version. +You can implement a custom update mechanism to provide users with a clear notifications and an option to update to the latest version of your app without requiring them to close all tabs. + +Implementation Steps: + +1. Listening for Service Worker updates +Create a JavaScript Action to Listen for Service Worker Updates. This action should run when your application starts up to monitor for available updates. + +```javascript +export async function JS_ListenForPWAUpdates() { + if (!('serviceWorker' in navigator)) { + console.warn('Service Workers are not supported in this browser.'); + return; + } + + try { + const registration = await navigator.serviceWorker.getRegistration(); + + if (registration) { + + if (registration.waiting) { + console.log('An update is already available and waiting. Notify the user.'); + // Show a confirmation dialog or call your custom update flow + // to notify the user that an update is available + } + + // Detect when a new Service Worker update is found + registration.addEventListener('updatefound', () => { + const newWorker = registration.installing; + + if (newWorker) { + // Listen for state changes in the new Service Worker + newWorker.addEventListener('statechange', () => { + // When the new Service Worker becomes 'installed', it means precaching is complete and it is ready to take control. + // It enters the waiting state because an existing controller (old SW) is active. + if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { + console.log('A new update is available. Notify the user.'); + // Show a confirmation dialog or implement your custom update UI + // to notify the user that an update is available + } + }); + } + }); + } + } catch (error) { + console.error('Error setting up Service Worker update listener:', error); + } +} +``` + +2. Notifying users +Implement a custom flow that prompts users to confirm updates when a new version becomes available. This avoids interrupting users during critical operations. + +3. Activating the new Service Worker +When the user confirms the update, use the Client API `skipWaiting()` to activate the new Service Worker. + +```javascript +import { skipWaiting } from "mx-api/pwa"; + +/** + * @returns {Promise} A promise that resolves to true if the update was successfully activated and page reloaded, false otherwise. + */ +export async function JS_ActivatePWAUpdate() { + const activated = await skipWaiting(); + + if (activated) { + console.log("New service worker activated and controlling the page."); + + return true; + } else { + console.warn("No waiting Service Worker found or activation failed via Mendix API."); + return false; + } +} +``` + +4. Reload the page to load the new app version with the newly activated Service Worker, providing the user with the latest features and fixes. From 1faae4a87b6f99ac9f3be8faabe5ffc99c357847 Mon Sep 17 00:00:00 2001 From: Enas Gaber Date: Mon, 16 Mar 2026 17:27:12 +0100 Subject: [PATCH 2/5] Some improvements --- .../progressive-web-app.md | 2 +- .../service-worker.md | 83 ++++++++++--------- 2 files changed, 43 insertions(+), 42 deletions(-) diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md index 4c6260aee29..110c47c3803 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md @@ -109,7 +109,7 @@ When forcing a specific profile on a cloud deployment, it can be necessary to fi ## Managing PWA Updates -To learn more about the Service Worker life cycle and how to detect and handle PWA updates to provide users with the latest version, see [Service Worker and PWA Updates](/refguide/mobile/introduction-to-mobile-technologies/service-worker). +To learn more about the service worker life cycle and how to detect and handle PWA updates to provide users with the latest version, see [Service Worker and PWA Updates](/refguide/mobile/introduction-to-mobile-technologies/service-worker). ## Advanced Settings diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md index eb0888914cb..cfab3f305d6 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md @@ -6,58 +6,58 @@ weight: 20 ## Introduction -A Service Worker is a powerful type of web worker, essentially a JavaScript file that runs in the background, separate from your main web page. It can control pages within its [scope](#scope), and acts as a proxy, sitting between your PWA and the network. +A service worker is a specialized type of web worker, essentially a JavaScript file that runs in the background, separate from your main web page. It can control pages within its [scope](#scope), and acts as a proxy between your PWA and the network. -Its primary role is to intercept network requests made by your PWA, allowing it to decide whether to fetch resources from the network or retrieve them from the cache. This interception capability is crucial for providing robust offline experiences, enabling your PWA to function even when the user has no network connectivity. +Its primary role is to intercept network requests made by your PWA and decide whether to fetch resources from the network or serve them from the cache. This interception capability is crucial for providing robust offline experiences, enabling your PWA to function even when the user has no network connectivity. ## Service worker Scope {#scope} A service worker’s scope is determined by the location of its JavaScript file on the web server. -If a service worker runs on a page located at /subdir/index.html, and is located at /subdir/sw.js, the service worker's scope is /subdir/ +For example, if a service worker runs on a page located at /subdir/index.html, and is located at /subdir/sw.js, the service worker's scope is /subdir/ Scope limits which pages are controlled by a service worker, not which requests it can intercept. Once a service worker controls a page, it can intercept any network request that page makes, including requests to cross-origin resources. -## The Service Worker Life Cycle +## The service worker Lifecycle -Understanding the Service Worker life cycle is key to understand how updates to your Mendix PWA are handled. A Service Worker goes through several distinct phases: +Understanding the service worker life cycle is key to understand how updates to your Mendix PWA are handled. A service worker goes through several distinct phases: 1. Registration: - This is the initial step. The browser downloads the Service Worker file. If the code contains syntax errors, registration fails, and the Service Worker is discarded. + This is the initial step. The browser downloads the service worker file. If the code contains syntax errors, registration fails and the service worker is discarded. 2. Installation - During this phase, the Service Worker typically caches static assets your PWA needs to function offline. If all assets are successfully precached, the installation succeeds. If installation fails the service worker is discarded. + During this phase, the service worker typically caches static assets your PWA needs to function offline. If all assets are successfully precached, the installation succeeds. If installation fails, the service worker is discarded. Once installed: - - It becomes activated immediately if no other Service Worker is currently controlling the page. - - If there is already an active Service Worker, the new one will be installed but enters a waiting state. + - It becomes activated immediately if no other service worker is currently controlling the page. + - If there is already an active service worker, the new one will be installed but enters a waiting state. The "waiting" state, ensures that updates to your application are delivered smoothly and without interrupting your users' current interactions. 3. Activation: - Once installed, the Service Worker enters the activating state and then becomes activated. An activated Service Worker takes control of pages within its scope, that means it is ready to intercept requests. + Once installed, the service worker enters the activating state and then becomes activated. An activated service worker takes control of pages within its scope, that means it is ready to intercept requests. 4. Redundant: - A Service Worker can become redundant if a new version replaces it, or if it fails to install. + A service worker can become redundant if a new version replaces it, or if it fails to install. -## Service Worker Update +## service worker Update -When you deploy a new version of your Mendix PWA, a new Service Worker file is generated with updated caching strategies and assets list. -The browser detects this update and initiates a new life cycle for the updated Service Worker. +When you deploy a new version of your Mendix PWA, a new service worker file is generated with updated caching strategies and assets list. +The browser detects this update and initiates a new lifecycle for the updated service worker. -1. New Service worker installation: The new Service Worker starts to install and cache assets. -2. Waiting state: Once the new Service Worker was successfully installed, it enters a waiting state. The old Service Worker remains active and in control of your PWA. -3. Activation of the new service worker: The new Service Worker will only activate and take control when all instances of your PWA (all open tabs or windows) that are controlled by the old Service Worker are closed. +1. New service worker installation: The new service worker starts to install and cache assets. +2. Waiting state: Once the new service worker is successfully installed, it enters a waiting state. The old service worker remains active and in control of your PWA. +3. Activation of the new service worker: The new service worker will only activate when all instances of your PWA (all open tabs or windows) that are controlled by the old service worker are closed. ## Detecting and Handling Updates in Your PWA -The browser's ServiceWorkerRegistration interface provides properties and methods to monitor its state and detect updates. Starting from Mendix 11.9.0, a client API is available to skip the waiting phase and immediately activates the new service worker version. -You can implement a custom update mechanism to provide users with a clear notifications and an option to update to the latest version of your app without requiring them to close all tabs. +The browser's `ServiceWorkerRegistration` interface provides properties and methods to monitor its state and detect updates. Starting from Mendix 11.9.0, a client API is available to skip the waiting phase and immediately activate the new service worker version. +You can implement a custom update mechanism to notify users when a new version is available and allow them to update the application without closing all tabs/windows. Implementation Steps: -1. Listening for Service Worker updates -Create a JavaScript Action to Listen for Service Worker Updates. This action should run when your application starts up to monitor for available updates. +1. Listen for service worker updates +Create a JavaScript Action to Listen for service worker updates. This action should run when your application starts up, for example, calling the JavaScript action via nanoflow that triggers by [Events](/appstore/widgets/events/) widget ```javascript export async function JS_ListenForPWAUpdates() { if (!('serviceWorker' in navigator)) { - console.warn('Service Workers are not supported in this browser.'); + console.warn('service workers are not supported in this browser.'); return; } @@ -65,22 +65,15 @@ export async function JS_ListenForPWAUpdates() { const registration = await navigator.serviceWorker.getRegistration(); if (registration) { - - if (registration.waiting) { - console.log('An update is already available and waiting. Notify the user.'); - // Show a confirmation dialog or call your custom update flow - // to notify the user that an update is available - } - - // Detect when a new Service Worker update is found + + // Detect when a new service worker update is found registration.addEventListener('updatefound', () => { const newWorker = registration.installing; if (newWorker) { - // Listen for state changes in the new Service Worker + // Listen for state changes in the new service worker newWorker.addEventListener('statechange', () => { - // When the new Service Worker becomes 'installed', it means precaching is complete and it is ready to take control. - // It enters the waiting state because an existing controller (old SW) is active. + // New service worker is installed and ready, but waiting because an existing service worker is active if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { console.log('A new update is available. Notify the user.'); // Show a confirmation dialog or implement your custom update UI @@ -89,18 +82,21 @@ export async function JS_ListenForPWAUpdates() { }); } }); + + if (registration.waiting) { + console.log('An update is already available and waiting. Notify the user.'); + // Show a confirmation dialog or call your custom update flow + // to notify the user that an update is available + } } } catch (error) { - console.error('Error setting up Service Worker update listener:', error); + console.error('Error setting up service worker update listener:', error); } } ``` -2. Notifying users -Implement a custom flow that prompts users to confirm updates when a new version becomes available. This avoids interrupting users during critical operations. - -3. Activating the new Service Worker -When the user confirms the update, use the Client API `skipWaiting()` to activate the new Service Worker. +2. Create JavaScript Action to activate the new service worker +When the user confirms the update, use the Client API `skipWaiting()` to activate the new service worker. ```javascript import { skipWaiting } from "mx-api/pwa"; @@ -116,10 +112,15 @@ export async function JS_ActivatePWAUpdate() { return true; } else { - console.warn("No waiting Service Worker found or activation failed via Mendix API."); + console.warn("No waiting service worker found or activation failed via Mendix API."); return false; } } ``` -4. Reload the page to load the new app version with the newly activated Service Worker, providing the user with the latest features and fixes. +3. Notifying users +To avoid interrupting users during critical operations, it is recommended to notify them when an update becomes available. +For example, you can implement a nanoflow that prompts users to confirm the update when a new version is detected. If the user confirms, the nanoflow can call JS_ActivatePWAUpdate to update. +This nanoflow can be passed as a parameter to `JS_ListenForPWAUpdates`, which will invoke it when an update is detected. + +4. Reload the app, or ask users to reload all open tabs or windows to ensure the application loads with the newly activated service worker. From fcea0e52be9d3cf60e98360672483776effda531 Mon Sep 17 00:00:00 2001 From: Enas Gaber Date: Mon, 16 Mar 2026 17:28:33 +0100 Subject: [PATCH 3/5] Some improvements --- .../introduction-to-mobile-technologies/service-worker.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md index cfab3f305d6..090acb0c93b 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md @@ -10,7 +10,7 @@ A service worker is a specialized type of web worker, essentially a JavaScript f Its primary role is to intercept network requests made by your PWA and decide whether to fetch resources from the network or serve them from the cache. This interception capability is crucial for providing robust offline experiences, enabling your PWA to function even when the user has no network connectivity. -## Service worker Scope {#scope} +## Service Worker Scope {#scope} A service worker’s scope is determined by the location of its JavaScript file on the web server. @@ -18,7 +18,7 @@ For example, if a service worker runs on a page located at /subdir/index.html, a Scope limits which pages are controlled by a service worker, not which requests it can intercept. Once a service worker controls a page, it can intercept any network request that page makes, including requests to cross-origin resources. -## The service worker Lifecycle +## Service Worker Lifecycle Understanding the service worker life cycle is key to understand how updates to your Mendix PWA are handled. A service worker goes through several distinct phases: @@ -35,7 +35,7 @@ Understanding the service worker life cycle is key to understand how updates to 4. Redundant: A service worker can become redundant if a new version replaces it, or if it fails to install. -## service worker Update +## Service Worker Update When you deploy a new version of your Mendix PWA, a new service worker file is generated with updated caching strategies and assets list. The browser detects this update and initiates a new lifecycle for the updated service worker. From b161738293e590b8ee32a5719598361848e57d3b Mon Sep 17 00:00:00 2001 From: Enas Gaber Date: Mon, 16 Mar 2026 21:28:13 +0100 Subject: [PATCH 4/5] Document Waiting for Service Worker Readiness --- .../service-worker.md | 42 +++++++++++++++---- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md index 090acb0c93b..34283fe374c 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md @@ -35,6 +35,25 @@ Understanding the service worker life cycle is key to understand how updates to 4. Redundant: A service worker can become redundant if a new version replaces it, or if it fails to install. +## Waiting for Service Worker Readiness + +You may want to wait until the Service Worker is ready before performing operations that rely on it, such as interacting with the app while offline. +The browser provides the [ready](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/ready) property, which returns a Promise that resolves when a service worker is active, to ensure that the service worker is fully initialized and that precaching of assets is complete so the app can work offline. + +```javascript +export async function waitForAppReady() { + if (!('serviceWorker' in navigator)) { + console.warn('service workers are not supported in this browser.'); + return; + } + const registration = await navigator.serviceWorker.ready; + + console.log('A Service Worker is active:', registration.active); + // At this point, a service worker is active. + // A page reload is necessary to ensure all assets are served by the new service worker and the app is fully offline ready +} +``` + ## Service Worker Update When you deploy a new version of your Mendix PWA, a new service worker file is generated with updated caching strategies and assets list. @@ -46,7 +65,7 @@ The browser detects this update and initiates a new lifecycle for the updated se ## Detecting and Handling Updates in Your PWA -The browser's `ServiceWorkerRegistration` interface provides properties and methods to monitor its state and detect updates. Starting from Mendix 11.9.0, a client API is available to skip the waiting phase and immediately activate the new service worker version. +The [ServiceWorkerRegistration](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration) interface provides properties and methods to monitor its state and detect updates. Starting from Mendix 11.9.0, a client API is available to skip the waiting phase and immediately activate the new service worker version. You can implement a custom update mechanism to notify users when a new version is available and allow them to update the application without closing all tabs/windows. Implementation Steps: @@ -65,7 +84,6 @@ export async function JS_ListenForPWAUpdates() { const registration = await navigator.serviceWorker.getRegistration(); if (registration) { - // Detect when a new service worker update is found registration.addEventListener('updatefound', () => { const newWorker = registration.installing; @@ -73,11 +91,18 @@ export async function JS_ListenForPWAUpdates() { if (newWorker) { // Listen for state changes in the new service worker newWorker.addEventListener('statechange', () => { - // New service worker is installed and ready, but waiting because an existing service worker is active - if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { - console.log('A new update is available. Notify the user.'); - // Show a confirmation dialog or implement your custom update UI - // to notify the user that an update is available + // New service worker is installed and ready. + if (newWorker.state === 'installed'){ + // The new service worker is waiting because an existing service worker is active + if(navigator.serviceWorker.controller) { + console.log('A new update is available. Notify the user.'); + // Show a confirmation dialog or implement your custom update UI + // to notify the user that an update is available + } else { + console.log("Service Worker installed and ready."); + // This is the first time a service worker is installed and activated for this page. + // A page reload is necessary to ensure all assets are served by the new service worker and the app is fully offline ready + } } }); } @@ -123,4 +148,5 @@ To avoid interrupting users during critical operations, it is recommended to not For example, you can implement a nanoflow that prompts users to confirm the update when a new version is detected. If the user confirms, the nanoflow can call JS_ActivatePWAUpdate to update. This nanoflow can be passed as a parameter to `JS_ListenForPWAUpdates`, which will invoke it when an update is detected. -4. Reload the app, or ask users to reload all open tabs or windows to ensure the application loads with the newly activated service worker. +4. Reload the Application +Trigger a reload, or ask users to reload all open tabs or windows to ensure the application loads with the newly activated service worker. From f58b14f4863262631f4898b838af79322c72adfa Mon Sep 17 00:00:00 2001 From: Enas Gaber Date: Mon, 16 Mar 2026 21:33:04 +0100 Subject: [PATCH 5/5] Fix typo --- .../progressive-web-app.md | 2 +- .../introduction-to-mobile-technologies/service-worker.md | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md index 110c47c3803..956908614a3 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app.md @@ -109,7 +109,7 @@ When forcing a specific profile on a cloud deployment, it can be necessary to fi ## Managing PWA Updates -To learn more about the service worker life cycle and how to detect and handle PWA updates to provide users with the latest version, see [Service Worker and PWA Updates](/refguide/mobile/introduction-to-mobile-technologies/service-worker). +To learn more about the service worker lifecycle and how to detect and handle PWA updates to provide users with the latest version, see [Service Worker and PWA Updates](/refguide/mobile/introduction-to-mobile-technologies/service-worker). ## Advanced Settings diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md index 34283fe374c..d8880bd90f8 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/service-worker.md @@ -20,7 +20,7 @@ Scope limits which pages are controlled by a service worker, not which requests ## Service Worker Lifecycle -Understanding the service worker life cycle is key to understand how updates to your Mendix PWA are handled. A service worker goes through several distinct phases: +Understanding the service worker lifecycle is key to understand how updates to your Mendix PWA are handled. A service worker goes through several distinct phases: 1. Registration: This is the initial step. The browser downloads the service worker file. If the code contains syntax errors, registration fails and the service worker is discarded. @@ -145,8 +145,7 @@ export async function JS_ActivatePWAUpdate() { 3. Notifying users To avoid interrupting users during critical operations, it is recommended to notify them when an update becomes available. -For example, you can implement a nanoflow that prompts users to confirm the update when a new version is detected. If the user confirms, the nanoflow can call JS_ActivatePWAUpdate to update. -This nanoflow can be passed as a parameter to `JS_ListenForPWAUpdates`, which will invoke it when an update is detected. +For example, you can implement a nanoflow that prompts users to confirm the update when a new version is detected. If the user confirms, the nanoflow can call JS_ActivatePWAUpdate to update. This nanoflow can be passed as a parameter to `JS_ListenForPWAUpdates`, which will invoke it when an update is detected. 4. Reload the Application Trigger a reload, or ask users to reload all open tabs or windows to ensure the application loads with the newly activated service worker.