iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 23
0
Modern Web

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

Day 23 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache 應用

Service Worker 檔案可以自己寫也可以自動產生,昨天有介紹到 sw-precache,藉由 To-Do List 的案例,今天將分享要如何透過 sw-precache 生成 Service Worker 檔案取代原本有的 Service Worker 檔案。

來看原本的 Service Worker 檔案 - sw.js

const filesToCache = [
    '/',
    '/assets/images/btn_check.png',
    '/assets/images/btn_del.png',
    '/assets/images/ic_add.png',
    '/assets/images/logo_todo.png',
    '/src/main.css',
    '/index.html'
];
const cacheName = 'todolist-v1';
const dataCacheName = 'todolist-v1-data';

// install
self.addEventListener('install', event => {
    console.log('installing…');
    event.waitUntil(
        caches.open(cacheName).then(cache => {
            console.log('Caching app ok');
            return cache.addAll(filesToCache);
        })
    );
});

// activate
self.addEventListener('activate', event => {
    console.log('now ready to handle fetches!');
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            var promiseArr = cacheNames.map(function(item) {
                if (item !== cacheName) {
                    // Delete that cached file
                    console.log('[ServiceWorker] Removing Cached Files from Cache - ', item);
                    return caches.delete(item);
                }
            })
            return Promise.all(promiseArr);
        })
    ); // end event.waitUntil
})

// fetch
self.addEventListener('fetch', event => {
    console.log('now fetch!');
    event.respondWith(
        caches.match(event.request).then(function (response) {
            return response || fetch(event.request).then(res =>
                caches.open(dataCacheName)
                .then(function(cache) {
                    cache.put(event.request, res.clone());
                    return res;
                })
            );
        })
    );
})


sw-precache 的檔案設定

本範例在根目錄底下新增 sw-precache-config.js
參考官方文件 實作基本 config:

  • staticFileGlobs
  • runtimeCaching
    • urlPattern
    • handler
  • swFile

設定 sw-precache-config.js 檔案如下:

module.exports = {
  staticFileGlobs: [
    'index.html',
    'src/main.css',
    'assets/images/**.*'
  ],
  runtimeCaching: [{
    urlPattern: /this\\.is\\.a\\.regex/,
    handler: 'networkFirst'
  }],
  swFile: 'sw-generated.js'
};

對比原本的 sw.js 檔案,可以發現 staticFileGlobs 是用來設定 Default Cache 檔案。

所以原本的 sw.js 檔案是:

const filesToCache = [
    '/',
    '/assets/images/btn_check.png',
    '/assets/images/btn_del.png',
    '/assets/images/ic_add.png',
    '/assets/images/logo_todo.png',
    '/src/main.css',
    '/index.html'
]

sw-precache-config.js 改成:

staticFileGlobs: [
    'index.html',
    'src/main.css',
    'assets/images/**.*'
  ]  

sw-precache 如何執行?

sw-precache --config=path/to/sw-precache-config.js --verbose  

本案例為:

sw-precache --config=./src/sw-precache-config.js --verbose

sw-precache 執行結果

從執行結果發現,已成功自動產生 sw-generated.js 檔案,並且也 precache 6 個resources,precache 8.61 kB 的檔案大小。

從 Chrome DevTools 裡觀察,也有 Cache 的紀錄 :

經過測試 => 將網站設定為離線模式、也可以順利瀏覽,也確定已經成功使用自動產生sw-generated.js 檔案,完成 Service Worker 的功能了 :D


上一篇
Day 22 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache 簡介
下一篇
Day 24 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 簡介
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言