Application PWA pour votre site
PWA ou Progressive Web Application est une technologie qui permet aux clients d'installer votre site sur un smartphone en tant qu'application. Il se traduit en Français par "application web progressive".
Désormais, il n'est plus nécessaire de développer un site Web séparé, une application iOS et une application Android. Il suffit d'avoir et de maintenir uniquement un site Web.
Nous utilisons des applications basées sur PWA plus souvent qu'il n'y paraît.
Les marques Twitter, Tinder, Uber, Telegram, Starbucks, Forbes, AliExpress, Aviasales utilisent des applications basées sur PWA comme base ou en plus d'une application mobile.
Il suffit de 3 fichiers texte sur votre site :
1.pwa-sw.js - le serviceWorker lui-même
2.pwa-manifest.json - un manifeste décrivant le nom de l'application et ses icônes
3.pwa-offline.html - stub pour le mode hors ligne
Toutes les instructions pour éditer un modèle sont aussi présentées dans les commentaires du plugin, que vous pouvez voir après avoir installé le plugin dans l'administrateur DLE.
InstallationAjout de fonctionnalités Progressive Web App au modèle de site web (PWA)
1. Chargez les fichiers dans le dossier /templates/:
pwa-manifest.json
pwa-offline.html2. Télécharger le fichier à la racine du site
pwa-sw.js3. Dans le fichier modèle main.tpl
avant la balise de fermeture
</head>
insérer:
{* Activation du mode PWA *}
<link rel="manifest" href="/templates/pwa-manifest.json">
Avant la balise de fermeture
</body>
insérer:
{* Activation du mode PWA *}
<script type="text/javascript">
// Vérifiez la compatibilité du navigateur dans lequel nous lançons l'application.
if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] Un travailleur de service actif a été trouvé, il n'est pas nécessaire de s'enregistrer");
} else {
// Inscription des reseau sociaux
navigator.serviceWorker
.register("/pwa-sw.js", {
scope: "/"
})
.then(function (reg) {
console.log("[PWA Builder] Le travailleur de service a été enregistré pour le champ d'application: " + reg.scope);
});
}
}
</script>
4. Modifier le contenu du fichier /templates/pwa-manifest.json
Fournir des liens vers les icônes de votre site web dans les sections
{
"src": "https://via.placeholder.com/192/",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://via.placeholder.com/512/",
"type": "image/png",
"sizes": "512x512"
}
Spécifiez la couleur de marque pour votre application dans les sections
"theme_color" : "#283645",
"background_color" : "#283645",
Entrez le nom de votre application au lieu de
"name" : "TCSE-cms.com",
Entrez une description détaillée, au lieu de
"description" : "Studio de développement de sites web",
Entrez l'adresse de votre domaine, au lieu de
"start_url" : "https://tcse-cms.com/",
SourcesAuteur du plugin Explication détaillée
Explication détaillée de PWAMy WebpageConditions de déclenchement PWAIl n'y en a en fait que trois.
Condition 1 :Le site doit avoir une version SSL, c'est-à-dire ouvert via le protocole HTTPS .
Condition 2 :Le fichier manifeste doit contenir des liens vers des icônes de tailles 192x192 et 512x512 (nous y avons déjà mis des stubs, merci de les remplacer par vos icônes).
Condition 3 :Le fichier service worker doit être à la racine du site (on parle de /pwa-sw.js).
Utilisez le phare intégré de Google Chrome pour tester votre PWA
Informations
Les visiteurs du groupe
Invités ne peuvent pas télécharger de fichiers sur le site.
Connectez-vous au site avec votre
identifiant et mot de passe ou si vous êtes un nouvel utilisateur suivez le processus
d'inscription sur le site.
N'importe qui peut critiquer.
Créer quelque chose qui sera critiqué n'est pas donné à tout le monde.