PWA組成技術 Cache-API

// cache-api的使用
const CACHE_NAME = 'cache-v2' // 定義緩存名稱

// ServerWorker的生命週期，install、activate、fetch

// 發生在新的ServerWorker下載之後，只執行一次
self.addEventListener('install',event => {
    // caches.open 打開緩存
    event.waitUntil(caches.open(CACHE_NAME).then(cache => {
        cache.addAll([ // 添加緩存內容
            './',
            './index.css'
        ])
    }))
})
// 發生在新的ServerWorker被啓用之時，只執行一次
self.addEventListener('activate',event => {
    // 在activate中清理舊的cache 這是還要修改 cache的版本號 如：cache-v1 改爲 cache-v2
    event.waitUntil(caches.keys().then(cache(cacheNames => {
        event.waitUntil(caches.keys().then(cacheNames => {
            return Promise.all(cacheNames.map(cacheName => {
                if(cacheName !== CACHE_NAME) {
                    return caches.delete(cacheName);
                }
            }))
        }))
    })))
})
// 發生在每次接收請求
self.addEventListener('fetch',event => {
    // 在fetch中查看緩存
    
    event.respondWith(caches.open(CACHE_NAME).then(cache => {
        // 檢測是否有緩存的內容 match需要傳入一個request對象， event中有 request對象
        return cache.match(event.request).then(response => {
            if(response) { // 如果有response對象，則有緩存
                return response
            }
            // 如果沒有就再次請求
            return fetch(event.request).then(response => {
                // 其中 response爲流式的數據，需要克隆一份出來
                cache.put(event.request, response.clone());
                return response
            })
        })
    }))
})