Apl Web Progresif (PWA)

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:

1. Persediaan Projek:
   

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

2. Struktur Projek:
   

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

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

5. Mencipta Fail HTML, CSS dan JavaScript

index.html:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
  1fc2df4564f5324148703df3b6ed50c1
  4f2fb0231f24e8aef524fc9bf9b9874f
  b2386ffb911b14667cb8f0f91ea547a7My PWA6e916e0f7d1e588d4f442bf645aedb2f
  810801fb5d57e2948359b7eef57cb689
  02ccac29734b382144275b53674934d7
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  4a249f0d628e2318394fd9b75b4636b1Welcome to My Progressive Web App!473f0a7621bec819994bb5020d29372a
  1e1ccda7e68c35a670bf47149c0f0c612cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

styles.css:

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

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

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

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

Menjalankan Pelayan:

node server.js

8. Menguji PWA Anda

1. Buka Apl:

   • Navigasi ke http://localhost:3000 dalam penyemak imbas anda.

2. 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.

3. 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.

10. Kesimpulan

Ringkaskan perkara utama yang diliputi:

• Pengenalan kepada PWA dan faedahnya.
• Menyediakan PWA mudah dengan manifes, pekerja perkhidmatan dan caching.
• Amalan terbaik untuk membina PWA yang teguh.

11. Sumber Tambahan

• Dokumentasi PWA
• Tutorial dan panduan tentang topik lanjutan PWA.
• Forum dan sokongan komuniti.

Atas ialah kandungan terperinci Apl Web Progresif (PWA). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!