本文是《PWA學(xué)習(xí)與實(shí)踐》系列的第六篇文章床估。
PWA作為今年最火熱的技術(shù)概念之一，對提升Web應(yīng)用的安全谈况、性能和體驗(yàn)有著很大的意義递胧，非常值得我們?nèi)チ私馀c學(xué)習(xí)。
本系列文章《PWA學(xué)習(xí)與實(shí)踐》會逐步拆解PWA背后的各項(xiàng)技術(shù)祝闻，通過實(shí)例代碼來講解這些技術(shù)的應(yīng)用方式。也正是因?yàn)镻WA中技術(shù)點(diǎn)眾多华蜒、知識細(xì)碎豁遭，因此我在學(xué)習(xí)過程中，進(jìn)行了整理捂蕴，并產(chǎn)出了《PWA學(xué)習(xí)與實(shí)踐》系列文章闪幽，希望能帶大家全面了解PWA中的各項(xiàng)技術(shù)。對PWA感興趣的朋友歡迎關(guān)注盯腌。
前幾篇文章介紹了PWA中的一些功能與背后的技術(shù)。工欲善其事着倾，必先利其器燕少。這一篇會介紹如何調(diào)試我們的PWA。
對之前的文章感興趣的話崇决，可以從這里找到：
Service Worker
新版的chrome調(diào)試工具中集成了Service Worker調(diào)試工具沸手。
開啟chrome調(diào)試工具注簿，選擇Application選項(xiàng)卡。在左側(cè)的列表選擇Application --> Service Worker诡渴，就會顯示當(dāng)前站點(diǎn)下的Service Worker。
在Service Worker下有三個(gè)復(fù)選框：
- Offline：切換為無網(wǎng)環(huán)境山上。通過勾選可以方便查看應(yīng)用在無網(wǎng)環(huán)境中的表現(xiàn)英支。
- Update on reload：每次reload都更新Service Worker。一般來說，當(dāng)訪問站點(diǎn)發(fā)現(xiàn)Service Worker有更新后澈吨，為了保證本次訪問，不會立即激活新的Service Worker修赞，只會在安裝后進(jìn)入等待狀態(tài)桑阶，在下一次訪問時(shí)激活。勾選該選項(xiàng)就可以使每次Reload后都重新安裝與激活Service Worker割择。
- Bypass for network：使用網(wǎng)絡(luò)請求萎河。我們知道Service Worker可以攔截客戶端請求，勾選該選項(xiàng)后所有請求都會直接走網(wǎng)絡(luò)請求玛歌。
面板右上角的Upadte按鈕可以手動(dòng)觸發(fā)Service Worker的更新擎椰；而Unregister類似于代碼中的unregister，用于注銷當(dāng)前的Service Worker值朋。
從下方“Service workers from other domain”中休弃，可以查看在這個(gè)client上所有注冊過的Service Worker：
Service Worker主面板區(qū)域包括了：Source、Status篙骡、Clients、Push和Sync五個(gè)項(xiàng)目尿褪。
- Source：展示了當(dāng)前注冊所使用的Service Worker腳本（sw.js）杖玲，點(diǎn)擊可以查看腳本內(nèi)容淘正。同時(shí)還展示了該Service Worker的安裝時(shí)間。
- Status：展示Service Worker所處的生命周期鸿吆。通過點(diǎn)擊stop按鈕可以暫停該Service Worker。其中蕉毯，
#1201表示Service Worker的版本思犁，當(dāng)sw.js文件未更改時(shí)，reload站點(diǎn)該數(shù)字是不會增加的棉磨；但是當(dāng)勾選Update on reload后托呕，由于每次reload都會觸發(fā)Service Worker重新安裝，因此該數(shù)字會增加馅扣。 - Clients：顯示了當(dāng)前Service Worker所作用的root。focus按鈕用來幫你快速切換到該Service Worker對應(yīng)的tab（當(dāng)你打開多個(gè)站點(diǎn)的tab時(shí)差油，點(diǎn)擊可以快速切換）蓄喇。
- Push：用來模擬進(jìn)行推送。
- Sync：用來模擬進(jìn)行后臺同步妆偏。
在Service Worker中console.log的信息也會顯示在Console中盅弛。此外叔锐，由于默認(rèn)情況下愉烙，reload頁面會清空console解取，為了保存一些日志信息，可以打開Preserve log來保留Console信息蔓肯。
Manifest
在Application中振乏，點(diǎn)擊Manifest即可看到當(dāng)前應(yīng)用所使用的Manifest配置：
同樣昆码，點(diǎn)擊manifest.json出鏈接可以查看manifest文件赋咽。點(diǎn)擊“Add to homescreen”可以把應(yīng)用添加到桌面。除了點(diǎn)擊“Add to homescreen”脓匿，也可以使用chrome中的添加到應(yīng)用文件夾宦赠。
Cache
除了Service Worker與Manifest勾扭，在我們的WebApp中還用到了Cache。在Application中也支持查看Cache：在Cache列表的Cache Storage中查看妙色。
其中bs-0-2-0和api-0-1-1就是我們的“圖書搜索”Web App所創(chuàng)建與使用的兩個(gè)cache身辨。在bs-0-2-0中緩存了包括頁面、js号俐、css定庵、圖片在內(nèi)的一些靜態(tài)資源踪危；在而api-0-1-1中則緩存了圖書檢索的XHR請求找岖。
如果想刪除某些cache许布，可以右鍵點(diǎn)擊，然后選擇Delete蜜唾；也可以點(diǎn)擊上方的×。除了在這里清除cache擎勘，還可以在Application下的Clear Storage中清除包括Service Worker颖榜、Cache與Storage（cookie/localstorage/IndexedDB……）等數(shù)據(jù)。
寫在最后
如果你喜歡或想要了解更多的PWA相關(guān)知識噪漾，歡迎關(guān)注我且蓬，關(guān)注《PWA學(xué)習(xí)與實(shí)踐》系列文章。我會總結(jié)整理自己學(xué)習(xí)PWA過程的遇到的疑問與技術(shù)點(diǎn)诈胜，并通過實(shí)際代碼和大家一起實(shí)踐冯事。
在下一篇文章里，我們會繼續(xù)了解另一個(gè)經(jīng)常與Push API組合在一起的功能——消息提醒昵仅，Notification API。
《PWA學(xué)習(xí)與實(shí)踐》系列
- 第一篇：2018荚虚，開始你的PWA學(xué)習(xí)之旅
- 第二篇：10分鐘學(xué)會使用Manifest籍茧，讓你的WebApp更“Native”
- 第三篇：從今天起，讓你的WebApp離線可用
- 第四篇：TroubleShooting: 解決FireBase login驗(yàn)證失敗問題
- 第五篇：與你的用戶保持聯(lián)系: Web Push功能
- 第六篇：How to Debug? 在chrome中調(diào)試你的PWA（本文）
- 第七篇：增強(qiáng)交互：使用Notification API來進(jìn)行提醒
- 第八篇：使用Service Worker進(jìn)行后臺數(shù)據(jù)同步
- 第九篇：PWA實(shí)踐中的問題與解決方案
- 第十篇：Resource Hint - 提升頁面加載性能與體驗(yàn)（寫作中…）
