easy-pwa-js
Advanced tools
Tools for managing your Progressive Web App.
An example is available here: https://easy-pwa.github.io/easy-pwa-js/
npm install easy-pwa-js --save
Use it in your modules:
import EasyPwaManager from 'easy-pwa-js/front';
In your service worker:
importScripts('easy-pwa-js/sw.js');
Add this script on your page:
<script type="module" src="https://cdn.jsdelivr.net/npm/easy-pwa-js@1.0/dist/front.js"></script>
Add this script in your service worker:
importScripts('https://cdn.jsdelivr.net/npm/easy-pwa-js@1.0/dist/sw.js');
For beginning, initialize EasyPWA with your configuration.
EasyPWA.init({
swPath: '/example/sw.js',
swRegistrationOptions: {scope: '/'},
debug: true,
desktop: true,
});
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:
window.addEventListener('easy-pwa-helper-available', function(event) {
event.showInvite();
});
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>
</div>
javascript invite:
window.addEventListener('easy-pwa-helper-available', function(event) {
document.getElementById('invite_accept').addEventListener('click', function() {
document.getElementById('my_custom_invite').display = 'none';
event.acceptInvite();
});
document.getElementById('invite_dismiss').addEventListener('click', function() {
document.getElementById('my_custom_invite').display = 'none';
event.dismissInvite();
});
});
Always wait EasyPWA is fully initialized before.
window.addEventListener('easy-pwa-ready', function(e) {
EasyPWA.requestPermission().then( function() {
// Permissions is now granted
new Notification('A notification');
});
});
A list of configuration elements if available here
EasyPWA.init({...});
var manifest = EasyPWA.getManifest();
console.log('The name is: '+manifest.name);
if (EasyPWA.isAppMode()) {
console.log('Site is open as an app');
}
if (EasyPWA.isNotificationSupported()) {
console.log('Notification is supported on this browser.');
}
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.');
});
window.addEventListener('easy-pwa-ready', function(e) {
console.log('I\'m ready!');
});
window.addEventListener('easy-pwa-helper-available', function(helperAvailableEvent) {
console.log('A helper is available for this browser!');
helperAvailableEvent.showInvite();
// OR
helperAvailableEvent.acceptInvite();
helperAvailableEvent.dismissInvite();
});
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!');
});
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>
</body>
.text-offline {
display: none;
}
.offline .text-offline {
display: block;
}
Use chrome browser for testing you PWA, there are more available tools:
FAQs
Javascript library for managing PWA (progressive web app).
The npm package easy-pwa-js receives a total of 0 weekly downloads. As such, easy-pwa-js popularity was classified as not popular.
We found that easy-pwa-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.