PWA離線應用調研详情 - 前端,html,javascript,pwa PatWu16 日志

1、PWA應用介紹

PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括：

可離線訪問：通過 Service Worker 實現離線緩存快速加載
利用緩存策略加速資源加載可安裝
用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計
適配各種設備屏幕

PWA 的核心技術包括：

Service Worker：用於攔截網絡請求、管理緩存
Web App Manifest：定義應用的元數據（如名稱、圖標）
HTTPS：確保數據傳輸的安全性

1.1 Service Worker

Service Worker 是一種運行在瀏覽器後台的腳本，獨立於網頁主線程，主要用於攔截網絡請求、管理緩存、接受推送通知，接入方式如下。

// 監聽install事件，緩存關鍵資源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/styles.css', '/app.js']);
    })
  );
});
// 攔截fetch事件，按需返回緩存或請求網絡資源
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response; // 返回緩存內容
      }
      return fetch(event.request).then((response) => {
        // 將新資源加入緩存
        caches.open('v1').then((cache) => {
          cache.put(event.request, response.clone());
        });
        return response;
      });
    })
  );
});
// 接受推送通知
self.addEventListener('push', (event) => {
  const options = {
    body: event.data.text(),
    icon: '/icon.png',
  };
  event.waitUntil(
    self.registration.showNotification('新消息', options)
  );
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service Worker 示例</title>
</head>
<body>
  <h1>Service Worker 示例</h1>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js')
        .then(registration => {
          console.log('Service Worker 註冊成功:', registration);
        })
        .catch(error => {
          console.log('Service Worker 註冊失敗:', error);
        });
    }
  </script>
</body>
</html>

上面Demo中緩存使用到了Cache接口，它是由 JavaScript API 驅動的高級緩存，主要 API 方法包括：CacheStorage.open、Cache.add、Cache.put、Cache.match、Cache.delete等。

緩存策略主要有以下幾種：
a. 僅緩存

b. 僅網絡

c. 緩存優先，回退網絡

d. 網絡優先，回退緩存

e. 後台更新

1.2 Web app manifests

Web App Manifest 是一個 JSON 文件，用於定義 Web 應用的元數據，如：

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

<!-- HTML中按照如下方式引入即可 -->
<link rel="manifest" href="/manifest.json">

主要參數及説明：

name：應用的全名，顯示在安裝提示和啓動畫面中。
short_name：應用的簡稱，用於主屏幕圖標下方。
start_url：定義應用啓動時加載的 URL，通常設置為首頁。
display：定義應用的顯示模式,常用值包括：
standalone：以獨立窗口運行，隱藏瀏覽器
fullscreen：全屏顯示，隱藏所有
minimal-ui：顯示最小化的瀏覽器
browser：以普通瀏覽器標籤頁運行
background_color：定義啓動畫面的背景顏色，提升用户體驗。
theme_color：定義應用的主題顏色，影響瀏覽器地址欄和工具欄的顏色。
icons：定義應用圖標，支持多種尺寸以適應不同設備，每個圖標需要指定 src（路徑）、sizes（尺寸）和 type（MIME 類型）。更多詳見 MDN

1.2.1 瀏覽器支持

通過 Web 提示安裝 PWA 的支持因瀏覽器和平台而異。
在桌面上：
Firefox 和 Safari 不支持在任何桌面操作系統上安裝 PWA。見下方的將網站安裝為應用程序。
Chrome 和 Edge 支持在 Linux、Windows、macOS 和 Chromebook 上安裝 PWA。

移動設備上需要點擊右上角下拉菜單中選擇install app選項：
在 Android、Firefox、Chrome、Edge、Opera 和 Samsung Internet Browser 上都支持安裝 PWA。
在 iOS 16.3 及更早版本上，PWA 只能通過 Safari 安裝。
在 iOS 16.4 及更高版本上，PWA 可以通過 Safari、Chrome、Edge、Firefox 和 Orion 的分享菜單安裝。

1.3、注意事項

1）Service Worker 僅通過 HTTPS 或 localhost 提供
2）如果 Service Worker 的內容包含語法錯誤， Service Worker 就會被捨棄，要處理有缺陷的 Service Worker，通常需要部署一個基本的 no-op Service Worker，它會在沒有 fetch 事件處理腳本的情況下立即安裝和激活：

self.addEventListener('install', () => {
  self.skipWaiting();
});
self.addEventListener('activate', () => {
  self.clients.matchAll({
    type: 'window'
  }).then(windowClients => {
    windowClients.forEach((windowClient) => {
      windowClient.navigate(windowClient.url);
    });
  });
});

附：Workbox 是 Google 推出的一個工具庫，旨在簡化 Service Worker 的開發，下篇文章將描述利用它開發一款PWA應用實踐過程。