Apl Web Progresif: Masa depan pembangunan web-tutorial js-php.cn

Apl Web Progresif: Masa depan pembangunan web

PHPz

Lepaskan： 2024-09-05 06:48:07

asal

585 orang telah melayarinya

Progressive Web apps: O futuro do desenvolvimento web

Apakah yang menjadi bualan tentang PWA?

Bayangkan ini: Anda berada di dalam kereta api bawah tanah, anda cuba mengakses tapak web pada telefon bimbit anda, tetapi isyarat internet terus jatuh. Mengecewakan, bukan?
Di sinilah Progressive Web App masuk, wira-wira dunia web. Ia berfungsi di luar talian, dimuatkan pada kelajuan kilat, dan juga menghantar pemberitahuan. Ia seperti memberi tapak web anda kuasa besar!

Asal usul PWA

Mari kita kembali ke masa lalu (seperti, pada 2015), pilihannya ialah: bina tapak web atau bina apl. Itu seperti memilih antara basikal atau kereta. Kemudian beberapa orang pintar di Google berfikir, "Mengapa tidak kedua-duanya?" dan dengan itu, PWA dilahirkan!

Mari bina PWA pertama kami: Memulakan pengembaraan

Mari kita menyingsing lengan baju kita dan membina PWA mudah bersama-sama.
Mari buat aplikasi "Bad Jokes" kerana, siapa yang tidak suka jenaka yang buruk?

Bahagian 1: Asas - Hanya halaman web yang ringkas

Mula-mula, mari kita buat beberapa HTML asas. Ini ialah "basikal" kami - ia berfungsi, tetapi ia belum terlalu berkuasa.

<!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>

Salin selepas log masuk

Bahagian 2: Tambah beberapa gaya - Kerana setiap jenaka yang buruk memerlukan penampilan yang baik.

Mari tambahkan sentuhan CSS untuk menjadikan aplikasi kami lebih elegan:

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;
}

Salin selepas log masuk

Bahagian 3: Keajaiban javascript = Minta jenaka buruk

Sekarang, mari tambah sedikit JavaScript untuk membuat permintaan kepada API yang akan mengembalikan jenaka:

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();

Salin selepas log masuk

Langkah 4: Berubah menjadi PWA - Sekumpulan kuasa besar

Sekarang, mari tukar laman web biasa kami menjadi PWA. Pertama, kita memerlukan fail manifes. Buat fail bernama 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"
        }
    ]
}

Salin selepas log masuk

Jangan lupa tambahkan pautan manifes dalam fail HTML

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

Salin selepas log masuk

Langkah 5: Sos rahsia: Pekerja Perkhidmatan

Pekerja perkhidmatan adalah seperti butler kecil yang tidak kelihatan di web. Mereka cache aset anda dan juga berfungsi di luar talian. Buat fail bernama 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))
    );
});

Salin selepas log masuk

Sekarang, daftarkan pekerja perkhidmatan dalam fail app.js anda

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));
    });
}

Salin selepas log masuk

Menguji Kuasa Besar PWA

Mod Luar Talian: Matikan Internet dan muat semula halaman. Apl anda sepatutnya masih berfungsi!
Gesaan pemasangan: Dalam penyemak imbas yang disokong, anda akan melihat pilihan untuk memasang PWA anda.
Audit Rumah Api: Gunakan alat Rumah Api Chrome untuk menyemak kuasa besar PWA anda.

Masa depan adalah progresif

Tahniah! Anda baru sahaja membina PWA pertama anda. Ia seperti melihat anak anda mengambil langkah pertama, bukan? (Bercakap tentang lawak buruk...)

Apabila kita menuju ke tahun 2024, PWA menjadi lebih berkuasa. Mereka boleh mengakses ciri peranti, bekerja di luar talian dan memberikan pengalaman seperti apl tanpa perlu menggunakan kedai aplikasi.

Jadi, apabila seseorang bertanya kepada anda sama ada mereka boleh membuat tapak web atau apl, anda boleh berkata: “Mengapa tidak kedua-duanya?” dan memperkenalkan mereka kepada dunia PWA yang mengagumkan!

Kredit

Apl Web Progresif: Masa Depan Pembangunan Web, asalnya ditulis oleh Baransel

Terima kasih kerana membaca artikel ini. Saya harap saya dapat memberikan anda beberapa maklumat yang berguna. Jika ya, saya sangat gembira jika anda mengesyorkan siaran ini dan klik butang ♥ supaya lebih ramai orang dapat melihatnya.

Atas ialah kandungan terperinci Apl Web Progresif: Masa depan pembangunan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!