本頁面由 Cloud Translation API 翻譯而成。

對漸進式網頁應用程式進行偵錯

Kayce Basques

Sofia Emelianova

使用「Application」面板檢查、修改及偵錯網頁應用程式資訊清單、Service Worker 和 Service Worker 快取。

漸進式網頁應用程式 (PWA) 是以網路技術建構的新型優質應用程式。 PWA 提供與 iOS、Android 和電腦應用程式類似的功能。這 3 個子類型如下：

即使在網路連線不穩定的情況下也能維持穩定運作。
可安裝至作業系統的啟動途徑，例如 Mac OS X 上的「應用程式」資料夾、Windows 上的「開始」選單，以及 Android 和 iOS 的首頁畫面。
顯示在活動切換器、裝置搜尋引擎 (例如 Spotlight) 和內容分享表單中。

本指南只會探討「應用程式」面板的漸進式網頁應用程式功能。如果您需要其他窗格方面的協助，請參閱本指南的最後一節「其他應用程式窗格指南」。

摘要

使用「資訊清單」分頁檢查網路應用程式資訊清單。
「Service Workers」分頁可用來執行各種服務工作站相關工作，例如取消註冊或更新服務、模擬推送事件、離線或停止服務工作站。
在「Cache Storage」分頁中查看服務工作程式快取。
只要按一下「清除儲存空間」分頁中的按鈕，即可取消註冊服務 worker，並清除所有儲存空間和快取。

網頁應用程式資訊清單

如果您想讓使用者將應用程式新增至 Mac OS X 上的「Applications」資料夾、Windows 的「Start」選單，以及 Android 和 iOS 裝置的主畫面，則需要網頁應用程式資訊清單。資訊清單會定義應用程式在主畫面顯示的方式、從主畫面啟動時要引導使用者的位置，以及應用程式啟動時的外觀。

資訊清單設定完畢後，您可以使用「Application」面板的「Manifest」分頁進行檢查。

「資訊清單」分頁。

如要查看資訊清單來源，請按一下「App Manifest」標籤 (上方螢幕截圖中的 manifest.webmanifest) 下方的連結。
「Identity」和「Presentation」部分只會以更友善的方式顯示資訊清單來源的欄位。
在「通訊協定處理常式」部分，只要按一下按鈕，即可測試 PWA 的網址通訊協定處理常式註冊。詳情請參閱「測試網址通訊協定處理常式註冊」。
「圖示」部分會顯示您指定的所有圖示，並讓您檢查其遮罩。
「Shortcut #N」專區會顯示所有捷徑物件的資訊。
「螢幕截圖 #N」部分的螢幕截圖會顯示更豐富的應用程式安裝使用者介面。

此外，如果 DevTools 遇到錯誤 (例如無法載入圖示)，資訊清單分頁會顯示說明錯誤的「Installability」部分。

「資訊清單」分頁中的「安裝性」部分。

查看及檢查可遮蓋的圖示

「資訊清單」分頁的「圖示」部分會顯示應用程式的所有圖示。在本節中，您也可以檢查可遮蓋圖示的安全區域，這是可適應平台的圖示格式。

如要裁剪圖示，只顯示最小安全區域，請勾選「僅顯示可遮蓋圖示的最小安全區域」。

查看可遮蓋圖示的最小安全區域。

如果整個標誌都顯示在安全區域內，那就沒問題。

觸發安裝程序

Chrome 可讓您直接在使用者介面中啟用及宣傳 PWA 安裝作業。瞭解如何提供自有的應用程式內安裝體驗。

如要觸發 PWA 的安裝流程，請按照下列步驟操作：

在 Chrome 中開啟 PWA 的到達網頁。
在頂端的網址列右側，按一下「安裝」圖示。
按照畫面上的指示操作。

「安裝應用程式」功能無法模擬行動裝置的工作流程。請注意，即使開發人員工具處於裝置模式，電腦版 Chrome 瀏覽器在網址列仍會顯示安裝按鈕。不過，如果可以成功將應用程式新增到電腦上，就同樣適用於行動裝置。

如要測試真正的行動裝置體驗，您可以透過遠端偵錯將實體行動裝置連結到開發人員工具。如要在已連結的行動裝置上觸發安裝作業，請開啟三點選單，然後按一下「安裝應用程式」。

檢查快速鍵

應用程式捷徑可讓你快速存取一些使用者經常需要的操作。

如要檢查您在資訊清單檔案中定義的捷徑，請捲動至「Manifest」分頁的「Shortcut #N」部分。

「資訊清單」分頁中的「快速鍵」部分。

檢查螢幕截圖，瞭解更豐富的安裝 UI

只要在資訊清單檔案中添加說明和一組螢幕截圖，應用程式就能提供更詳盡的安裝對話方塊。

如要檢查螢幕截圖，請捲動至「資訊清單」分頁標籤的「螢幕截圖 #N」部分。

「資訊清單」分頁中的安裝對話方塊和螢幕截圖。

測試網址通訊協定處理常式註冊

PWA 可處理使用特定通訊協定的連結，提供更完整的體驗。如要瞭解如何建立處理常式，請參閱 PWA 的網址通訊協定處理常式註冊。

如要測試處理常式，請按照下列步驟操作：

在 PWA 的到達網頁上開啟開發人員工具。例如，請查看這個示範 PWA。
從示範網頁安裝 PWA，然後在安裝完成後重新載入應用程式。瀏覽器現在已將 PWA 註冊為 web+coffee 通訊協定的處理常式。
在「Application」>「Manifest」>「Protocol Handler」部分中，輸入處理常式要測試的網址，然後按一下「測試通訊協定」。在這個範例中，處理常式可以處理 americano、chai 和 latte-macchiato。
當 Chrome 詢問是否可以開啟應用程式時，請按一下「Open Protocol Handler」確認。
在下一個對話方塊中，允許應用程式處理 web+coffee 連結。

如果處理程序成功處理連結，您會在應用程式中看到咖啡杯圖片。

Service Worker

服務工作者是未來網頁平台的基本技術。這些指令碼是瀏覽器在背景執行的指令碼，與網頁不同。這些指令碼可讓您存取不需要網頁或使用者互動的功能，例如推播通知、背景同步處理和離線體驗。

相關指南：

Application 面板中的「Service Workers」分頁是開發人員工具中用來檢查及偵錯服務 worker 的主要位置。

Service Workers 分頁。

如果服務工作者已安裝至目前開啟的網頁，您會在這個分頁中看到相關資訊。舉例來說，在上述螢幕截圖中，系統已為 https://airhorner.com/ 的範圍安裝服務工作者。
選取「離線」核取方塊可讓開發人員工具進入離線模式。這與「網路」面板中的離線模式，或「指令選單」中的 Go offline 選項相同。
「Update on reload」核取方塊會強制服務工作者在每次載入網頁時更新。
「網路旁路」核取方塊會略過 Service Worker，並強制瀏覽器前往網路取得要求的資源。
「網路要求」連結會將您導向「網路」面板，其中會列出與 Service Worker (is:service-worker-intercepted 篩選器) 相關的已攔截要求。
「Update」連結會執行指定服務工作者的一次性更新作業。
「Push」按鈕會模擬不含酬載的推播通知 (也稱為「tickle」)。
「Sync」按鈕會模擬背景同步處理事件。
[取消註冊] 連結會取消註冊指定的 Service Worker。如要瞭解如何取消註冊 Service Worker，只要按一下按鈕就能清除儲存空間和快取，請參閱「清除儲存空間」一節。
「Source」行會指出目前執行中 Service Worker 的安裝時間。這個連結是 Service Worker 來源檔案的名稱。點選連結後，系統會將您導向服務人員的來源。
「Status」行代表 Service Worker 的狀態。這一行的數字 (螢幕截圖中的 #16) 代表服務工作站的更新次數。如果您勾選「在重新載入時更新」核取方塊，網頁每次載入時都會增加。狀態旁邊會顯示 start 連結 (如果服務工作站已停止)，或 stop 連結 (如果服務工作站正在執行)。Service Worker 主要是由瀏覽器隨時停止和啟動。您可以使用「stop」連結，明確停止服務 worker 來模擬這種情況。停止服務工作站是測試服務工作站重新啟動時程式碼行為的絕佳方式。常是因為對持續全球狀態的錯誤假設所造成，才顯示錯誤。
「Clients」行會指出服務 worker 的範圍來源。如果有多個已註冊的服務工作站，「Focus」(聚焦) 按鈕最適合用於這類用途。在其他分頁中執行的服務工作站旁邊，如果您按一下「focus」按鈕，Chrome 就會聚焦於該分頁。
「Update Cycle」表格會顯示 Service Worker 的活動及經過時間，例如安裝、等待和啟動。如要查看每項活動的確切時間戳記，請按一下「展開」按鈕。

詳情請參閱「Service Worker 生命週期」。