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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

  • 即使網路連線不穩定，也能穩定運作。
  • 可安裝在作業系統的啟動介面，例如 Mac OS X 的「應用程式」資料夾、Windows 的「開始」選單，以及 Android 和 iOS 的主畫面。
  • 顯示在活動切換器、Spotlight 等裝置搜尋引擎，以及內容分享工作表中。

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

摘要

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

網頁應用程式資訊清單

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

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

「資訊清單」分頁。

  • 如要查看資訊清單來源，請按一下下方的「應用程式資訊清單」標籤 (上圖中的 manifest.webmanifest)。
  • 「身分」和「呈現方式」部分只會以更簡單易懂的方式，顯示資訊清單來源中的欄位。
  • 在「通訊協定處理常式」部分，只要按一下按鈕，即可測試 PWA 的網址通訊協定處理常式註冊。 詳情請參閱「測試網址通訊協定處理常式註冊」。
  • 「圖示」Icons部分會顯示您指定的所有圖示，並讓您檢查遮罩。
  • 「快速鍵 #N」部分會顯示所有快速鍵物件的資訊。
  • 「螢幕截圖 #N」部分會顯示應用程式的螢幕截圖，讓安裝使用者介面更豐富。

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

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

查看及檢查可遮蓋的圖示

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

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

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

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

觸發條件安裝

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

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

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

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

    「安裝」按鈕。

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

「安裝應用程式」 (或部分裝置上的「新增至主畫面」) 功能無法模擬行動裝置的工作流程。請注意，即使開發人員工具處於裝置模式，電腦版 Chrome 瀏覽器仍會在網址列中顯示安裝按鈕。不過，如果應用程式能順利新增至桌面，也能在行動裝置上運作。

如要測試真正的行動版體驗，可以透過遠端偵錯將實體行動裝置連線至開發人員工具。如要在已連結的行動裝置上觸發安裝程序，請開啟 三點圖示選單。 三點選單，然後按一下「安裝應用程式」「安裝應用程式」按鈕。 (或「新增至主畫面」)。

檢查快速鍵

應用程式捷徑可讓使用者快速存取幾個常用的動作。

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

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

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

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

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

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

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

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

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

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

如果處理常式成功處理連結，應用程式中就會顯示咖啡杯圖片。

Service Worker

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

相關指南：

「應用程式」面板中的「Service Workers」分頁是檢查及偵錯 Service Worker 的主要位置。

「Service Worker」分頁標籤。

  • 如果目前開啟的網頁已安裝 Service Worker，這個分頁就會列出該 Service Worker。舉例來說，在上述螢幕截圖中，已為 https://airhorner.com/ 範圍安裝 Service Worker。
  • 勾選「離線」核取方塊。 核取方塊，即可將開發人員工具設為離線模式。這等同於「Network」面板提供的離線模式，或是「Command Menu」中的 Go offline 選項。
  • 勾選「重新載入時更新」核取方塊。核取方塊後，Service Worker 會在每次載入網頁時強制更新。
  • 勾選「網路旁路」核取方塊。核取方塊，即可略過 Service Worker，並強制瀏覽器前往網路尋找要求的資源。
  • 點選「網路要求」連結，即可前往「網路」面板，查看與 Service Worker 相關的攔截要求清單 (is:service-worker-intercepted 篩選器)。
  • 「更新」連結會對指定的 Service Worker 執行一次性更新。
  • 「推送」按鈕會模擬不含酬載的推送通知 (也稱為「提醒」)。
  • 「同步」按鈕會模擬背景同步事件。
  • 點選「取消註冊」連結，即可取消註冊指定的 Service Worker。如要取消註冊 Service Worker，並按一下按鈕即可清除儲存空間和快取，請參閱「清除儲存空間」。
  • 「來源」行會顯示目前執行的 Service Worker 安裝時間。連結是服務工作人員來源檔案的名稱。按一下連結會將您帶往 Service Worker 的來源。
  • 「狀態」行會顯示 Service Worker 的狀態。這條線上的數字 (螢幕截圖中的 #16) 代表 Service Worker 的更新次數。如果啟用「重新載入時更新」核取方塊。核取方塊，您會發現每次載入網頁時，數字都會遞增。狀態旁邊會顯示「開始」連結 (如果 Service Worker 已停止運作)，或是「停止」連結 (如果 Service Worker 正在運作)。瀏覽器隨時可以停止及啟動 Service Worker。使用 stop 連結明確停止 Service Worker，即可模擬這種情況。停止 Service Worker 是測試程式碼行為的好方法，可瞭解 Service Worker 重新啟動時的行為。由於對持續性全域狀態的假設有誤，因此經常會發現錯誤。
  • 「用戶端」行會顯示 Service Worker 的範圍來源。如果您註冊了多個服務工作人員，焦點按鈕就非常實用。如果點選在其他分頁中執行的 Service Worker 旁邊的「焦點」按鈕，Chrome 會將焦點放在該分頁上。

  • 「更新週期」表格會顯示 Service Worker 的活動和經過時間，例如安裝、等待和啟用。 如要查看每項活動的確切時間戳記，請按一下「展開」展開。按鈕。

    活動和時間戳記。

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

如果 Service Worker 導致任何錯誤，「Service Workers」分頁會顯示 發生錯誤。「Error」圖示，且「Source」行旁邊會顯示錯誤數量。 點選連結和數字後，系統會將您帶往 控制台，當中會列出所有記錄的錯誤。

主控台中的 Service Worker 錯誤。

如要查看所有服務工作人員的資訊，請按一下「Service Workers」(服務工作人員) 分頁底部的「See all registrations」(查看所有註冊)。這個連結會將您導向 chrome://serviceworker-internals/?devtools，您可以在這裡進一步偵錯 Service Worker。

serviceworker-internals 的 Service Worker 註冊。

Service Worker 快取

「快取儲存空間」分頁會列出使用 (Service Worker) Cache API 快取的資源，但您只能讀取這些資源。

Service worker 快取分頁。

請注意，首次開啟快取並在其中新增資源時，開發人員工具可能不會偵測到變更。重新載入頁面，應該就會看到快取。

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

多個 Service Worker 快取。

配額用量

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

為避免跨網域資訊外洩，系統會大幅增加用於計算儲存空間配額限制 (即是否擲回 QuotaExceeded 例外狀況) 的不透明回應大小，並由 navigator.storage API 報告。

這項填補的詳細資料因瀏覽器而異，但就 Google Chrome 而言，這表示任何單一快取不透明回應對整體儲存空間用量的最低貢獻度為約 7 MB。決定要快取多少不透明的回應時，請務必留意這點，因為您可能會比預期更快超出儲存空間配額限制，而這取決於不透明資源的實際大小。

相關指南：

清除儲存空間

開發漸進式網頁應用程式時，「清除儲存空間」分頁標籤是非常實用的功能。您可以在這個分頁中取消註冊 Service Worker，並按一下按鈕清除所有快取和儲存空間。詳情請參閱下節說明。

相關指南：

其他「應用程式」面板指南

如需「應用程式」面板其他窗格的說明，請參閱下列指南。

相關指南：