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 的功能了 ：Ｄ