feat(sw): adding support for sw-update

[SebasG22]

This PR includes small changes in the way that react-app handle the SW.

1. I added a snackbar element that hasvisibility: none until detecting a new serviceWorker is detected Note: The class show is added to set thevisibility: visible``)_.
2. On the serviceWorker.ts I added an extra param to the onUpdate callback, to be able to send a message to the service worker.
3. On the index.tsx, I added the onUpdate callback to handle the notification and when you clicked to send a message to the worker to perform the update action.

Just have one missing step, configure the service-worker.js generated by react-app. I made a little research and found that you need to eject the problem to handle this limitation. Limitations of default PWAs in CRA

I don't like the idea of eject the project for many reasons ( You need to tackle all the issues regarding custom configuration).

I've been working with PWA for almost 2 years, I highly recommend that instead of using the CRA Package for PWA's, use Workbox the facto to manage service workers for all kind of javascript apps. They offer a lot of great customization without ejecting the project and the only change that is needed is included as a dependency and running the command on the build pipeline.

By the way, the missing step is: Listen to the message and skipWaiting to update all the clients(tabs) open :

// service-worker.js
self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

[hunarjain09]

@SebasG22 Hey, Why you didn't use notification API instead ?

[hunarjain09]

@SebasG22 Hey, Why you didn't use notification API instead ?

Also there is no element in index.html with class snackbarPWA

[hunarjain09]

@jtiala This code doesn't seem to work. One has to reload the page to get the new service worker running.

[SebasG22]

Hey @hunarjain007,

1. Sorry for the typo error, instead of .snackbarPWA should be #snackbarPWA.
2. Notification API is not intended to be used in this case. If you use the notification API, you must have to:
   • ask the user to prompt the notification
   • adding a click listener to the notification and only when this was clicked runs the update. This is not a good UX experience in mobile and desktop tho.
   • As I mentioned in the PR there are some limitations on the service-worker that is generated automatically by CRA. So the missing piece is to add the message listener in the worker and will work. For the limitation, I propose some solutions like workbox.

[hunarjain09]

@SebasG22 The snackbar appears only when user refreshes the page... so even if there is listener attached on the click of snackbar, but still snackbar will not appear.