探索漸進式 Web 應用程式 (PWA)：建立離線就緒體驗-js教程-PHP中文網

Exploring Progressive Web Apps (PWAs): Building Offline-Ready Experiences

想像一下這個...

您在長途飛行中，滾動瀏覽應用程序，但沒有 Wi-Fi。您希望該應用程式停止工作，但它沒有。您仍然可以瀏覽、互動和使用其功能，就像在線上一樣。這就是漸進式 Web 應用程式 (PWA) 的魔力，它正在改變我們建立 Web 應用程式的想法。在本指南中，我們將探討 PWA 是什麼、它們如何運作以及如何建立 PWA。

什麼是漸進式 Web 應用程式？

PWA 是一種 Web 應用程序，看起來和感覺都像本機應用程序，但在瀏覽器中運行。它們結合了兩個世界的優點：網路的覆蓋範圍和本機應用程式的功能。 PWA 的一個關鍵特性是它們能夠離線工作，無論網路條件如何，都能提供無縫的使用者體驗。

PWA 的核心概念

PWA 仰賴三項核心技術：

1. 服務人員

將服務人員視為應用程式的幕後工作人員。它們管理快取、處理網路請求並確保您的應用程式離線工作。

它們的作用：攔截網路請求、快取檔案並在離線時提供服務。
如何實作：

  self.addEventListener('install', (event) => {
    event.waitUntil(
      caches.open('my-cache').then((cache) => {
        return cache.addAll(['/index.html', '/styles.css', '/script.js']);
      })
    );
  });

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  });

登入後複製

？文件：Service Workers

2. 快取

快取可確保您的應用程式快速加載，即使在緩慢或不可靠的網路上也是如此。

要快取的內容：HTML、CSS、JavaScript、映像以及離線渲染應用程式所需的任何其他資源。
範例：

  caches.open('my-cache').then((cache) => {
    cache.addAll(['/offline.html', '/styles.css']);
  });

登入後複製

？文件：快取API

3. 離線功能

離線功能是 PWA 的與眾不同之處。這涉及提供快取檔案並在沒有網路連線的情況下啟用基本的應用程式互動。

建立漸進式 Web 應用程式

以下是將基本 Web 應用程式轉換為 PWA 的逐步指南：

第 1 步：新增清單文件

manifest.json 檔案向瀏覽器告知您的應用程序，包括其名稱、圖示和起始 URL。

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

登入後複製

？文件：Web 應用程式清單

第 2 步：註冊 Service Worker

Service Worker 對於啟用離線功能至關重要。

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

登入後複製

步驟 3：啟用 HTTPS

PWA 需要安全連線。使用 HTTPS 確保您的應用程式的安全性。

提示：對於本機開發，請使用帶有 HTTPS 的 localhost 等工具。

第 4 步：測試離線功能

在 Chrome 中開啟您的應用程式。
前往開發者工具>;應用程式>>服務人員。
選取「離線」並刷新您的應用程式以查看其在沒有網路連線的情況下是否可以運行。

PWA 的最佳實踐

最佳化效能
- 對映像和腳本使用延遲載入。
- 縮小 CSS 和 JavaScript 檔案。

使用推播通知

使用 Push API 及時更新來吸引使用者。
範例：

  self.addEventListener('install', (event) => {
    event.waitUntil(
      caches.open('my-cache').then((cache) => {
        return cache.addAll(['/index.html', '/styles.css', '/script.js']);
      })
    );
  });

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  });

登入後複製