【PWA學習與實踐】(6) 在Chrome中調試你的PWA

時間 2019-12-04

標籤 PWA學習與實踐 chrome 調試 pwa 欄目 Chrome 简体版

原文原文鏈接

《PWA學習與實踐》系列文章已整理至 gitbook - PWA學習手冊，文字內容已同步至 learning-pwa-ebook。轉載請註明做者與出處。

本文是《PWA學習與實踐》系列的第六篇文章。css

PWA做爲時下最火熱的技術概念之一，對提高Web應用的安全、性能和體驗有着很大的意義，很是值得咱們去了解與學習。對PWA感興趣的朋友歡迎關注《PWA學習與實踐》系列文章。git

前幾篇文章介紹了PWA中的一些功能與背後的技術。工欲善其事，必先利其器。這一篇會介紹如何調試咱們的PWA。github

Service Worker

新版的chrome調試工具中集成了Service Worker調試工具。chrome

開啓chrome調試工具，選擇Application選項卡。在左側的列表選擇Application --> Service Worker，就會顯示當前站點下的Service Worker。json

在Service Worker下有三個複選框：api

Offline：切換爲無網環境。經過勾選能夠方便查看應用在無網環境中的表現。
Update on reload：每次reload都更新Service Worker。通常來講，當訪問站點發現Service Worker有更新後，爲了保證本次訪問，不會當即激活新的Service Worker，只會在安裝後進入等待狀態，在下一次訪問時激活。勾選該選項就可使每次Reload後都從新安裝與激活Service Worker。
Bypass for network：使用網絡請求。咱們知道Service Worker能夠攔截客戶端請求，勾選該選項後全部請求都會直接走網絡請求。

面板右上角的Upadte按鈕能夠手動觸發Service Worker的更新；而Unregister相似於代碼中的unregister，用於註銷當前的Service Worker。緩存

從下方「Service workers from other domain」中，能夠查看在這個client上全部註冊過的Service Worker：安全

Service Worker主面板區域包括了：Source、Status、Clients、Push和Sync五個項目。cookie

Source：展現了當前註冊所使用的Service Worker腳本（sw.js），點擊能夠查看腳本內容。同時還展現了該Service Worker的安裝時間。
Status：展現Service Worker所處的生命週期。經過點擊stop按鈕能夠暫停該Service Worker。其中，#1201表示Service Worker的版本，當sw.js文件未更改時，reload站點該數字是不會增長的；可是當勾選Update on reload後，因爲每次reload都會觸發Service Worker從新安裝，所以該數字會增長。
Clients：顯示了當前Service Worker所做用的root。focus按鈕用來幫你快速切換到該Service Worker對應的tab（當你打開多個站點的tab時，點擊能夠快速切換）。
Push：用來模擬進行推送。
Sync：用來模擬進行後臺同步。

在Service Worker中console.log的信息也會顯示在Console中。此外，因爲默認狀況下，reload頁面會清空console，爲了保存一些日誌信息，能夠打開Preserve log來保留Console信息。網絡

Manifest

在Application中，點擊Manifest便可看到當前應用所使用的Manifest配置：

一樣，點擊manifest.json出連接能夠查看manifest文件。點擊「Add to homescreen」能夠把應用添加到桌面。除了點擊「Add to homescreen」，也可使用chrome中的添加到應用文件夾。

Cache

除了Service Worker與Manifest，在咱們的WebApp中還用到了Cache。在Application中也支持查看Cache：在Cache列表的Cache Storage中查看。

其中bs-0-2-0和api-0-1-1就是咱們的「圖書搜索」Web App所建立與使用的兩個cache。在bs-0-2-0中緩存了包括頁面、js、css、圖片在內的一些靜態資源；在而api-0-1-1中則緩存了圖書檢索的XHR請求。

若是想刪除某些cache，能夠右鍵點擊，而後選擇Delete；也能夠點擊上方的×。除了在這裏清除cache，還能夠在Application下的Clear Storage中清除包括Service Worker、Cache與Storage（cookie/localstorage/IndexedDB……）等數據。