重識 PWA 高階到 workbox3

看到pwa，似曾相識，但又感覺很模糊，於是乎，又重新翻閱文件，學習了一遍，順便把相關知識學習了一下，比如service worker,workbox3。

首先在index.html的head中引入manifest.json檔案，盡可能早的引入

,

,  ,]}

最主要的特點：

瀏覽器支援情況：

生命週期

解析成功(parsed)、正在安裝(installing)、安裝整個(installed)、正在啟用(activating)、啟用成功(activated)、廢棄(redundant)

若 installing 事件失敗或 activeing 事件失敗，service worker 都會被廢棄。

實現離線快取

首先在index.html中註冊sw.js

var cachestoragekey = 'cachesname'

var cachelist = [
// 註冊成功後要立即快取的資源列表
]// 當瀏覽器解析完sw檔案時觸發install事件
self.addeventlistener('install', function(e) )
)})// 啟用時觸發activate事件
self.addeventlistener('activate', function(e)  else 
}));
});e.waituntil(
promise.all([cachedeletepromises])
)})self.addeventlistener('fetch', function(e) )

// 首先引入workbox框架

importscripts('');
workbox.precaching([
// 註冊成功後要立即快取的資源列表
])// 快取策略: networkfirst、cachefirst、stalewhilerevalidate
);

快取策略：

總結：pwa的優勢和存在的問題

參考文件

vue筆記九：pwa技術在vue的使用(workbox/sw-precache)

workbox 3.0 – web 站點輕鬆做到離線可訪問

路由請求快取

路由請求快取策略

自定義策略

第三方請求的快取

workbox 配置

workbox 外掛程式

自定義外掛程式

webpack 中使用 workbox 實現 pwa

workbox3 - serviceworker可以如此簡單

service worker 生命週期

重識物件導向

最近的學習進行到了uml階段。上來的第一節課就是講的物件導向。很早以前公尺老師上課的時候就給我們講過了，雖然只是簡單的講解，但現在看起來還是讓我覺得受益匪淺。現在來談談我自己的理解 物件導向是一種軟體開發方法，是一種對現實世界理解和抽象的方法。既然是物件導向。那這個物件是什麼呢？物件其實就是我們要進...

HashMap 原始碼重識

hashmap 重要的變數 預設的初始容量 static final int default initial capacity 1 4 aka 16 最大的容量，且必須是2的倍數 static final int maximum capacity 1 30 預設的負載因子 static final ...

CSS3 邊框重識

border border width border style border color 三個屬性沒有先後順序，其中，border style為必需。border width預設值為 medium 大約3 4px 好噠 試試利用border製作三角形 原來 如果寬度和高度為0，border也可以組...