Avec cette boîte à outils, vous pouvez facilement intégrer les caractéristiques les plus remarquables d'une PWA. Cette solution est facile à intégrer dans des projets plus anciens avec jQuery ou nouveaux frameworks Javascript. Ce projet est en développement. N'hésiter pas à l'essayer et a envoyer vos Issus et Pull Resquests dans Github.
🚀 Découvrez le dépôt sur GitHub.
📱 Testez la Démo (dépôt de la demo).
Caractéristiques
- Web App Manifest
- Structure de Fichiers d'Icônes
- Precaching
- Stratégies de mise en Cache
- Notifications Push
Documentation
A partir d'un Exemple
Important: Pour que cet exemple fonctionne parfaitement, il doit être utilisé dans localhost ou dans un domaine https et index.html se trouver à la racine du projet.
Cloner jfa-pwa-toolkit du dêpot GitHub et créer un index.html fichier et un offline.html fichier.
|
1 2 3 4 5 |
$ git clone https://github.com/jfadev/jfa-pwa-toolkit.git $ mv jfa-pwa-toolkit my-pwa $ cd my-pwa/ $ touch index.html $ touch offline.html |
Simple index.html squelette (squelette complet dans la documentation).
Coller ce squelette dans votre index.html fichier.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!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> |
Coller par exemple ce simple html dans votre offline.html fichier.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en-us"> <head> <title>OFFLINE - JFA PWA Toolkit Example</title> </head> <body> <p>No Internet connection!</p> </body> </html> |
Exemple simple de manifest.json. Utilisez app.webmanifest au lieu de manifest.json si vous préférez.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "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" }, ] } |
Exemple d'un simple config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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: /.*/ } } } } |
Exemples de code JS
Jouez avec plus de fonctionnalités avec la variable d'accès global PWA dans votre code Javascript comme dans les exemples suivants
Cet exemple utilise la bibliothèque jQuery. Dans la documentation vous pouvez trouver des exemples en pur ES6
Bouton pour vous abonner aux Push Notifications
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#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 pour vous inscrire / désinscrire aux Push Notifications
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$('#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."); } }); |
Affiche une demande l'autorisation contextuelle pour permettre les Notifications
|
1 2 3 4 5 |
$('#btn3').click(() => { PWA.Notification.requestPermission((status) => { $('#msg3').html(status); }); }); |
Obtenez le statut d'autorisation des Notifications
|
1 2 3 4 |
$('#btn4').click(() => { var permission = PWA.Notification.getPermission(); $('#msg4').html(permission); }); |
Afficher la notification envoyée par le navigateur
|
1 2 3 4 5 6 7 8 9 10 11 |
$('#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'); } }); }); |
Vérifiez si le navigateur supporte les Service Workers
|
1 2 3 4 5 6 7 |
$('#btn6').click(() => { if (PWA.Navigator.isSupportedServiceWorker()) { $('#msg6').html('This browser support Service Workers!'); } else { $('#msg6').html('This browser does not support Service Workers.'); } }); |
Vérifiez si le navigateur supporte les Notifications
|
1 2 3 4 5 6 7 |
$('#btn7').click(() => { if (PWA.Navigator.isSupportedNotification()) { $('#msg7').html('This browser support Notifications!'); } else { $('#msg7').html('This browser does not support Notifications.'); } }); |
Vérifiez si le navigateur est déconnecté
|
1 2 3 4 5 6 7 |
$('#btn8').click(() => { if (PWA.Navigator.isOffline()) { $('#msg8').html('No Internet connection!'); } else { $('#msg8').html('You have an Internet connection!'); } }); |
Vider le cache de l'application du navigateur
|
1 2 3 |
$('#btn9').click(() => { PWA.Navigator.clearCache(); }); |
Cour de Récréation
Jouez avec la bibliothèque PWA et apprenez à l'utiliser facilement.
Dépôt
Transformez votre site existant en PWA avec cette bibliothèque JS from r/javascript
