Tools for managing your Progressive Web App.
- Manage PWA features easily
- Each browser shows a specific helper to help people to install your app.
- Manage Push Notifications easily.
An example is available here: https://easy-pwa.github.io/easy-pwa-js/
npm install easy-pwa-js --save
Use it in your modules:
In your service worker:
Add this script on your page:
Add this script in your service worker:
How to use it
For beginning, initialize EasyPWA with your configuration.
Invite the user to install your app
If a helper is available for the current browser, EasyPWA emits an event automatically. You have to listen and interact with it.
With this method, EasyPWA shows a standard invite:
For a custom invite
If you want to create your own invite for a customized style.
Example of your html invite:
Install my app ?yesno
Enable push notifications (with Firebase)
Add firebase library and initialize a new app.
var firebaseConfig =apiKey: "..."projectId: "..."messagingSenderId: "..."appId: "...";var myFirebaseApp = firebase; // firebase initializing
Add in your config, the firebase app instance:
Always wait EasyPWA is fully initialized before.
A list of configuration elements if available here
Get manifest data
var manifest = EasyPWA;console;
Check if PWA is in standalone mode
Check if the current browser supports notifications
Request permission to send notification
First, you need to ask permission.
Show a local notification
var myFirebaseApp = firebase;EasyPWA;
Get the token (and send it to the server if new)
Delete a token
Wait Easy PWA is fully initialized
Listening if install prompt is available
Detect that 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.
Managing online/offline view by css
When you are offline, the css class "offline" is added on the body tag.
You are offline but you can still access to your favorite website.
Show a substitution page when the user is offline
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:
- Inspect element => Application
- Inspect your service worker: chrome://inspect/#service-workers