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
🧱 Workbox
-
Inside your project directory run
npm install pwa-reload-dialog
-
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>
-
Add this listener to your Service Worker file (ex:
sw.js
)addEventListener('message', event => { if (event.data && event.data.type === 'SKIP_WAITING') { skipWaiting(); } });
-
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'
- Default =
-
swScope: String
- The scope by which Service Worker has been registered- Default =
'/'
- Default =
-
labelText: String
- Dialog main text- Default =
'A new version is available 💎'
- Default =
-
color: String
- Dialog CSS text color- Default =
'#303f9f'
- Default =
-
background-color: String
- Dialog CSS background color- Default =
'#ff4081'
- Default =
-
timeout: String|Number
- Dialog's timeout until it is dismissed (ms)- Default =
null
- Default =
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>
Logging is enabled only when the component has a
dev
attibute like so:
<pwa-reload-dialog dev></pwa-reload-dialog>