A minimal dialog message for PWAs that gives the user the option to reload the page on a new version of the web app. If the dialog is dismissed, the Service Worker will remain in the waiting phase and the new version of the website will not be loaded.

• Custom Web Component
• Accessible
• Works seemlessly with PWAs

1. Inside your project directory run

   npm install pwa-reload-dialog
   

2. Import component

   • Inside your app's JavaScript file (ex: app.js)

     import 'pwa-reload-dialog';
     

   OR

   • Add a <script> tag in an HTML file (ex: index.html)

     <script src="./node_modules/pwa-reload-dialog/dist/index.js"></script>
     

  <script type="module" src="https://unpkg.com/pwa-reload-dialog"></script>

1. Add this listener to your Service Worker file (ex: sw.js)

    addEventListener('message', event => {
      if (event.data && event.data.type === 'SKIP_WAITING') {
          skipWaiting();
      }
    });
   

1. Include the <pwa-reload-dialog> element inside your HTML file (ex: index.html)

    <pwa-reload-dialog></pwa-reload-dialog>
   

⚠️ The first time you push your code live the dialog will not be shown, however it will be shown on every new version after that.

⚠️ In the above example the component will run on default options that are explained below 👇👇

• swUrl: String - Local Service Worker JavaScript file url

  • Default = './sw.js'

• swScope: String - The scope by which Service Worker has been registered

  • Default = '/'

• labelText: String - Dialog main text

  • Default = 'A new version is available 💎'

• color: String - Dialog CSS text color

  • Default = '#303f9f'

• background-color: String - Dialog CSS background color

  • Default = '#ff4081'

• timeout: String|Number - Dialog's timeout until it is dismissed (ms)

  • Default = null

const pwaReloadDialog = document.querySelector('pwa-reload-dialog');

pwaReloadDialog.swUrl = './service-worker.js';
pwaReloadDialog.swScope = '/';
pwaReloadDialog.labelText = 'Hello there! New version in town!';
pwaReloadDialog.timeout = 8000;
pwaReloadDialog.color = '#d500f9';
pwaReloadDialog.backgroundColor = '#232323';

You can either configure the component using JavaScript or even by HTML attributes.

<pwa-reload-dialog 
  sw-url="./service-worker.js" 
  sw-scope="/"
  timeout="8000"
  label-text="Hello there! New version in town!"
  color="#d500f9"
  background-color="#232323"
></pwa-reload-dialog>

  npm install @webcomponents/webcomponentsjs

  <!-- load webcomponents bundle, which includes all the necessary polyfills -->
  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

ℹ More info on polyfills

Logging is enabled only when the component has a dev attibute like so:

<pwa-reload-dialog dev></pwa-reload-dialog>