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: https://easy-pwa.github.io/easy-pwa-js/
npm install easy-pwa-js
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, an event is automatically emitted by EasyPWA. You have to listen and interact with it.
With this method, a standard invite is showed:
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 en 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 notification is supported on this current browser
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 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