DEV Community

Rinaldy
Rinaldy

Posted on

1

How to check update react PWA app

first, open your file serviceWorkerRegistration

find this function

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then((registration) => {

Enter fullscreen mode Exit fullscreen mode

and add this code below before registration.onupdatefound

// Check for updates at start.     
registration.update();     
// Check for updates every 5 min.      
setInterval(() => {        
registration.update();        
console.log("Checked for update...");      
}, (1000 * 60) * 5);
Enter fullscreen mode Exit fullscreen mode

and then be

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then((registration) => {

      // Check for updates at start.     
      registration.update();     
      // Check for updates every 5 min.      
      setInterval(() => {        
        registration.update();        
        console.log("Checked for update...");      
      }, (1000 * 60) * 5);
Enter fullscreen mode Exit fullscreen mode

second, and the last find if (config && config.onUpdate) {

add alert for check if will be update
alert("Update available! To update, close all windows and reopen");

code will be

alert("Update available! To update, close all windows and reopen");

// Execute callback
if (config && config.onUpdate) {
    config.onUpdate(registration);
}
Enter fullscreen mode Exit fullscreen mode

run command below:

npm run build

run your app in server and to test its work or not,
then edit some code

run command

npm run build

then if has pop up alert show up

congratulations your react PWA app has been checked update.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more