Applications Web progressives (PWA)-js tutoriel-php.cn

Applications Web progressives (PWA)

WBOY

Libérer： 2024-08-08 08:26:11

original

1162 Les gens l'ont consulté

Progressive Web Apps (PWAs)

Création d'applications Web progressives (PWA)

Dans cet article, nous explorerons les Progressive Web Apps (PWA), une approche moderne de la création d'applications Web offrant une expérience native de type application. Je couvrirai les bases des PWA, leurs avantages et les étapes pour créer une PWA à partir de zéro.

1. Introduction aux applications Web progressives (PWA)

Qu'est-ce qu'une Progressive Web App (PWA) ?

Une application Web progressive est un type de logiciel d'application fourni via le Web, construit à l'aide de technologies Web courantes, notamment HTML, CSS et JavaScript. Les PWA sont destinées à fonctionner sur n'importe quelle plateforme utilisant un navigateur conforme aux normes.

Principales fonctionnalités des PWA :

Réactif : fonctionne sur n'importe quel appareil et taille d'écran.
Capacité hors ligne : fonctionne hors ligne ou avec de mauvaises conditions de réseau à l'aide de techniciens de service.
Expérience semblable à une application : offre une expérience utilisateur semblable à celle d'une application avec des fonctionnalités telles que l'installation sur l'écran d'accueil.
Sécurisé : servi via HTTPS pour empêcher la surveillance et garantir l'intégrité du contenu.
Réengageable : active les notifications push pour maintenir l'engagement des utilisateurs.

2. Avantages des PWA

Pourquoi créer une PWA ?

Performances améliorées : temps de chargement plus rapides et interactions plus fluides.
Engagement amélioré des utilisateurs : notifications push et accès à l'écran d'accueil.
Coûts de développement réduits : base de code unique pour les expériences Web et mobiles.
Avantages SEO : les PWA sont détectables par les moteurs de recherche.

3. Configuration d'une PWA

Prérequis :

Connaissance de base de HTML, CSS et JavaScript.
Node.js et npm/yarn installés.

Créer une PWA simple :

Configuration du projet :

mkdir my-pwa
cd my-pwa
npm init -y
npm install express

Copier après la connexion

Structure du projet :

my-pwa/
├── public/
│   ├── index.html
│   ├── styles.css
│   └── app.js
├── server.js
├── package.json
└── manifest.json

Copier après la connexion

4. Création du fichier manifeste

manifest.json :

Le fichier manifeste fournit des métadonnées sur la PWA et est requis pour l'installation de l'application sur l'écran d'accueil.

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Copier après la connexion

5. Création des fichiers HTML, CSS et JavaScript

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PWA</title>
  <link rel="stylesheet" href="/styles.css">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to My Progressive Web App!</h1>
  <script src="/app.js"></script>
</body>
</html>

Copier après la connexion

styles.css :

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

Copier après la connexion

app.js :

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

Copier après la connexion

6. Configuration du Service Worker

Un service worker est un script que le navigateur exécute en arrière-plan, distinct de la page Web. Il intercepte les requêtes réseau et peut mettre en cache des ressources pour améliorer les performances et les capacités hors ligne.

service-worker.js :

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

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

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

Copier après la connexion

7. Configuration du serveur

serveur.js :

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Copier après la connexion

Exécution du serveur :

node server.js

Copier après la connexion

8. Tester votre PWA

Ouvrez l'application :
- Accédez à http://localhost:3000 dans votre navigateur.
Inscription des agents de service :
- Ouvrez les outils de développement (F12 ou faites un clic droit et sélectionnez « Inspecter »).
- Allez dans l'onglet "Application".
- Sous « Service Workers », vous devriez voir votre service worker enregistré.
Ajouter à l'écran d'accueil :
- Sur un appareil mobile, ouvrez votre PWA dans le navigateur.
- Vous devriez voir une invite « Ajouter à l'écran d'accueil ».

9. Meilleures pratiques pour les PWA

Bonnes pratiques :

Utilisez HTTPS : les PWA nécessitent des contextes sécurisés.
Optimiser les images : utilisez des images réactives et un chargement paresseux.
Réduire les requêtes réseau : mettre en cache efficacement les ressources.
Assurer la fonctionnalité hors ligne : offrez des expériences hors ligne significatives.