CycleTracker：清單和圖示
PWA 清單檔案是一個 JSON 檔案，它提供有關應用功能的資訊，以便在使用者裝置上安裝時，該應用看起來和行為都像原生應用。清單包含應用的元資料，包括其名稱、圖示和顯示指令。
雖然根據規範，所有清單鍵（或成員）都是可選的，但某些瀏覽器、作業系統和應用分發商對於 Web 應用要成為 PWA 都有特定的必需成員。透過包含名稱或短名稱、起始 URL、滿足最低要求的圖示以及 PWA 應該檢視的應用視口型別，您的應用將滿足 PWA 的清單要求。
我們經期追蹤應用的極簡主義清單檔案可能如下所示
{
"short_name": "CT",
"start_url": "/",
"icons": [
{
"src": "icon-512.png",
"sizes": "512x512"
}
],
"display": "standalone"
}
在儲存清單檔案並從我們的 HTML 檔案連結到它之前，我們可以開發一個仍然簡短但資訊量更大的 JSON 物件來定義 PWA 的身份、呈現和圖示。是的，上面會起作用，但讓我們討論此示例中的成員以及其他幾個使清單檔案能夠更好地定義 CycleTracker PWA 外觀的成員。
應用身份
為了標識您的 PWA，JSON 必須包含 name 或 short_name 成員，或兩者兼有，以定義 PWA 名稱。它還可以包含 description。
name-
PWA 的名稱。這是作業系統列出應用程式、應用程式圖示旁邊的標籤等時使用的名稱。
short_name-
如果空間不足以顯示
name，則向用戶顯示的 PWA 名稱。它用作手機螢幕上圖示的標籤，包括 iOS 上的“新增到主螢幕”對話方塊。
當 name 和 short_name 都存在時，name 在大多數情況下使用，而 short_name 在顯示應用程式名稱的空間有限時使用。
description-
解釋應用程式功能。它提供了應用程式目的和功能的可訪問描述。
任務
編寫清單檔案的前幾行。您可以使用下面的文字，或更謹慎或更具描述性的值，以及您選擇的描述。
示例解決方案
{
"name": "CycleTracker: Period Tracking app",
"short_name": "CT",
"description": "Securely and confidentially track your menstrual cycle. Enter the start and end dates of your periods, saving your private data to your browser on your device, without sharing it with the rest of the world."
}
應用呈現
PWA 已安裝和離線體驗的外觀（或呈現）在清單中定義。呈現清單成員包括 start_url 和 display，以及可用於自定義應用顏色的成員，包括 theme_color 和 background_color。
start_url-
使用者啟動 PWA 時的起始頁面。
display-
控制應用的顯示模式，包括
fullscreen、standalone（將 PWA 顯示為獨立應用）、minimal-ui（類似於獨立檢視但帶有控制導航的 UI 元素）和browser（在常規瀏覽器檢視中開啟應用）。
還有一個orientation 成員，它將 PWA 的預設方向定義為 portrait 或 landscape。由於我們的應用在這兩種方向上都能很好地工作，我們將省略此成員。
顏色
theme_color-
作業系統和瀏覽器 UI 元素（例如某些移動體驗上的狀態列和桌面作業系統上的應用程式標題欄）的預設顏色。
background_color-
在 CSS 載入之前作為應用背景顯示的佔位符顏色。為了在應用啟動和載入之間建立平滑過渡，建議使用宣告為應用
background-color顏色的<color>。
任務
將簡報定義新增到您在上一任務中開始建立的清單檔案中。
示例解決方案
由於示例應用程式是單頁，我們可以使用 "/" 作為 start_url，或者完全省略該成員。出於同樣的原因，我們可以透過將 display 設定為 standalone 來顯示沒有瀏覽器 UI 的應用程式。
在我們的 CSS 中，background-color: #eeffee; 設定在 body 元素選擇器上。我們使用 #eeffee 來確保從佔位符外觀到應用程式載入的平滑過渡。
{
"name": "...",
"short_name": "...",
"description": "...",
"start_url": "/",
"theme_color": "#eeffee",
"background_color": "#eeffee",
"display": "standalone"
}
應用圖示
PWA 圖示可幫助使用者識別您的應用，使其更具視覺吸引力，並提高可發現性。PWA 應用圖示會出現在主螢幕、應用啟動器或應用商店搜尋結果中。渲染圖示的大小和檔案要求因顯示位置和顯示者而異。清單是您定義影像的地方。
在清單 JSON 物件中，icons 成員指定了一個或多個用於不同上下文的圖示物件陣列，每個物件都有一個 src 和 sizes 成員，以及可選的 type 和 purpose 成員。每個圖示物件的 src 列出單個影像檔案的來源。sizes 成員提供了一個空格分隔的大小列表，該特定影像應該用於或關鍵字 any；該值與 <link> 元素的 sizes 屬性相同。type 成員列出影像的 MIME 型別。
{
"name": "MyApp",
"icons": [
{
"src": "icons/tiny.webp",
"sizes": "48x48"
},
{
"src": "icons/small.png",
"sizes": "72x72 96x96 128x128 256x256",
"purpose": "maskable"
},
{
"src": "icons/large.png",
"sizes": "512x512"
},
{
"src": "icons/scalable.svg",
"sizes": "any"
}
]
}
所有圖示都應該具有相同的外觀和感覺，以確保使用者識別您的 PWA，但圖示越大，它包含的細節就越多。雖然所有圖示檔案都是正方形的，但某些作業系統會渲染不同的形狀，切掉部分或“遮蓋”圖示以適應 UI，如果圖示不可遮蓋，則會縮小並居中圖示並帶有背景。安全區，即如果圖示被遮蓋成圓形，仍能正常渲染的區域，是影像檔案內部的 80%。圖示透過 purpose 成員標記為可安全遮蓋，當設定為 maskable 時，它將圖示定義為自適應。
在 Safari 中，因此對於 iOS 和 iPadOS，如果您透過 <link> 在 HTML 文件的 <head> 中包含非標準的 apple-touch-icon，它們將優先於清單中宣告的圖示。
任務
將圖示新增到您一直在構建的清單檔案中。
玩轉 CycleTracker 的“週期”和“月經”詞語以及我們選擇的綠色主題顏色，我們的圖示影像都可以是帶有綠色圓圈的淺綠色正方形。我們最小尺寸的 circle.ico，一個只代表句點標點符號和應用程式主題顏色的圖示檔案，以及我們的中間影像 circle.svg、tire.svg 和 wheel.svg，隨著尺寸的增大，從普通圓圈到輪胎新增更多細節，我們最大的圖示是帶有輻條和陰影的詳細輪子。也就是說，設計圖示超出了本教程的範圍。
示例解決方案
{
"name": "...",
"short_name": "...",
"description": "...",
"start_url": "...",
"theme_color": "...",
"background_color": "...",
"display": "...",
"icons": [
{
"src": "circle.ico",
"sizes": "48x48"
},
{
"src": "icons/circle.svg",
"sizes": "72x72 96x96",
"purpose": "maskable"
},
{
"src": "icons/tire.svg",
"sizes": "128x128 256x256"
},
{
"src": "icons/wheel.svg",
"sizes": "512x512"
}
]
}
將清單新增到應用
您現在有一個完全可用的清單檔案。是時候儲存它並從我們的 HTML 檔案中連結到它了。
清單副檔名可以是規範建議的 .webappmanifest。但是，由於它是 JSON 檔案，因此最常使用瀏覽器支援的 .json 副檔名儲存。
PWA 需要從應用的 HTML 文件中連結清單檔案。我們有一個功能齊全的應用，但它還不是 PWA，因為它尚未連結到我們的外部清單 JSON 檔案。要包含外部 JSON 資源，我們使用帶有 rel="manifest" 屬性的 <link> 元素，並將 href 屬性設定為資源的位置。
<link rel="manifest" href="cycletracker.json" />
<link> 元素最常用於連結樣式表，對於 PWA，則用於連結必需的清單檔案，但它也用於建立站點圖示（包括“favicon”風格圖示以及移動裝置上的主螢幕和應用圖示）等。
<link rel="icon" href="icons/circle.svg" />
當使用 .webmanifest 副檔名時，如果您的伺服器不支援該 MIME 型別，請設定 type="application/manifest+json"。
任務
儲存您在上述步驟中建立的清單檔案，然後從 index.html 檔案中連結到它。
可選地，也可以從您的 HTML 連結一個快捷方式圖示。
示例解決方案
index.html 的 <head> 現在可能看起來類似於
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Cycle Tracker</title>
<link rel="stylesheet" href="style.css" />
<link rel="manifest" href="cycletracker.json" />
<link rel="icon" href="icons/circle.svg" />
</head>
在 GitHub 上檢視 cycletracker.json 檔案並檢視專案原始碼。
有了清單檔案，並且從 https:// URL（或 localhost）載入時，大多數瀏覽器會識別您的網站為 PWA，有些還會提示安裝它。為了使我們的 PWA 離線工作，我們仍然需要新增一個 Service Worker。
除錯清單檔案
一些瀏覽器開發工具提供了對應用程式清單的洞察。在 Edge、Firefox 和 Chrome 開發工具中，清單成員及其值在“應用程式”面板下可見。
清單應用窗格提供了清單檔案的名稱作為連結，以及身份、呈現和圖示部分。
支援的清單成員會顯示，以及所有包含的值。在此螢幕截圖中，雖然我們沒有包含 orientation 或 id 成員，但它們被列出。應用程式面板可用於檢視清單成員甚至進行學習：在此示例中，我們學習到要指定與當前身份匹配的應用程式 ID，請將 id 欄位設定為“/”。
Chrome 和 Edge 還提供錯誤和警告、協議處理程式以及改進清單和圖示的資訊。
我們的 Web 應用沒有任何協議處理程式；本教程不涉及此主題。如果包含了一些，它們將在“協議處理程式”下找到。由於該部分為空，開發工具會連結到有關該主題的更多資訊。
清單面板還包括對可遮罩圖示安全區域的深入瞭解，以及指向 PWA 影像生成器的連結。此工具為 Android、Apple OS 和 Windows 建立了 100 多個方形 PNG 影像，以及一個列出所有影像及其大小的 JSON 物件。生成的影像可能無法滿足您的需求，但為每個作業系統生成的影像大小列表展示了 PWA 可以在何處以及如何提供服務的多樣性。
開發工具在識別支援哪些清單成員方面很有用。請注意，Firefox 開發工具包含 dir、lang、orientation、scope 和 id 的條目，儘管我們的清單檔案沒有包含這些成員。Firefox 還包含每個圖示的 purpose 成員的值，如果未明確設定用途，則顯示 any。
接下來
為了使我們的 PWA 離線工作，我們需要新增一個 Service Worker，我們將在不使用框架的情況下完成此操作。