<pwa-reload-dialog>
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.
Features
- Custom Web Component
- Accessible
- Works seemlessly with PWAs
👷 Build with
Workbox
🧱
🚀 Getting started
Install
npm
-
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>
-
web
<script type="module" src="https://unpkg.com/pwa-reload-dialog"></script>
Configure Service Worker
-
Add this listener to your Service Worker file (ex:
sw.js
)addEventListener('message', event => { if (event.data && event.data.type === 'SKIP_WAITING') { skipWaiting(); } });
Include component in HTML
-
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 👇👇
📚 API Docs
JavaScript
-
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 =
JavaScript API Example
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';
HTML
You can either configure the component using JavaScript or even by HTML attributes.
HTML API Example
<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>
Polyfills
Install polyfills
npm install @webcomponents/webcomponentsjs
Load polyfill
<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
Logging
Logging is enabled only when the component has a
dev
attibute like so:
<pwa-reload-dialog dev></pwa-reload-dialog>