漸進式網頁套用 (PWA) 是一種特殊的網頁套用，它可以為使用者提供類似原生套用的體驗。透過 PWA，開發者可以建立能夠離線執行、發送推播通知並且可以被添加到主屏的套用。
以下是關於如何建立和使用 PWA 的簡介和詳細教程：
1. 建立 PWA
要建立 PWA，您需要確保您的網站滿足以下條件：
1.1. 使用 HTTPS
PWA 需要在安全環境下執行，因此您的網站必須使用 HTTPS。
1.2. 添加 Web App Manifest
Manifest 是一個 JSON 檔，其中包含了套用的資訊（如名稱、圖示等）。
範例：
{"name": "我的 PWA 套用","short_name": "PWA","description": "一個範例 PWA","start_url": "/index.html","display": "standalone","background_color": "#ffffff","theme_color": "#000000","icons": [ {"src": "icon/lowres.webp","sizes": "48x48","type": "image/webp" }, {"src": "icon/hdres.webp","sizes": "128x128","type": "image/webp" } ]}
將這個檔連結到您的 HTML 中：
<linkrel="manifest"href="/manifest.json">
1.3. 添加 Service Worker
Service Worker 是 PWA 的核心，它是一種 JavaScript 工作者指令碼，可以代理網頁與網路之間的通訊，使得離線體驗成為可能。
// sw.jsself.addEventListener('install', function(event){ event.waitUntil( caches.open('my-cache').then(function(cache){return cache.addAll(['/','/index.html','/app.css','/app.js' ]); }) );});self.addEventListener('fetch', function(event){ event.respondWith( caches.match(event.request).then(function(response){return response || fetch(event.request); }) );});
在主 JavaScript 檔中註冊 Service Worker：
if ('serviceWorker'in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) {console.log('Service Worker 註冊成功！'); }) .catch(function(error) {console.log('Service Worker 註冊失敗：', error); });}
2. 在 Chrome 中使用 PWA
2.1. 安裝 PWA
當你存取一個 PWA 網站時，Chrome 會在位址列中顯示一個「+」圖示。點選它可以將該網站安裝到桌面，並允許你在離線時使用。
2.2. 使用 Lighthouse 測試 PWA
Google 提供了一個名為 Lighthouse 的工具，它可以幫助您測試和最佳化您的 PWA。在 Chrome 開發者工具中，選擇 「Lighthouse」 索引標籤，然後點選 「Generate report」 來檢查您的套用。
總結
PWA 提供了一個強大的橋梁，連線了 Web 和原生套用之間的差距。透過上述的簡單步驟，你可以為你的使用者建立一個快速、可靠且引人入勝的 Web 體驗。
點選下方公眾號，回復關鍵字： chrome 獲取 chrome安裝包及 chrome 外掛程式等資料。
