iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
3
Modern Web

30 天 Progressive Web App 學習筆記系列 第 11

Day 11 - 30 天 Progressive Web App 學習筆記 - Chrome devTools - Introducing the Application tab

打造 Progressive Web App 必須建立許多核心技術,包括 Service Workers 和 Web App Manifests 並搭配 Cache Storage API, IndexedDB 和 Push Notifications 等等,於是 Chrome DevTools 新增 Application 面板,讓開發者能夠更輕鬆檢查或管理這些技術的資訊。

打開 Chrome devTools 點選 Application tab,就可以檢查和管理 ApplicationStorageCache 等資訊

Application 裡面有:

  • Manifest
  • Service Workers
  • Clear storage

Manifest

點選下圖左側的 Manifest 項目,我們可以看到右側顯示 manifest.json 文件的相關資訊,包括應用程式名稱、起始 URL、圖示等。

而下圖右側有一個 Add to homescreen 的按鈕,點擊後你可以模擬將網站添加到行動裝置主屏幕的體驗。

Service Workers

點選 Service Workers 項目,右側有一排複選框,分別介紹如下:

  • Offline
    • 可以模擬無網路連線的環境。
    • 通常我們會拿來測試 Service Workers 『離線瀏覽網站』的需求是否成功。
  • Update on reload
    • 如果開發者更新 service-worker.js,則新的 Service Workers 將會直接取代原本的 Service Workers。
  • Bypass for network
    • 強迫瀏覽器忽略 Service Workers,直接從 network 獲取資源。
    • 如果你擔心 Service Worker 的快取將會返回舊的資源,則可以勾選這個項目,避免顯示舊的內容。
  • Show all
    • 顯示所有 Service Workers 的名單 //todo

如果當前有 Service Workers,則在 Offline、Update on reload...這一排複選框的下方會顯示 Service Workers 相關資訊,例如: Status 提供 Service Workers 的當前狀態,如果有成功執行 installactivate 的事件,則會顯示綠色的圓形圖示代表一切運作正常。

self.addEventListener('install', function(event) {
  console.log('Service Worker installing.');
});

self.addEventListener('activate', function(event) {
  console.log('Service Worker activating.');  
});

下圖為有 2 個 Service Workers 的情形,#23257 是新的 Service Worker,目前處於等待狀態。

當我們在修改 service-worker.js 檔案的時候,我們要怎麼搭配 Chrome devTools 做使用?

情境如下:
當我們要更新 service-worker.js 檔案之前,打開 DevTools Application 面板,點選 Service Workers,將右側的 Update on reload 複選框打勾,如此一來就不需要點選 skipWaiting 選項,就可以確保當前 Service Worker 是最新的。

重新整理頁面之後,會發現如下圖的 Error,但其實只是警告你舊的 Service Workers 將會強制更新。

Cache

查看 Cache

點選 Cache Storage 內的 Cache ID,即可查看 Cache 資訊:

可以在 Cache ID 上方點擊右鍵後選擇刪除 Cache

進入 Clear storage,你可以一次勾選想要清除的資料,就能夠直接刪除對應的資源,像是 Service Workers,Local Storage, Session Storage, IndexedDB, Web SQL, Cookies, 和 Application Cache 等等。


今日小結

本篇介紹使用 Chrome devTools 去操作並檢視 Manifest、Service Worker 、 Cache 的資訊。


參考文件


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 10 - 30 天 Progressive Web App 學習筆記 - Service Work 簡介
下一篇
Day 12 - 30 天 Progressive Web App 學習筆記 - PWA 案例介紹
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言