iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

30天走訪Progressive Web Apps(PWAs) 系列

網頁的世界從簡單的HTML一路變得越來越複雜(CSS、JS、RWD等等),想要滿足使用者的需求,
我們就必須不斷的學習,深入PWAs除了學習它有趣的特色以外,我們應該不停地思考,
是否真的需要新技術與這個技術所解決的目的是否真的是我們所需要的,
才不會讓自己誤入盲從的境地,透過這30天深入了解PWAs概念與實作來深入學習它有趣的地方。

鐵人鍊成 | 共 30 篇文章 | 95 人訂閱 訂閱系列文 RSS系列文 團隊神功護體
DAY 11

Day11-Cache API 能使用的其他方法

快取 '/' event.waitUntil( caches.open('static') .then(function(cach...

2017-12-28 ‧ 由 DK.Harry 分享
DAY 12

Day12-Cache API之動態快取

動態快取資源 目前為止,從生命週期install時,已經預先快取固定要使用的資源(static),但是,有些資源並不需要在載入頁面的時候全部快取,因為不是所有資...

2017-12-29 ‧ 由 DK.Harry 分享
DAY 13

Day13-Cache API刪除舊快取

刪除舊的快取 昨日聊到當新舊快取同時存在,在抓取相同資源時,會有版本問題。因此我們可以試著當有更新快取內容,觸發activate時,對快取進行比對,如果比對快取...

2017-12-30 ‧ 由 DK.Harry 分享
DAY 14

Day14-Cache API-策略篇之一

Cache Only 簡而言之,就是只載入固定不變的資源,除了在install快取的資源以外,不再動態新增快取內容。 在install的時候,專案已經預先載入l...

2017-12-31 ‧ 由 DK.Harry 分享
DAY 15

Day15-Cache API-策略篇之二

Cache with Network Fallback 這策略是用再Offline-first,字面意思就是離線資源優先詢問,如果沒有match到資源,就詢問N...

2018-01-01 ‧ 由 DK.Harry 分享
DAY 16

Day16-Cache Offline Page擊退小恐龍之最後一擊

學會使用Cache API後,默默的我們已經能搭配,Fetch API來實現Service Worker的Offline特色,從前面幾天中,我們在載入頁面之後,...

2018-01-02 ‧ 由 DK.Harry 分享
DAY 17

Day17-動態取得資料(Daynamic Data之使用Firebase實作)

再進入IndexDB之前,讓我們先將目前專案只能用寫死的程式的文章,改用動態抓取資料庫的方式,來顯示文章。因此我們需要一個可以架資料的雲端空間,所以我始用fir...

2018-01-03 ‧ 由 DK.Harry 分享
DAY 18

Day18-使用idb實作IndexedDB

用途 用來儲存資料到用戶端的瀏覽器。IndexedDB適合用來儲存大量非結構式的資料。 非結構式的意思就是不限定格式,使用起來就像javascript中的ob...

2018-01-04 ‧ 由 DK.Harry 分享
DAY 19

Day19-IndexedDB之抽成共用檔案

前一天,我們再Service Worker中,導入IndexedDB API來存取文章,但是我們少改在app.js中,fetch cache API資源的部分。...

2018-01-05 ‧ 由 DK.Harry 分享
DAY 20

Day20-IndexedDB之流程統整

加入IndexedDB時提到它適合頻繁改變的內容,那麼我們到firebase上,加入第二筆文章,看頁面的變化。 測試一: 加入第二筆資料 到firebase/...

2018-01-06 ‧ 由 DK.Harry 分享