# 調試PWA 使用 Application 面板檢查、修改和調試網絡應用清單、服務工作線程和服務工作線程緩存。 相關指南： * Progressive Web App 本指南僅討論 **Application** 面板的 Progressive Web App 功能。 如果您希望獲得其他面板的幫助，請參閱本指南的最后一部分，即[其他 Application 面板指南](https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#other)。 <br> 總結 * 使用 **App Manifest** 面板檢查您的網絡應用清單和觸發 Add to Homescreen 事件。 * 使用 **Service Worker** 面板執行與Service Worke相關的全部任務，例如注銷或更新服務、模擬推送事件、切換為離線狀態，或者停止服務工作線程。 * 從 **Cache Storage** 面板查看您的Service Worke緩存。 * 從 **Clear Storage** 面板中點擊一次按鈕，注銷Service Worke并清除所有存儲與緩存。 ## 網絡應用清單 如果您希望用戶能夠將您的應用添加到他們移動設備的主屏幕上，那么您需要一個網絡應用清單。 清單定義應用在主屏幕上的外觀、從主屏幕啟動時將用戶定向到何處，以及應用在啟動時的外觀。 相關指南： [通過網絡應用清單改進用戶體驗](https://developers.google.com/web/fundamentals/web-app-manifest/) [使用應用安裝橫幅](https://developers.google.com/web/fundamentals/app-install-banners) 設置好清單后，您可以使用 Application 面板的 Manifest 面板對其進行檢查。  * 要查看清單來源，請點擊 **App Manifest** 標簽下方的鏈接（上方屏幕截圖中的 https://airhorner.com/manifest.json）。 * 按 **Add to homescreen** 按鈕模擬 Add to Homescreen 事件。 如需了解詳細信息，請參閱下一部分。 * **Identity** 和 **Presentation** 部分以一種對用戶更加友好的方式顯示了清單來源中的字段。 * **Icons** 部分顯示了您已指定的每一個圖標。 ### 模擬 Add to Homescreen 事件 只有至少已經訪問網站兩次、訪問至少間隔五分鐘時才可以將網絡應用添加到主屏幕上。 開發或調試您的 Add to Homescreen 工作流時，此條件非常不便。利用 App Manifest 窗格上的 Add to homescreen 按鈕，您可以隨時模擬 Add to Homescreen 事件。 您可以使用 [Google I/O 2016 Progressive Web App](https://events.google.com/io2016/) 測試此功能，該應用可以為 Add to Homescreen 提供相應支持。在應用打開時點擊 **Add to Homescreen** 會提示 Chrome 顯示“add this site to your shelf”橫幅（桌面設備），而在移動設備上則會顯示“add to homescreen”橫幅。  **提示**：在模擬 Add to Homescreen 事件時請保持 **Console** 抽屜式導航欄處于打開狀態。 Console 會告訴您清單是否存在任何問題，并記錄與 Add to Homescreen 生命周期有關的其他信息。 **Add to Homescreen** 功能還不能模擬移動設備的工作流。 注意“add to shelf”提示在上方屏幕截圖中的觸發方式（即使 DevTools 處于 Device Mode）。 不過，如果您可以將應用成功添加到桌面設備文件架，那么在移動設備上也可以獲得成功。 如果您希望測試真實的移動體驗，則可以通過遠程調試將一臺真實的移動設備連接到 DevTools，然后點擊 DevTools 上的 **Add to Homescreen**按鈕，在連接的移動設備上觸發“add to homescreen”提示。 <br> ## service worker service worker是未來網絡平臺中的一種基礎技術。它們是瀏覽器獨立于網頁在后臺運行的腳本。這些腳本使您可以訪問不需要網頁或用戶交互的功能，例如推送通知、后臺同步和離線體驗。 相關指南： * [服務工作線程簡介](https://developers.google.com/web/fundamentals/primers/service-worker) * [推送通知：及時、相關且精確](https://developers.google.com/web/fundamentals/push-notifications) **Application** 面板中的 **Service Workers** 面板是在 DevTools 中檢查和調試service worker的主要地方。  * 如果service worker已安裝到當前打開的頁面上，您會看到它將列示在此面板中。 例如，在上方的屏幕截圖中，https://events.google.com/io2016/ 的作用域內安裝了一個service worker。 * **Offline** 復選框可以將 DevTools 切換至離線模式。它等同于 Network 窗格中的離線模式，或者 Command Menu 中的 Go offline 選項。 * **Update on reload** 復選框可以強制service worker在每次頁面加載時更新。 * **Bypass for network** 復選框可以繞過service worker并強制瀏覽器轉至網絡尋找請求的資源。 * **Update** 按鈕可以對指定的service worker執行一次性更新。 * **Push** 按鈕可以在沒有負載的情況下模擬推送通知（也稱為操作消息）。 * **Sync** 按鈕可以模擬后臺同步事件。 * **Unregister** 按鈕可以注銷指定的service worker。參閱清除存儲，了解點擊一次按鈕即可注銷服務工作線程并擦除存儲和緩存的方式。 * **Source** 行可以告訴您當前正在運行的service worker的安裝時間。 鏈接是service worker源文件的名稱。點擊鏈接會將您定向至service worker來源。 * **Status** 行可以告訴您service worker的狀態。此行上的數字（上方屏幕截圖中的 #1）指示service worker已被更新的次數。如果啟用 update on reload 復選框，您會注意到每次頁面加載時此數字都會增大。在狀態旁邊，您將看到 start 按鈕（如果service worker已停止）或 stop 按鈕（如果service worker正在運行）。service worker設計為可由瀏覽器隨時停止和啟動。 使用 stop 按鈕明確停止service worker可以模擬這一點。停止服務工作線程是測試service worker再次重新啟動時的代碼行為方式的絕佳方法。它通常可以揭示由于對持續全局狀態的不完善假設而引發的錯誤。 * **Clients** 行可以告訴您service worker作用域的原點。 如果您已啟用 show all 復選框，focus 按鈕將非常實用。 在此復選框啟用時，系統會列出所有注冊的service worker。 如果您點擊正在不同標簽中運行的service worker旁的 focus 按鈕，Chrome 會聚焦到該標簽。 如果service worker導致任何錯誤，將顯示一個名為 **Errors** 的新標簽。  <br> ## service worker緩存 Cache Storage 面板提供了一個已使用（service worker）Cache API 緩存的只讀資源列表。  請注意，第一次打開緩存并向其添加資源時，DevTools 可能檢測不到更改。 重新加載頁面后，您應當可以看到緩存。 如果您打開了兩個或多個緩存，您將看到它們列在 Cache Storage 下拉菜單下方。  <br> ## 清除存儲 開發 Progressive Web App 時，Clear Storage 面板是一個非常實用的功能。 利用此面板，只需點擊一次按鈕即可注銷service worker并清除所有緩存與存儲。 參閱下面的部分了解詳情。 相關指南： * [清除存儲](https://developers.google.com/web/tools/chrome-devtools/iterate/manage-data/local-storage#clear-storage) <br> ## 其他 Application 面板指南 參閱下面的部分，獲取有關 Application 面板其他窗格的更多幫助。 相關指南： * [檢查頁面資源](https://developers.google.com/web/tools/chrome-devtools/iterate/manage-data/page-resources) * [檢查和管理本地存儲與緩存](https://developers.google.com/web/tools/chrome-devtools/iterate/manage-data/local-storage) <br> ## 參考資料 * [調試 Progressive Web App](https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps)