Maison > interface Web > js tutoriel > le corps du texte

Applications Web progressives (PWA)

WBOY
Libérer: 2024-08-08 08:26:11
original
1180 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 :

  1. Configuration du projet :

    mkdir my-pwa
    cd my-pwa
    npm init -y
    npm install express
    
    Copier après la connexion
  2. 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

  1. Ouvrez l'application :

    • Accédez à http://localhost:3000 dans votre navigateur.
  2. 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é.
  3. 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.

10. Conclusion

Résumez les points clés abordés :

  • Présentation des PWA et de leurs avantages.
  • Configuration d'une PWA simple avec manifeste, service worker et mise en cache.
  • Bonnes pratiques pour créer des PWA robustes.

11. Ressources supplémentaires

  • Documentation PWA
  • Tutoriels et guides sur des sujets PWA avancés.
  • Forums communautaires et assistance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal