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.

Installation
Ajout 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.html

2. Télécharger le fichier à la racine du site

pwa-sw.js

3. 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/",

Sources
Auteur du plugin Explication détaillée

Explication détaillée de PWA

My Webpage

Conditions de déclenchement PWA

Il 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

---

Retour