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

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

Kayce Basques

Sofia Emelianova

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

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

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

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

摘要

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

網頁應用程式資訊清單

如果您希望使用者能夠將應用程式新增至 Mac OS X 上的「應用程式」資料夾、Windows 上的「開始」選單，以及 Android 和 iOS 的主畫面，就需要網頁應用程式資訊清單。資訊清單會定義應用程式在主畫面上的顯示方式、從主畫面啟動時要將使用者導向何處，以及應用程式在啟動時的外觀。

設定資訊清單後，您可以使用「應用程式」面板的「資訊清單」分頁檢查資訊清單。

「資訊清單」分頁。

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

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

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

查看及檢查可遮蓋的圖示

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

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

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

如果整個標誌都顯示在安全區域中，表示一切正常。

觸發條件安裝

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

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

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

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

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

檢查捷徑

應用程式捷徑可讓您快速存取使用者經常需要的幾項常用動作。

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

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

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

在資訊清單檔案中加入說明和一系列螢幕截圖，即可為應用程式提供更豐富的安裝對話方塊。

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

「Manifest」分頁中的安裝對話方塊和螢幕截圖。

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

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

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

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

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

Service Worker

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

相關指南：

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

「Service Workers」分頁。

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

詳情請參閱「服務工作者生命週期」。