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 Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay