Show New App Version Available using Service Worker in React.

Let's first understand what is service worker?

A service worker is a script that your browser runs in the background, separate from a web page. Using service workers you can run your app in offline mode. It also allows users to install your web app in their Mobile.

• If you want to use a service worker then set up your app using create-react-app cli because it provides service worker related boilerplate(Template).
• Now go to the main index.js file.
• Now in that file, perform following steps:
• You can see:

1// If you want your app to work offline and load faster, you can change
2// unregister() to register() below. Note this comes with some pitfalls.
3serviceWorker.unregister()
Copy

• Just change the unregister to register.
• Why should you change it to register?
• When you do this browser register service worker and start installing service worker.
• Below is the life cycle of a service worker.
      - install: this is the first event which is called when the installation of service worker get started.
   - activate: fired when service worker successfully installed and becomes active.
    - updatefound: fired when new service worker available. this new service worker keep waiting until old service get unregistered. so, we have to listen on this event and based on that event we have to show new version available dialog to the user and perform a hard reload to get updated content on page.

Now, We are going to learn how to show app version update dialog to the user.

• Go to the src/index.js file.
• Remember, I told you to change serviceWorker.unregister() to serviceWorker.register().
• Now, You have to call the register method by passing configuration object to the method.

src/index.js:

1const configuration = {
2 onUpdate: (registration) => {
3   if (registration && registration.waiting) {
4     if (window.confirm('New version available!  refresh to update your app?')) {
5       registration.waiting.postMessage({ type: 'SKIP_WAITING' });
6       window.location.reload();
7     }
8   }
9 }
10};
11 
12serviceWorker.register(configuration);
Copy

• In the code above, We have a configuration object which contains the onUpdate method.
• This method is invoked whenever a new service worker is available and an 'updatefound' method is fired.
• In this method, What we did is simply check new service worker is waiting to take control over the page or not.
• If it is waiting then, We just show a new version popup available to the user.
• If a user click on the ok button, then we simply refresh the page. So that, this user can see new changes in the web app.
• The last step is just updating the service worker file by putting or changing version or timestamp in service worker file whenever you are going to deploy new changes to the production.

serviceWorker.js:

1const VERSION = require('../package.json').version; 
2           OR 
3timestamp = 1592035319057
Copy

src/index.js:

1import React, { useEffect, useState } from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import * as serviceWorker from './serviceWorker';
6
7ReactDOM.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>,
11  document.getElementById('root')
12);
13
14// If you want your app to work offline and load faster, you can change
15// unregister() to register() below.
16const configuration = {
17  onUpdate: (registration) => {
18    if (registration && registration.waiting) {
19      if (window.confirm('New version available!  refresh to update your app?')) {
20        registration.waiting.postMessage({ type: 'SKIP_WAITING' });
21        window.location.reload();
22      }
23    }
24  }
25};
26  
27serviceWorker.register(configuration);
Copy

• Note: We can trigger any component of any framework to show them instead of basic confirm alert.

Conclusion

Finally, We have cache busted the React app created using create-react-app cli and Service Worker.

• If you want to learn more about service worker then you can visit following link:

https://developers.google.com/web/fundamentals/primers/service-workers