Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including easy-pwa-js with all npm packages installed. Try it out:

var easyPwaJs = require("easy-pwa-js")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

easy-pwa-js v1.0.0-beta.3

Javascript library for managing PWA (progressive web app).


Tools for managing your Progressive Web App.


  • Manage PWA features easily
  • Manage Push Notifications easily.
  • A specific helper is showed for each browser to help people to install your app.


An example is available here:



npm install easy-pwa-js

Use it in your modules:

import EasyPwaManager from 'easy-pwa-js/front';

In your service worker:


Standard method

Add this script on your page:

<script type="module" src=""></script>

Add this script in your service worker:


How to use it

Initialize EasyPWA

For beginning, initialize EasyPWA with your configuration.

    swPath: '/example/sw.js',
    swRegistrationOptions: {scope: '/'},
    debug: true,
    desktop: true,

Invite the user to install your app

If a helper is available for the current browser, an event is automatically emitted by EasyPWA. You have to listen and interact with it.

Automatic method

With this method, a standard invite is showed:

window.addEventListener('easy-pwa-helper-available', function(e) {

For a custom invite

If you want to create your own invite for a customized style.

Example of your html invite:

<div id="my_custom_invite">
Install my app ?
<button id="invite_accept">yes</button>
<button id="invite_dismiss">no</button>

javascript invite:

window.addEventListener('easy-pwa-helper-available', function(e) {
    var helperAvailableEvent = e.detail;

    document.getElementById('invite_accept').addEventListener('click', function() {
        document.getElementById('my_custom_invite').display = 'none';

document.getElementById('invite_dismiss').addEventListener('click', function() {
        document.getElementById('my_custom_invite').display = 'none';

Enable push notifications (with Firebase)

Add firebase library and initialize en new app.

var firebaseConfig = {
    apiKey: "...",
    projectId: "...",
    messagingSenderId: "...",
    appId: "..."

var myFirebaseApp = firebase.initializeApp(firebaseConfig); // firebase initializing

Add in your config, the firebase app instance:

    firebaseApp: myFirebaseApp,
    newTokenFetchedCallback: (token) => {
        // returns a promise
        return fetch('http://.../send-token-to-server.php?token='+token);

Always wait EasyPWA is fully initialized before.

window.addEventListener('easy-pwa-ready', function(e) {
    EasyPWA.requestPermission().then( function() {
        // Permissions is now granted

        // I don't have a token
        EasyPWA.firebase().getToken().then( function(token) {
           console.log('token', token);

Available configuration

A list of configuration elements if available here

Available functions

Initialize EasyPWA


Get manifest data

var manifest = EasyPWA.getManifest();
console.log('The name is: ';

Check if PWA is in standalone mode

if (EasyPWA.isAppMode()) {
    console.log('Site is open as an app');

Check if notification is supported on this current browser

if (EasyPWA.isNotificationSupported()) {
    console.log('Notification is supported on this browser.');

Request permission to send notification

First, you need to ask permission.

EasyPWA.requestNotificationPermission().then(function() {
    console.log('Accepted. You can get a token with Firebase.');
}).catch(function() {
    console.log('denied. User must authorize notifications in their bowser settings.');

Show a local notification

EasyPWA.showNotification('title', {
    icon: ...,
    vibrate: [50, 300, 50]


Initialize Firebase
var myFirebaseApp = firebase.initializeApp({...});
    firebaseApp: myFirebaseApp,
Get the token (and send it to the server if new)
EasyPWA.firebase().getToken().then( function(token) {
    console.log('new token: '+token);
Delete a token
    console.log('Token deleted');

Available Events

Wait Easy PWA is fully initialized

window.addEventListener('easy-pwa-ready', function(e) {
    console.log('I'm ready!');

Listening if install prompt is available

window.addEventListener('easy-pwa-helper-available', function(e) {
    console.log('A helper is available for this browser!');
    var helperAvailableEvent = e.detail;

    // OR

Detect page is changing

In standalone mode, there are not browser elements visible. So, maybe, you would like to show a loader when page is changing.

window.addEventListener('easy-pwa-page-changing', function(e) {
    console.log('Show a loader, page is changing!');

Other tools

Managing online/offline view by css

When you are offline, the css class "offline" is added on the body tag.

<body class="... offline">
    <div class="text-offline">You are offline but you can still access to your favorite website.</div>
.text-offline {
    display: none;

.offline .text-offline {
    display: block;

Service worker


Substitution Page

Show a substitution page when the user is offline

self.EasyPwaSW.pageSubstitutionPlugin().run('easy-pwa-substitution', '/offline.html');

External library included

  • PWACompat is a library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps.


Use chrome browser for testing you PWA, there are more available tools:

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free