Progressive Web Application (PWA):Cache App Shell

前言

Progressive Web Application (PWA) 中的 Service Worker 就像是 Proxy 一樣，可以居中協調 Client 與 Server 間的行為。
一般通常是連到某個頁面時，一併將它 Cache 下來，也可以一開始時，就將全部的程式框架(App Shell)給 Cache 下來。

實作

設定要 CacheName 及 預先 cache 的檔案清單

以下程式都在 Service Worker JS 之中
另外，除了要 Cache 的檔案清單外，也可以指定某些檔案不要 Cache

var cacheName = 'PWASample-v1';
const CacheNames = [
    cacheName,
];
var appShellFiles = [
    'css/site.css',
    'assets/apple-icon-180x180.png',
    'lib/bootstrap/dist/css/bootstrap.min.css',
    'lib/jquery/dist/jquery.min.js',
    'lib/bootstrap/dist/js/bootstrap.bundle.min.js',
    'https://cdn.jsdelivr.net/npm/pwacompat',
    '/',
    '/Photo',
    '/Map',
    'v2.html'
];
var freshFileNames = [
    'sw.js',
    'swRegister.js',
    'manifest.json',
];

Service Worker Install 時，Cache 這些檔案

呼叫 cache.addAll(檔案清單Array) 就會將那些檔案加入 Cache 之中

self.addEventListener("install", (event) => {
    console.log('Cache appshell Files...');
    self.skipWaiting();
    const preCache = async () => {
        const cache = await caches.open(cacheName);
        return cache.addAll(appShellFiles);
    };
    event.waitUntil(preCache());
});

設定 Fetch 的策略

我們可以決定使用 Cache First(有 Cache 就不連到 Server 端取) or Network First(先到 Server端取，沒有才到 Cache 找)

const cacheFirstStrategy = async (request) => {
    const cacheResponse = await caches.match(request);
    return cacheResponse || fetchRequestandCache(request);
}

const networkFirstStrategy = async (request) => {
    try {
        return await fetchRequestandCache(request);
    } catch (ex) {
        console.log(ex);
        return await caches.match(request);
    }
}

const fetchRequestandCache = async (request) => {
    const networkResponse = await fetch(request);
    const clonedResponse = networkResponse.clone();
    const cache = await caches.open(cacheName);
    cache.put(request, networkResponse);
    return clonedResponse;
}

Fetch 時，依需要使用不同的策略

self.addEventListener('fetch', (event) => {
    const requestUrl = new URL(event.request.url);
    const requestPath = requestUrl.pathname;
    const fileName = requestPath.substr(requestPath.lastIndexOf('/') + 1);
    if (freshFileNames.indexOf(fileName) > -1 || 
        requestPath.indexOf('/api/') > -1) {
        return event.respondWith(fetch(event.request));
    };
    return event.respondWith(networkFirstStrategy(event.request));
})

清除其他 Cache

在 activate event 中將舊的 Cache 清除

self.addEventListener("activate", (event) => {
    console.log("From SW: Activate Event");
    self.clients.claim();
    const clearCache = async () => {
        const keys = await caches.keys();
        keys.forEach(async (k) => {
            if (CacheNames.includes(k)) {
                return;
            }
            await caches.delete(k);
        });
    };
    event.waitUntil(clearCache());
});

驗證

因為一開始就將各頁面 Cache 下來，所以可以發現雖然開啟第一頁，但實際上已 Fetch 其他的頁面進 Cache 了，

將 Chrome 網路設定成 Offline ，可發現先前瀏覽過的頁面，已經被 Cache 下來，所以還是可以正常顯示畫面。

測試範例請參考 PWA Sample.

參考資源

The Offline Cookbook
Browsers support and limitation towards PWA
PWA Sample