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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

漸進式網頁應用程式 (PWA) 是以網頁技術建構的新型優質應用程式， PWA 的功能與 iOS、Android 和電腦應用程式類似。這些因素包括：

  • 即使網路不穩定，也能穩定可靠。
  • 安裝後即可啟動作業系統介面，例如 Mac OS X 上的「Applications」資料夾、Windows 的「Start」選單，以及 Android 和 iOS 的主畫面。
  • 並顯示在活動切換器、裝置搜尋引擎 (如 Spotlight) 和內容分享試算表中。

本指南僅討論「應用程式」面板的漸進式網頁應用程式功能，如需其他窗格的說明，請參閱本指南的最後一節：其他應用程式面板指南。

摘要

  • 使用「Manifest」分頁檢查網頁應用程式資訊清單。
  • 您可以使用「Service Workers」分頁進行各種服務工作站相關工作，例如取消註冊或更新服務、模擬推送事件、離線啟動，或停止服務工作站。
  • 在「快取儲存空間」分頁中查看 Service Worker 快取。
  • 取消註冊 Service Worker 並清除所有儲存空間和快取，只要在「Clear storage」(清除儲存空間) 分頁中按一下按鈕即可。

網頁應用程式資訊清單

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

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

「資訊清單」分頁。

  • 如要查看資訊清單來源，請點選下方「應用程式資訊清單」標籤 (上方螢幕截圖中的 manifest.webmanifest) 下方的連結。
  • 「身分」和「呈現方式」部分只會以較容易使用的方式顯示資訊清單來源的欄位。
  • 在「通訊協定處理常式」部分中，只要按一下按鈕，即可測試 PWA 的網址通訊協定處理常式註冊作業。 詳情請參閱「測試網址通訊協定處理常式註冊」。
  • 圖示部分會顯示您指定的每個圖示，供您查看其遮罩。
  • 「Shortcut #N」區段會顯示所有捷徑物件的資訊。
  • 「螢幕截圖 #N」部分的區段顯示螢幕截圖，藉此為應用程式提供更豐富的安裝 UI。

此外，如果 DevTools 發生錯誤 (例如無法載入的圖示)，「資訊清單」分頁就會顯示「可安裝性」部分來說明錯誤。

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

查看及檢查可遮蓋的圖示

「Manifest」分頁的「Icons」部分會顯示應用程式的所有圖示。在本節中，您也可以查看可遮蓋的圖示 (即適應平台的圖示格式) 的安全區域。

如要裁剪圖示，讓畫面上只顯示最小的安全區域，請勾選 核取方塊。「僅顯示可遮蓋圖示的最小安全區域」。

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

如果整個標誌都顯示在安全區域內，就不用擔心。

觸發條件安裝

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

如何觸發 PWA 的安裝流程：

  1. 在 Chrome 中開啟 PWA 的到達網頁。

  2. 在頂端的網址列右側按一下 。「安裝」。

    安裝按鈕。

  3. 按照畫面上的指示操作。

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

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

檢查捷徑

應用程式捷徑可讓您快速存取使用者經常需要執行的一些常用動作。

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

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

檢查螢幕截圖，打造更豐富的安裝 UI

只要在資訊清單檔案中加入說明和一組螢幕截圖，應用程式就能顯示更豐富的安裝對話方塊。

如要檢查螢幕截圖，請捲動至「Manifest」分頁的「Screenshot #N」部分。

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

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

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

如要測試處理常式：

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

如果處理常式成功處理連結，就會在應用程式中開啟咖啡杯的圖片。

Service Worker

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

相關指南：

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

