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.
$ git clone --branch v1.0-beta [email protected]:jfadev / jfa-poids-toolkit.git $ JFA poids MVC boîte à outils-my-poids $ cd my-PWA / $ contact index.html $ toucher offline.html
Simple index.html squelette (squelette complet dans la documentation).
Coller ce squelette dans votre index.html fichier.
<!DOCTYPE html>
<html lang ="fr-fr">
<head>
<meta charset ="utf-8">
<meta http-equiv ="X-UA-Compatible" content ="IE = bord">
<meta content ="largeur = largeur dispositif, initial échelle = 1, maximale échelle = 1, Évolutif utilisateur = pas" name="viewport">
<!-- Couleur de thème ->
<meta name ="thème couleur" content ="#000" />
<!-- POIDS Manifest ->
<link rel ="manifeste" href ="/poids / manifest.json"></lien>
<!-- favicon ->
<link rel ="icône" type ="image / jpeg" href ="/PWA / icons / chrome / chrome-favicon-16-16.png">
<!-- icônes ->
<!-- Écran de démarrage -->
<Titre>JFA POIDS Toolkit Exemple</Titre>
</head>
<body>
<!-- Charger JFA PWA Toolkit Configs ->
<script type="text/javascript" src="/PWA / config.js"></script>
<!-- Charger JFA POIDS Toolkit Gratuit ->
<script type="text/javascript" src="/poids / pwa.js"></script>
<!-- Registre principal ouvrier de service ->
<script type="text/javascript">
PWA.ServiceWorker.register();
</script>
</body>
</html>
Coller par exemple ce simple html dans votre offline.html fichier.
<!DOCTYPE html>
<html lang ="fr-fr">
<head>
<Titre>HORS LIGNE - JFA POIDS Toolkit Exemple</Titre>
</head>
<body>
<p>Pas de connexion Internet!</p>
</body>
</html>
Exemple simple de manifest.json. Utilisez app.webmanifest au lieu de manifest.json si vous préférez.
{
"vous": "ltr",
"seulement": "fr-fr",
"name": "Votre nom App",
"portée": "/",
"afficher": "autonome",
"START_URL": "/",
"nom court": "Votre App Nom court",
"la description": "Votre Description de l'application.",
"orientation": "tout",
"theme_color": "#000",
"Couleur de fond": "#000",
"related_applications": [],
"prefer_related_applications": faux,
"icônes": [{
"src": "/PWA / icons / Windows 10 / Square71x71Logo.scale-400.png",
"tailles": "284x284"
},
]
}
Exemple d'un simple config.js
const = PWA_CONFIG {
app: {
name: Votre-app-name ',
version: 'V1'
},
sw: {
chemin du fichier: '' /sw.js,
offline_route: '/Offline.html'
},
cachette: {
images: {
actif: vrai,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
statique: {
actif: vrai,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
polices: {
actif: vrai,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
routes: {
networkfirst: {
actif: vrai,
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
$('# BTN1').click(() => {
si (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((abonnement) => {
si (abonnement) {
$('# BTN1').html(« Vous êtes maintenant inscrit à recevoir les notifications Push!');
} autre {
PWA.Push.subscribe((r) => {
$('# BTN1').html('Toutes nos félicitations! Vous êtes abonné à recevoir les notifications Push!');
});
}
});
} autre {
$('# BTN1').html("Vous avez désactivé les notifications Push. Autoriser les notifications Push dans vos paramètres de votre navigateur.");
}
});
CheckBox pour vous inscrire / désinscrire aux Push Notifications
$('# BTN1').click(() => {
si (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((abonnement) => {
si (abonnement) {
PWA.Push.unsubscribe((r) => {
$('# BTN1').html(« Vous avez été désinscrit pour recevoir les notifications Push!');
});
} autre {
PWA.Push.subscribe((r) => {
$('# BTN1').html(« Vous avez été désinscrit pour recevoir les notifications Push!');
});
}
});
} autre {
$('# BTN1').html("Vous avez désactivé les notifications Push. Autoriser les notifications Push dans vos paramètres de votre navigateur.");
}
});
Affiche une demande l'autorisation contextuelle pour permettre les Notifications
$('# BTN1').click(() => {
PWA.Notification.requestPermission((statut) => {
$('# BTN1').html(statut);
});
});
Obtenez le statut d'autorisation des Notifications
$('# BTN1').click(() => {
var = autorisation PWA.Notification.getPermission();
$('# BTN1').html(autorisation);
});
Afficher la notification envoyée par le navigateur
$('# BTN1').click(() => {
Options const = {
body: « Contenu supplémentaire pour afficher la notification dans les »,
icône: '../Images/touch/chrome-touch-icon-192x192.png'
};
PWA.Notification.show(« Titre de notification », les options, envoyé => {
si (envoyé) {
$('# BTN1').html(« La notification a été envoyée »);
}
});
});
Vérifiez si le navigateur supporte les Service Workers
$('# BTN1').click(() => {
si (PWA.Navigator.isSupportedServiceWorker()) {
$('# BTN1').html(« Ce soutien du navigateur Les travailleurs des services!');
} autre {
$('# BTN1').html(« Ce navigateur ne supporte pas les travailleurs des services. »);
}
});
Vérifiez si le navigateur supporte les Notifications
$('# BTN1').click(() => {
si (PWA.Navigator.isSupportedNotification()) {
$('# BTN1').html(« Ce visionneur Notifications!');
} autre {
$('# BTN1').html(« Ce navigateur ne supporte pas les notifications. »);
}
});
Vérifiez si le navigateur est déconnecté
$('# BTN1').click(() => {
si (PWA.Navigator.isOffline()) {
$('# BTN1').html('Pas de connexion Internet!');
} autre {
$('# BTN1').html(« Vous avez une connexion Internet!');
}
});
Vider le cache de l'application du navigateur
$('# BTN1').click(() => {
PWA .NA vi pensé à r.cle ARCACHE();
});
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
