With this toolkit you can easily integrate the most remarkable features of the PWA. This solution is easily integrated into older projects with jQuery or new Javascript frameworks. This project is in development and do not hesitate to try it and send your issus and pull resquest in Github.
🚀 Discover the repository on GitHub.
📱 Test a Demo (demo repository).
Features
- Web App Manifest
- Icons Structure Files
- Precaching
- Caching Strategies
- Push Notifications
Documentation
Starting with an Example
Important: For this example to work perfectly, it must be used in localhost or in an https domain and the index.html be found in the root of the project.
Clone jfa-pwa-toolkit from the Github repository and create a index.html file and a offline.html file.
$ git clone --branch v1.0-beta [email protected]:jfadev/jfa-pwa-toolkit.git $ mv jfa-pwa-toolkit my-pwa $ cd my-pwa/ $ touch index.html $ touch offline.html
Simple index.html skeleton (complete skeleton in documentation).
Paste this skeleton in your index.html file.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Theme color -->
<meta name="theme-color" content="#000" />
<!-- PWA Manifest -->
<link rel="manifest" href="/pwa/manifest.json"></link>
<!-- Favicon -->
<link rel="icon" type="image/png" href="/pwa/icons/chrome/chrome-favicon-16-16.png">
<!-- Icons -->
<!-- Splash Screen -->
<title>JFA PWA Toolkit Example</title>
</head>
<body>
<!-- Load JFA PWA Toolkit Configs -->
<script type="text/javascript" src="/pwa/config.js"></script>
<!-- Load JFA PWA Toolkit Lib -->
<script type="text/javascript" src="/pwa/pwa.js"></script>
<!-- Register principal Service Worker -->
<script type="text/javascript">
PWA.ServiceWorker.register();
</script>
</body>
</html>
Paste for example this simple html in your offline.html file.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>OFFLINE - JFA PWA Toolkit Example</title>
</head>
<body>
<p>No Internet connection!</p>
</body>
</html>
Simple example of manifest.json. Use app.webmanifest instead of manifest.json if you prefer.
{
"dir": "ltr",
"lang": "en-us",
"name": "Your App Name",
"scope": "/",
"display": "standalone",
"start_url": "/",
"short_name": "Your App Short Name",
"description": "Your App Description.",
"orientation": "any",
"theme_color": "#000",
"background_color": "#000",
"related_applications": [],
"prefer_related_applications": false,
"icons": [{
"src": "/pwa/icons/windows10/Square71x71Logo.scale-400.png",
"sizes": "284x284"
},
]
}
Example of a simple config.js
const PWA_CONFIG = {
app: {
name: 'your-app-name',
version: 'v1'
},
sw: {
filepath: '/sw.js',
offline_route: '/offline.html'
},
cache: {
images: {
active: true,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
statics: {
active: true,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
fonts: {
active: true,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
routes: {
networkfirst: {
active: true,
regex: /.*/
}
}
}
}
JS Code examples
Play with more features with the global access variable PWA in your Javascript code as in the following examples
This examples use jQuery library. In the documentation to find examples in pure ES6
Button to subscribe to Push Notifications
$('#btn1').click(() => {
if (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((subscription) => {
if (subscription) {
$('#msg1').html('You are now subscribed to receive Push Notifications!');
} else {
PWA.Push.subscribe((r) => {
$('#msg1').html('Congratulations! You are subscribed to receive Push Notifications!');
});
}
});
} else {
$('#msg1').html("You've turned off Push Notifications. Allow Push Notifications in your browser settings.");
}
});
Checkbox toggle to subscribe/unsubscribe to Push Notifications
$('#switch2').click(() => {
if (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((subscription) => {
if (subscription) {
PWA.Push.unsubscribe((r) => {
$('#msg2').html('You have been unsubscribed to receive Push Notifications!');
});
} else {
PWA.Push.subscribe((r) => {
$('#msg2').html('You have been unsubscribed to receive Push Notifications!');
});
}
});
} else {
$('#msg2').html("You've turned off Push Notifications. Allow Push Notifications in your browser settings.");
}
});
Displays a pop-up requesting permission to allow Notifications
$('#btn3').click(() => {
PWA.Notification.requestPermission((status) => {
$('#msg3').html(status);
});
});
Get the Notifications permission status
$('#btn4').click(() => {
var permission = PWA.Notification.getPermission();
$('#msg4').html(permission);
});
Show Notification sent by the browser
$('#btn5').click(() => {
const options = {
body: 'Extra content to display within the notification',
icon: '../images/touch/chrome-touch-icon-192x192.png'
};
PWA.Notification.show('Notification Title', options, sent => {
if (sent) {
$('#msg5').html('The Notification has been sent');
}
});
});
Check if the browser support Service Workers
$('#btn6').click(() => {
if (PWA.Navigator.isSupportedServiceWorker()) {
$('#msg6').html('This browser support Service Workers!');
} else {
$('#msg6').html('This browser does not support Service Workers.');
}
});
Check if the browser support Notifications
$('#btn7').click(() => {
if (PWA.Navigator.isSupportedNotification()) {
$('#msg7').html('This browser support Notifications!');
} else {
$('#msg7').html('This browser does not support Notifications.');
}
});
Check if the browser is offline
$('#btn8').click(() => {
if (PWA.Navigator.isOffline()) {
$('#msg8').html('No Internet connection!');
} else {
$('#msg8').html('You have an Internet connection!');
}
});
Clear the browser app cache
$('#btn9').click(() => {
PWA.Navigator.clearCache();
});
Playground
Play with the PWA library and learn to use it easily.