1. Introduction aux PWA

Une PWA ( 渐进式Web应用程序) est une application Web conçue avec une amélioration progressive à l' esprit pour fournir une expérience similaire dans les navigateurs pris en charge 本机应用程序. PWACombine les avantages de Webet 本机应用程序peut facilement 安装和访问, et possède une expérience fiable, rapide et opérationnelle.

Avantages des PWA

Fiable : PWA peut s'exécuter dans un environnement réseau instable et peut conserver les données dans 离线l'état .缓存
Rapide : les PWA peuvent 快速加载et ont des animations et des transitions fluides.
Compact : PWA 不需要下载或安装, accessible via URL, et 可以在桌面或主屏幕上创建快捷方式.
Sécurité : PWA HTTPScommunique via le protocole, ce qui peut garantir la sécurité des données de l'utilisateur 安全性.

Éléments des PWA

amélioration progressive

Les PWA sont conçues sur un principe 渐进式增强qui signifie qu'elles doivent s'adapter à une variété d'appareils et de situations de réseau différents et fournir une expérience utilisateur transparente pour tous les utilisateurs.

Travailleurs des services

Service WorkersC'est l'un des composants de base de PWA, qui permet à l'application de s'exécuter en arrière-plan afin que les 缓存ressources nécessaires soient fournies 离线支持.

Manifeste d'application Web

Web App Manifestest celui JSON文件qui décrit l'apparence et le comportement de l'application. Il permet aux applications d'être affichées d'une manière similaire aux applications natives et offre un accès rapide sur l'écran d'accueil.

HTTPS

En raison de PWAla nécessité d'utiliser Service Workerset d'autres technologies, HTTPSdes protocoles doivent être utilisés pour une communication sécurisée. Cela permet de garantir la confidentialité et l'intégrité des données.

Scénarios d'utilisation de PWA

Les PWA peuvent être utilisées dans une variété d'applications différentes, y compris le commerce électronique, les actualités, les médias sociaux, les jeux, etc. Quelle que soit l'application, les PWA peuvent offrir une meilleure expérience utilisateur, augmenter la rétention des utilisateurs et améliorer la découverte des applications.

2. Cas pratiques PWA

Vous trouverez ci-dessous un exemple simple de PWA, nous montrerons comment convertir une simple application Web en PWA et ajouter un support hors ligne.

1. Créer un manifeste d'application Web

Web App Manifestest un JSONfichier qui décrit l'apparence et le comportement de l'application. Dans ce cas, nous allons en créer un de base Web App Manifestafin que l'application puisse être ajoutée à l'écran d'accueil et s'exécuter en mode plein écran.

{
    
    
  "name": "My PWA App",
  "short_name": "PWA App",
  "icons": [{
    
    
    "src": "/img/icons/icon-72x72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-96x96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-384x384.png",
    "sizes": "384x384",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

2. Ajouter un agent de service

Service Workerest PWAl'un des composants de base qui permet aux applications de s'exécuter en arrière-plan afin que 缓存les ressources nécessaires soient disponibles 离线支持. Dans ce cas, nous en ajouterons un simple Service Workerqui met en cache toutes les pages et les sert hors ligne.

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js'
];

self.addEventListener('install', (event) => {
    
    
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
    
    
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
    
    
        if (response) {
    
    
          return response;
        }

        return fetch(event.request);
      })
  );
});

3. Enregistrez le travailleur de service

L'enregistrement dans Webl'application Service Workerest aussi simple que JavaScriptd'ajouter ce qui suit à votre code :

if ('serviceWorker' in navigator) {
    
    
  window.addEventListener('load', () => {
    
    
    navigator.serviceWorker
      .register('/sw.js')
      .then(() => console.log('Service Worker registered'))
      .catch((error) => console.log('Service Worker registration failed:', error));
  });
}

4. Testez les PWA

Vous avez maintenant créé une PWA de base et ajouté une prise en charge hors ligne. Pour tester votre PWA, ajoutez l'application à votre écran d'accueil et désactivez les connexions réseau. Ensuite, ouvrez l'application et assurez-vous qu'elle fonctionne toujours.

Résumer

PWA est une application Web émergente qui combine les avantages des applications Web et natives pour offrir aux utilisateurs une expérience fiable, rapide et exploitable. Les PWA présentent de nombreux avantages, notamment la facilité d'utilisation, la fiabilité, une plus grande vitesse et une meilleure possibilité de découverte. Si vous envisagez de développer une nouvelle application Web, PWA pourrait être un bon choix.

Une compréhension simple de PWA

Annuaire d'articles