Applications Web progressives : l'avenir du développement Web-js tutoriel-php.cn

Applications Web progressives : l'avenir du développement Web

PHPz

Libérer： 2024-09-05 06:48:07

original

708 Les gens l'ont consulté

Progressive Web apps: O futuro do desenvolvimento web

Pourquoi tout le buzz autour de PWA ?

Imaginez ceci : vous êtes dans le métro, vous essayez d'accéder à un site Web sur votre téléphone portable, mais le signal Internet ne cesse de baisser. Frustrant, non ?
C’est là qu’intervient Progressive Web App, le super-héros du monde du web. Il fonctionne hors ligne, se charge à une vitesse fulgurante et envoie même des notifications. C'est comme donner des super pouvoirs à votre site Web !

L’origine de la PWA

Remontons le temps (comme en 2015), les options étaient : créer un site Web ou créer une application. C'était comme choisir entre un vélo ou une voiture. Ensuite, des gens intelligents chez Google se sont demandé : « Pourquoi pas les deux ? » et c'est ainsi que PWA est née !

Construisons notre première PWA : Commencer l'aventure

Ronçons nos manches et construisons ensemble une PWA simple.
Créons une application "Bad Jokes" car, eh bien, qui n'aime pas les mauvaises blagues ?

Partie 1 : Les bases – Juste une simple page Web

Tout d'abord, créons du HTML de base. C'est notre "vélo" - il fonctionne, mais il n'est pas encore super puissant.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dad Jokes PWA</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Dad Jokes</h1>
    <p id="joke">Click the button for a dad joke!</p>
    <button id="jokeBtn">Get New Joke</button>
    <script src="app.js"></script>
</body>
</html>

Copier après la connexion

Partie 2 : Ajoutez quelques styles - Parce que chaque mauvaise blague a besoin d'être bien vue.

Ajoutons une touche de CSS pour rendre notre application plus élégante :

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
}

#joke {
    margin: 20px 0;
    font-style: italic;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

Copier après la connexion

Partie 3 : La magie du javascript = Demander de mauvaises blagues

Maintenant, ajoutons un peu de JavaScript pour faire une requête à une API qui renverra les blagues :

const jokeElement = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');

async function fetchJoke() {
    try {
        const response = await fetch('https://icanhazdadjoke.com/', {
            headers: {
                'Accept': 'application/json'
            }
        });
        const data = await response.json();
        jokeElement.textContent = data.joke;
    } catch (error) {
        jokeElement.textContent = "Oops! Looks like the joke got stuck in dad's old briefcase.";
    }
}

jokeBtn.addEventListener('click', fetchJoke);

// Faz o request na API quando a página carrega
fetchJoke();

Copier après la connexion

Étape 4 : Se transformer en PWA – Une pincée de super pouvoirs

Maintenant, transformons notre site Web normal en PWA. Tout d’abord, nous avons besoin d’un fichier manifeste. Créez un fichier appelé manifest.json :

{
    "name": "Dad Jokes PWA",
    "short_name": "DadJokes",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#4285f4",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Copier après la connexion

N'oubliez pas d'ajouter le lien manifeste dans le fichier HTML

<link rel="manifest" href="manifest.json">

Copier après la connexion

Étape 5 : La sauce secrète : les travailleurs des services

Les travailleurs des services sont comme des petits majordomes invisibles du Web. Ils mettent en cache vos actifs et fonctionnent même hors ligne. Créez un fichier appelé service-worker.js :

const CACHE_NAME = 'dad-jokes-cache-v1';
const urlsToCache = [
    '/',
    '/index.html',
    '/style.css',
    '/app.js',
    '/icon.png'
];

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 => response || fetch(event.request))
    );
});

Copier après la connexion

Maintenant, enregistrez le service worker dans votre fichier app.js

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

Copier après la connexion

Tester les super pouvoirs PWA

Mode hors ligne : désactivez Internet et actualisez la page. Votre application devrait toujours fonctionner !
Invite d'installation : dans les navigateurs pris en charge, vous verrez une option pour installer votre PWA.
Lighthouse Audit : utilisez l'outil Lighthouse de Chrome pour vérifier les super pouvoirs de votre PWA.

L'avenir est progressif

Félicitations ! Vous venez de créer votre première PWA. C'est comme regarder votre enfant faire ses premiers pas, n'est-ce pas ? (En parlant de mauvaises blagues...)

À mesure que nous nous dirigeons vers 2024, les PWA deviennent de plus en plus puissantes. Ils peuvent accéder aux fonctionnalités de l'appareil, travailler hors ligne et offrir une expérience semblable à celle d'une application sans les tracas des magasins d'applications.

Alors, la prochaine fois que quelqu'un vous demandera s'il peut créer un site Web ou une application, vous pourrez répondre : "Pourquoi pas les deux ?" et faites-leur découvrir le monde merveilleux des PWA !

Crédits

Progressive Web Apps : l'avenir du développement Web, écrit à l'origine par Baransel

Merci d’avoir lu cet article. J'espère pouvoir vous fournir des informations utiles. Si tel est le cas, je serais très heureux si vous recommandiez cet article et cliquiez sur le bouton ♥ pour que davantage de personnes puissent le voir.

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!