Que devez-vous savoir avant une application Web (PWA)?

Créez un
fichier Manifest.json PWA Manifest.json comme suit:

Format JSON

{ "Name": "Progressive Selfies", "short_name": "PWA Selfies", "icons": [ { "src": "/src/images/icons/app-icon-192x192.png", "type": "Image / png", "tailles": "192x192" }, { "src": "/src/images/icons/app-icon-512x512.png", "type": "image / png", "tailles" : "512x512" } ], "start_url": "/index.html", "scope": ".", "Display": "standalone", "background_color": "#fff", "theme_color": "# 3f51b5 ” } Indiquez au navigateur le manifeste de votre application Créez un fichier Manifest.json dans un répertoire au même niveau que le fichier index.html. Une fois le fichier manifeste créé, ajoutez le lien de référence du fichier manifeste à index.html.

Présentation des attributs du manifeste Le manifeste a de nombreux attributs de configuration, puis nous donnerons une brève introduction aux attributs

name, short_name: spécifiez le nom de l'application Web. Short_name est l'abréviation de l'application. Lorsqu'il n'y a pas assez d'espace pour afficher l'attribut name de l'application, le système utilisera short_name.
l display: l'attribut display spécifie le mode d'affichage de l'application Web. Il a quatre valeurs de configuration: plein écran, autonome, minimal-ui et navigateur, mais les attributs couramment utilisés sont plein écran et autonome.
plein écran: Affichage plein écran
autonome: L'application ouverte dans ce mode n'apparaît pas dans la barre d'adresse du navigateur, elle ressemble donc plus à une application native
minimal-ui, navigateur: Ce n'est pas très différent d'utiliser un navigateur pour visiter.
l orientation: contrôlez la direction d'affichage de l'application Web et empêchez le téléphone de tourner l'écran.
l icons, background_color: icon est utilisé pour spécifier l'icône de l'application, background_color est la couleur d'arrière-plan avant le chargement de l'application.En définissant ces deux propriétés, il peut être combiné dans l'écran de démarrage de l'application.
l theme_color: définit la couleur de thème par défaut de l'application.
l description: définissez une description de l'application.
Voici quelques descriptions des propriétés du fichier manifeste pwa. Nous pouvons ajouter le fichier manifeste en plaçant le fichier manifeste terminé dans le même répertoire de niveau que le fichier index.html.

Ouvrez Chrome Developer Tools-Application-Manifest, vérifiez si le fichier manifeste ajouté a été chargé, s'il n'y a pas d'informations comme indiqué dans la figure ci-dessous, nous pouvons le recharger en redémarrant le serveur npm start.

Qu'est-ce qu'un service worker?
Service Worker (SW) est un élément de JavaScript qui agit comme un proxy entre le navigateur et le serveur Web. Service Worker peut implémenter des fonctions communes d'applications natives telles que la mise en cache hors ligne, l'envoi de messages et la mise à jour silencieuse dans des applications Web basées sur un navigateur pour fournir aux applications Web une expérience meilleure et plus riche.

En outre, cette API permet également l'utilisation du cache pour prendre en charge l'expérience hors ligne, afin que les développeurs puissent contrôler pleinement l'expérience utilisateur

Cycle de vie du Service Worker
Pour Service Worker, les étapes de configuration de base sont les suivantes:

Le logiciel doit d'abord être enregistré.Si le logiciel est déjà enregistré, le navigateur démarrera automatiquement l'installation en fonction de l'événement d'installation.
Après avoir installé SW, il recevra les événements d'activation. Cet événement d'activation peut être utilisé pour nettoyer les ressources utilisées dans les versions antérieures de SW.

L'opération réelle doit d'abord créer un fichier vide nommé sw.js au même niveau que index.html. Ajoutez ensuite une balise de base au fichier index.html, comme suit:

Enfin, ajoutez le code suivant pour enregistrer SW dans src / js / app.js. Ce code sera activé lors du processus de "chargement" de la page.

Vous pouvez ouvrir Chrome DevTools-Application-Service Worker pour vérifier si SW est activé.

window.addEventListener ('load', () => { const base = document.querySelector ('base'); let baseUrl = base && base.href || ''; if (! baseUrl.endsWith ('/')) { baseUrl = ; }

${baseUrl}/

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register(`${baseUrl}sw.js`)
        .then( registration => {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    })
    .catch(err => {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

}); La
fonction principale du code ci-dessus est de vérifier si l'API SW est disponible dans la propriété navigator de l'objet window. L'objet window représente la fenêtre du navigateur. Si SW est disponible dans le navigateur, enregistrez SW immédiatement au chargement de la page.

Bien que l'enregistrement d'un SW soit très simple, dans certains cas, nous rencontrons toujours le problème de ne pas pouvoir enregistrer un Service Worker. Examinons brièvement les raisons de l'impossibilité d'enregistrer un SW et comment le résoudre:

Votre application ne peut pas s'exécuter sous HTTPS. Pendant le développement, vous pouvez utiliser SW via localhost. Mais s'il est déployé sur un site Web, vous devez activer HTTPS.
Le chemin de SW est incorrect.
La mise à jour lors du rechargement n'est pas vérifiée.

Événements de Service Worker
Outre les événements d'installation et d'activation, d'autres événements incluent les événements de message, de récupération, de synchronisation et de transmission.

Ajoutez le code suivant à votre logiciel pour surveiller les événements du cycle de vie (installation et activation):

self.addEventListener ('install', event => { console.log ('[Service Worker] Installing Service Worker…', event); event.waitUntil (self.skipWaiting ()); }); self.addEventListener ('activate ', event => { console.log (' [Service Worker] Activating Service Worker… ', event); return self.clients.claim (); }); installer le rappel appelle la fonction skipWaiting () pour déclencher l'événement d'activation et dire Le Service Worker commence à travailler immédiatement sans attendre que l'utilisateur parcoure ou recharge la page.

La fonction skipWaiting () force le Service Worker en attente à devenir le Service Worker actif. La fonction self.skipWaiting () peut également être utilisée avec la fonction self.clients.claim () pour garantir que les mises à jour du Service Worker sous-jacent prennent effet immédiatement.

Dans ce cas, self-property représente l'objet window (c'est-à-dire la fenêtre de votre navigateur).

Bouton
Ajouter à l'écran d'accueil " Bouton Ajouter à l'écran d'accueil" permet aux utilisateurs d'installer PWA sur leurs appareils. Afin d'installer réellement PWA avec ce bouton, vous devez définir un gestionnaire d'événement d'extraction dans SW. Résolvons ce problème dans sw.js.

self.addEventListener ('fetch', event => { console.log ('[Service Worker] Fetching something…', event); // Cela corrige un bogue étrange dans Chrome lorsque vous ouvrez les outils de développement if (event.request. === cache 'IF-only-cached' && event.request.mode == 'Same-Origin') {! return; } event.respondWith (FETCH (event.request)); }); Service Worker cache Service Worker La puissance de est sa capacité à intercepter les requêtes HTTP. Dans cette étape, nous utilisons cette option pour intercepter les requêtes et réponses HTTP et fournir aux utilisateurs des réponses ultra-rapides directement à partir du cache.

Mise en cache pendant l'installation de Service Worker
Lorsqu'un utilisateur visite votre site Web pour la première fois, SW commence à s'installer. Dans cette phase d'installation, vous pouvez télécharger et mettre en cache toutes les pages, scripts et fichiers de style utilisés par PWA. Voici le code de fichier sw.js pour terminer ce travail:

L'événement d'installation appellera self.skipWaiting () pour activer directement SW. Si tous les fichiers ont été mis en cache avec succès, SW sera installé. Mais si l'un des fichiers ne peut pas être téléchargé, l'étape d'installation échouera. Dans les outils de développement Chrome, vous pouvez vérifier si le cache (dans Cache Storage) est rempli de fichiers statiques dans le tableau URLS_TO_PRECACHE.

Cependant, si vous regardez l'onglet Réseau, le fichier est toujours obtenu via le réseau. La raison est que bien que le cache soit prêt, nous n'avons pas lu la ressource de référence à partir du cache. Donc, pour terminer cette partie du travail, nous devons d'abord écouter l'événement fetch de l'application, puis intercepter et obtenir des ressources du cache, regardons le code suivant:

self.addEventListener ('fetch', event => { console.log ('[Service Worker] Récupération de quelque chose…', événement); event.respondWith ( caches.match (event.request) .then (response => { if ( response) { console.log (response); return response; } return fetch (event.request); }) ); }); Nous utilisons la fonction caches.match () pour vérifier si l'URL entrante est cohérente avec le cache actuel Correspondance des ressources. Si cela correspond, nous renvoyons la ressource mise en cache, mais si la ressource n'existe pas dans le cache, nous continuons à obtenir la ressource demandée normalement.

Une fois le Service Worker installé et activé, actualisez la page et vérifiez à nouveau l'onglet réseau. Désormais, Service Worker interceptera les requêtes HTTP et chargera instantanément les ressources correspondantes à partir du cache au lieu de faire des requêtes réseau au serveur.

Maintenant, si nous définissons le mode hors ligne dans l'onglet réseau, notre application est toujours accessible normalement.

Background Transfer
Background Fetch API est des fonctions de back-office SW, qui permet aux utilisateurs de télécharger des fichiers volumineux, de la vidéo et de la musique et d'autres ressources en arrière-plan. Pendant le processus d'acquisition / transmission, même si vos utilisateurs ferment l'onglet, ou même ferme tout le navigateur, la tâche de transmission ne sera pas effacée. Lorsque l'utilisateur ouvre à nouveau le navigateur, le processus de transfert reprend. Cette API peut également afficher la progression du transfert à l'utilisateur, et l'utilisateur peut annuler ou suspendre le processus.

Par défaut, la fonction de transfert en arrière-plan n'est pas disponible, vous devez autoriser l'option "Experimental Web Platform features" de chrome via l'url (chrome: // flags / # enable-experimental-web-platform-features)

Voici un exemple de mise en œuvre de ce type de transfert en arrière-plan.

Ajoutez un bouton avec l'ID "bgFetchButton" à votre fichier index.html

1
Stocker les actifs localement

L'utilisateur clique sur le bouton dont l'ID est bgFetchButton
SW est enregistré. Le
transfert en arrière-plan doit être effectué dans une fonction asynchrone, car le processus de transfert ne peut pas bloquer l'interface utilisateur.

Mettre dans le cache une fois le transfert terminé

self.addEventListener ('backgroundfetchsuccess', event => { console.log ('[Service Worker]: Background Fetch Success', event.registration); event.waitUntil ( (async function () { try { // Itération des enregistrements vers remplir le cache const cache = wait caches.open (event.registration.id); const records = wait event.registration.matchAll (); const promises = records.map (async record => { const response = wait record.responseReady; attendre cache.put (enregistrement.request, réponse); }); attendre Promise.all (promesses); } catch (err) { console.log ('[Service Worker]: Erreur de mise en cache'); } }) () ) ; });

1 avenue Longhua http://www.kinghill.cn/LongHuaDaDao1Hao/index.html

Que devez-vous savoir avant une application Web (PWA)?

Je suppose que tu aimes