Example PWA update

PWA NEW UPDATE AVAILABLE example.

• create-react-app@3.4.0 with @material-ui/core@^4.9.7
• @vue/cli@4.2.3 with vuetify@^2.2.11

Since a message listener added when skipWaiting: false, we can update the PWA with workbox version ^4.1.0 ~ ^4.3.1.

Steps

1. Use register-service-worker to listen on updated event
2. When updated triggered, declare a function to postMessage with { type: SKIP_WAITING } to the waiting worker, and it will make the worker skipWaiting().
3. When the user click the REFRESH button, make the waiting worker skipWaiting(), update() the registration and reload(). Now the latest app is loaded.

Demo

Choose a framework:

# React
cd react

# Vue
cd vue

Build the production and serve the app:

yarn build

Now open the browser and request http://localhost:5000/

Optional: You can stop the web server and reload the page. You would see that the PWA still works even it's offline.

Build the production and serve the app again:

yarn build

Reload the page(not hard refresh) and you will see the update notification is pop-on as a snackbar. Click REFRESH and you'll see the body is changed.