「Service Workers」分頁。

  • 如果 Service Worker 已安裝到目前開啟的頁面，這個分頁中就會顯示該工作站。舉例來說，在上方螢幕截圖中，https://airhorner.com/ 範圍安裝了 Service Worker。
  • 核取方塊。「離線」核取方塊可將開發人員工具進入離線模式。這相當於「Network」面板提供的離線模式，或「Command」選單中的 Go offline 選項。
  • 核取方塊。「重新載入時更新」核取方塊會強制 Service Worker 在每次載入網頁時更新。
  • 核取方塊。「略過網路」核取方塊會略過 Service Worker，並強制瀏覽器前往網路來滿足要求的資源。
  • 「網路要求」連結會將您導向「網路」面板，當中會列出與 Service Worker (is:service-worker-intercepted 篩選器) 相關的攔截要求。
  • 更新連結會對指定的 Service Worker 執行一次性更新。
  • 「推」按鈕會模擬推播通知，不帶酬載 (也稱為勾號)。
  • 「同步處理」按鈕可模擬背景同步處理事件。
  • 「Unregister」連結會取消註冊指定的 Service Worker。如要瞭解如何取消註冊 Service Worker，以及清除儲存空間和快取，請參閱清除儲存空間。
  • 「Source」行會告訴您目前執行中的 Service Worker 的安裝時間。連結是服務工作站來源檔案的名稱。點選連結將會前往服務工作站的來源。
  • 「Status」行會顯示 Service Worker 的狀態。這行的數字 (螢幕截圖中的 #16) 表示 Service Worker 已更新的次數。如果您啟用 核取方塊。「在重新載入時更新」核取方塊，將會發現每次載入網頁時，數字會增加。狀態旁邊會顯示 start 連結 (如果 Service Worker 已停止) 或 stop 連結 (如果 Service Worker 正在執行)。Service Worker 的設計可讓瀏覽器隨時停止及啟動。而使用 stop 連結明確停止服務工作站，就能模擬出此情況。停止 Service Worker 是測試服務工作站再次重新啟動時程式碼行為的好方法。這經常是因為對持續性全域狀態有錯誤假設而造成錯誤。
  • Clients 行會指出 Service Worker 的範圍。如果有多個已註冊的 Service Worker，焦點按鈕最實用。當您點選在另一個分頁執行的 Service Worker 旁的 [Focus] (聚焦) 按鈕，Chrome 會聚焦於該分頁。

  • 「Update Cycle」表格會顯示服務 worker 的活動和經過時間，例如安裝、等待和啟用時間。如要查看每個活動的確切時間戳記，請按一下 展開。「Expand」(展開) 按鈕。

    活動及其時間戳記。

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

如果 Service Worker 造成任何錯誤，「Service Workers」分頁標籤會顯示 發生錯誤。「Error」圖示，並在「Source」行旁邊顯示錯誤數量。這個連結會將您導向含有所有記錄錯誤的控制台。

控制台中的 Service Worker 錯誤。

如要查看所有 Service Worker 的相關資訊，請按一下「Service Workers」分頁標籤底部的「See all registrations」。此連結會前往 chrome://serviceworker-internals/?devtools，方便您進一步對服務工作站偵錯。

在 serviceworker-internals 的 Service Worker 註冊。

Service Worker 快取

「Cache Storage」分頁提供已使用 (服務工作站) Cache API 快取的資源唯讀清單。

「Service Worker 快取」分頁。

請注意，第一次開啟快取並在其中新增資源時，開發人員工具可能無法偵測到變更。重新載入網頁，您應該會看到快取。

如果您開啟兩個以上的快取，這些快取會列在 [快取儲存空間] 下拉式選單下方。

多個 Service Worker 快取。

配額使用量

「快取儲存空間」分頁中的部分回應可能會標記為「不透明」。這是指在未啟用 CORS 的情況下，從不同來源 (例如 CDN 或遠端 API) 擷取的回應。

為避免跨網域資訊外洩，在計算儲存空間配額限制 (例如是否擲回 QuotaExceeded 例外狀況) 以及由 navigator.storage API 回報時，在不透明回應中加入了明顯的邊框間距。

這項邊框間距的細節會因瀏覽器而異，不過對 Google Chrome 而言，這表示任何單一快取不透明回應計入整體儲存空間用量的「最小」大小約為 7 MB。在決定要快取的不透明回應數量時，請記住這點，因為以不透明資源的實際大小為基礎，很容易會比預期更快超出儲存空間配額限制。

相關指南：

清除儲存空間

開發漸進式網頁應用程式時，「清除儲存空間」分頁是相當實用的功能。只要在這個分頁中按一下，就能取消註冊 Service Worker，並清除所有快取和儲存空間。詳情請參閱以下章節。

相關指南：

其他應用程式面板指南

如要進一步瞭解「Application」面板的其他窗格，請參閱下列指南。

相關指南：