Apl Web Progresif (PWA)-tutorial js-php.cn

Apl Web Progresif (PWA)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2024-08-08 08:26:11

asal

1295 orang telah melayarinya

Progressive Web Apps (PWAs)

Membina Apl Web Progresif (PWA)

Dalam siaran ini, kami akan meneroka Apl Web Progresif (PWA), pendekatan moden untuk membina aplikasi web yang menawarkan pengalaman seperti apl asli. Saya akan membincangkan asas PWA, kelebihannya dan langkah-langkah untuk mencipta PWA dari awal.

1. Pengenalan kepada Apl Web Progresif (PWA)

Apakah itu Apl Web Progresif (PWA)?

Apl Web Progresif ialah sejenis perisian aplikasi yang dihantar melalui web, dibina menggunakan teknologi web biasa termasuk HTML, CSS dan JavaScript. PWA bertujuan untuk berfungsi pada mana-mana platform yang menggunakan penyemak imbas yang mematuhi piawaian.

Ciri Utama PWA:

Responsif: Berfungsi pada mana-mana peranti dan saiz skrin.
Keupayaan Luar Talian: Berfungsi di luar talian atau dengan keadaan rangkaian yang lemah menggunakan pekerja perkhidmatan.
Pengalaman Seperti Apl: Menyediakan pengalaman pengguna seperti apl dengan ciri seperti pemasangan skrin utama.
Selamat: Disiarkan melalui HTTPS untuk mengelakkan pengintipan dan memastikan integriti kandungan.
Boleh berinteraksi semula: Mendayakan pemberitahuan tolak untuk memastikan pengguna sentiasa terlibat.

2. Kelebihan PWA

Mengapa Membina PWA?

Peningkatan Prestasi: Masa pemuatan yang lebih pantas dan interaksi yang lebih lancar.
Penglibatan Pengguna Dipertingkat: Pemberitahuan tolak dan akses skrin utama.
Kos Pembangunan yang Lebih Rendah: Pangkalan kod tunggal untuk pengalaman web dan mudah alih.
Faedah SEO: PWA boleh ditemui oleh enjin carian.

3. Menyediakan PWA

Prasyarat:

Pengetahuan asas HTML, CSS dan JavaScript.
Node.js dan npm/yarn dipasang.

Mencipta PWA Mudah:

Persediaan Projek:

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

Salin selepas log masuk

Struktur Projek:

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

Salin selepas log masuk

4. Mencipta Fail Manifes

manifest.json:

Fail manifes menyediakan metadata tentang PWA dan diperlukan untuk memasang apl pada skrin utama.

// 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"
    }
  ]
}

Salin selepas log masuk

5. Mencipta Fail HTML, CSS dan 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>

Salin selepas log masuk

styles.css:

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

Salin selepas log masuk

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

Salin selepas log masuk

6. Menyediakan Pekerja Perkhidmatan

Pekerja perkhidmatan ialah skrip yang dijalankan oleh penyemak imbas di latar belakang, berasingan daripada halaman web. Ia memintas permintaan rangkaian dan boleh menyimpan sumber untuk meningkatkan prestasi dan keupayaan luar talian.

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

Salin selepas log masuk

7. Menyediakan Pelayan

server.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}`);
});

Salin selepas log masuk

Menjalankan Pelayan:

node server.js

Salin selepas log masuk

8. Menguji PWA Anda

Buka Apl:
- Navigasi ke http://localhost:3000 dalam penyemak imbas anda.
Pendaftaran Pekerja Perkhidmatan:
- Buka Alat Pembangun (F12 atau klik kanan dan pilih "Periksa").
- Pergi ke tab "Aplikasi".
- Di bawah "Pekerja Perkhidmatan", anda sepatutnya melihat pekerja perkhidmatan anda berdaftar.
Tambah pada Skrin Utama:
- Pada peranti mudah alih, buka PWA anda dalam penyemak imbas.
- Anda sepatutnya melihat gesaan untuk "Tambah pada Skrin Utama".

9. Amalan Terbaik untuk PWA

Amalan Terbaik:

Gunakan HTTPS: PWA memerlukan konteks selamat.
Optimumkan Imej: Gunakan imej responsif dan pemuatan malas.
Minimumkan Permintaan Rangkaian: Cache sumber dengan berkesan.
Pastikan Fungsi Luar Talian: Menyediakan pengalaman luar talian yang bermakna.