https://github.com/charistheo/mwc-pwa-reload

A reload snack-bar for PWA which gives the user the option to reload the page to see the new version of the web app. Build with Material Components for the Web.
https://github.com/charistheo/mwc-pwa-reload

material-components material-snackbar progressive-web-app pwa pwa-reload service-worker snackbar web-component workbox

Last synced: 7 months ago
JSON representation

A reload snack-bar for PWA which gives the user the option to reload the page to see the new version of the web app. Build with Material Components for the Web.

• Host: GitHub
• URL: https://github.com/charistheo/mwc-pwa-reload
• Owner: charisTheo
• License: mit
• Created: 2020-01-23T17:30:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-11-18T15:21:53.000Z (almost 3 years ago)
• Last Synced: 2024-12-06T21:52:53.502Z (10 months ago)
• Topics: material-components, material-snackbar, progressive-web-app, pwa, pwa-reload, service-worker, snackbar, web-component, workbox
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/mwc-pwa-reload
• Size: 2.95 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 
<mwc-pwa-reload>




  



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

[![npm version](https://badge.fury.io/js/mwc-pwa-reload.svg)](//npmjs.com/package/mwc-pwa-reload)

[![Dependency status](https://david-dm.org/charisTheo/mwc-pwa-reload.svg)](//npmjs.com/package/mwc-pwa-reload?activeTab=dependencies)

----

## 👷‍ Build with 

### 🧱 [Material Components for the Web](https://github.com/material-components/material-components-web) (on top of [Material Snackbar](https://github.com/material-components/material-components-web-components/tree/master/packages/snackbar)).

### 🧱 [Workbox](https://developers.google.com/web/tools/workbox/modules/workbox-window)



  



## 🚀 Getting started

### Install

- #### npm

1. Inside your project directory run 

       npm install mwc-pwa-reload

2. Import component

   * Inside your app's JavaScript file _(ex: `app.js`)_

         import 'mwc-pwa-reload';

    **OR**

    * Add a `` tag in an HTML file _(ex: `index.html`)_ 

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

- #### web

      

### Configure Service Worker

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

        addEventListener('message', event => {

          if (event.data && event.data.type === 'NEW_VERSION') {

              skipWaiting();

          }

        });

### Include component in HTML

1. Include the `` element inside your HTML file _(ex: `index.html`)_

        




> ⚠️ The first time you push your code live the snackbar 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

> 💡 _For the full list look at the [Material Snackbar Docs](https://github.com/material-components/material-components-web-components/tree/master/packages/snackbar#example-usage)_

### JavaScript

* `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` - Snackbar main text

  * **Default = `'A new version is available 💎'`**

  

  

* `reloadTextColor: String` - Reload action button color

  * **Default = `'#18ffff'`**

  * Change color also with the CSS variable `--mdc-snackbar-action-color`

  > More here 👉 [Material Color Palette](https://material.io/archive/guidelines/style/color.html#color-color-palette)

  

  

* `timeout: String|Number` - Snackbar's timeout until it is dismissed (ms)

  * **Default = `6000`**

  * ⚠️ Need to be between 4000 and 10000

  

* `onDismiss: Function` - Callback when snackbar has been dismissed after timeout or by clicking on the **X** button.

  * **Default = `null`**

#### JavaScript API Example

    const mSnackbar = document.querySelector('mwc-pwa-reload');

    mSnackbar.swUrl = './service-worker.js';

    mSnackbar.swScope = '/';

    mSnackbar.labelText = 'Hello there! New version in town!';

    mSnackbar.timeout = 8000;

    mSnackbar.reloadTextColor = '#d500f9';

  

### HTML

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

#### HTML API Example

    

## Logging

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