1. 歡迎
在本實驗室中，您將使用現有的網頁應用程式，並讓使用者能夠安裝該應用程式。這是漸進式網頁應用程式研討會的一系列隨附程式碼研究室中的第四個。先前的程式碼研究室是 IndexedDB。本系列還有四個程式碼研究室。
課程內容
- 手動撰寫 Service Worker
- 在現有網頁應用程式中新增 Service Worker
- 使用 Service Worker 和 Cache Storage API，讓資源可離線存取
注意事項
- 基本 HTML 和 JavaScript
軟硬體需求
- 支援安裝 PWA 的瀏覽器
2. 開始設定
首先，請複製或下載完成本程式碼研究室所需的範例程式碼：
如果複製存放區，請確認您位於 pwa04--tab-to-taskbar 分支版本中。ZIP 檔案也包含該分支版本的程式碼。
這個程式碼集需要 Node.js 14 以上版本。取得程式碼後，請在程式碼資料夾中從指令列執行 npm ci，安裝所有需要的依附元件。接著執行 npm start，啟動本程式碼研究室的開發伺服器。
原始碼的 README.md 檔案會說明所有發布的檔案。此外，您在本程式碼研究室中會使用下列主要現有檔案：
金鑰檔案
index.html- 主要應用程式 HTML
3. 建立網頁應用程式資訊清單
網路應用程式資訊清單檔案會說明 PWA，因此瀏覽器會知道您的網路應用程式可安裝，以及如何在安裝裝置上呈現，這與運作中的 Service Worker 息息相關。不過，您必須先建立該檔案。在網路應用程式的 public 資料夾中新增名為 manifest.json 的檔案，並加入下列內容：
{
"name": "PWA Edit",
"short_name": "PWA Edit",
"start_url": "/?source=pwa",
"display": "standalone",
"icons": [
{
"type": "image/png",
"sizes": "192x192",
"src": "/images/icons/logo-192.png"
},
{
"type": "image/png",
"sizes": "48x48",
"src": "/images/icons/logo-48.png"
},
{
"type": "image/png",
"sizes": "72x72",
"src": "/images/icons/logo-72.png"
},
{
"type": "image/png",
"sizes": "128x128",
"src": "/images/icons/logo-128.png"
},
{
"type": "image/png",
"sizes": "384x384",
"src": "/images/icons/logo-384.png"
},
{
"type": "image/png",
"sizes": "512x512",
"src": "/images/icons/logo-512.png"
},
{
"type": "image/png",
"sizes": "96x96",
"src": "/images/icons/logo-96.png"
},
{
"type": "image/png",
"sizes": "1024x1024",
"src": "/images/icons/maskable-1024.png",
"purpose": "maskable"
}
],
"theme_color": "#282c34",
"background_color": "#282c34",
"description": "A PWA markdown editor",
"categories": ["productivity", "utilities"]
}
別忘了為 iOS 裝置加入 Apple 觸控圖示。在 index.html 的 <head> 中，於 <title> 標記後方新增下列程式碼行
<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />
說明
這個資訊清單包含必要、建議和宣傳欄位，因此內容相當豐富。首先是必填欄位，用於定義 PWA 的名稱、啟動網址、顯示模式和圖示。請注意，最後一個圖示是可遮蓋圖示，可根據裝置的 UI 顯示多個圖示。接著是建議的主題和背景顏色欄位。最後是宣傳欄位，包括說明和 PWA 適用的類別。將這個資訊清單附加至 PWA 時，這些欄位會控管 PWA 安裝應用程式的顯示和管理方式。
4. 將資訊清單附加至 PWA
建立資訊清單檔案後，必須附加該檔案，才能與 PWA 建立關聯。如要這麼做，請開啟 index.html，並在 <head> 的 <title> 標記下方新增下列內容：
<link rel="manifest" href="/manifest.json" />
說明
資訊清單連結會告知支援該連結的瀏覽器，連結的網頁應用程式資訊清單說明瞭目前的網站。只要網頁應用程式有效且可用，並具備可正常運作的 Service Worker，且通過任何瀏覽器專屬的額外安裝條件，使用者就能直接在裝置上安裝應用程式！
5. 新增快速鍵
如要讓 PWA 與裝置更深入整合，其中一個絕佳方法是提供內容選單捷徑，直接存取應用程式中的特定功能。在 PWA 中，只要將 mode 查詢參數設為 night 或 day，即可透過夜間模式切換鈕選擇模式。在 manifest.json 中設定兩個快速鍵，分別執行下列操作：
- 以
night或day模式啟動 PWA - 使用
/images/logo.svg做為圖示，大小為150x150
6. 恭喜！
您剛才學會如何建立網頁應用程式資訊清單檔案、將其附加至網頁，以及在安裝時新增應用程式捷徑。
本系列下一個程式碼研究室是「提示及評估安裝」。