DEV Community

Rinaldy
Rinaldy

Posted on

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.

Top comments (0)