https://diary.lilonghe.net 已经用上了，可以看看

WHY

1. 不需要再搞APP了
2. 减轻服务器压力，客户端加载速度，毕竟小水管啊
3. 潮流啊喂 出去找工作不管用不用，得先看你会不会

HOW

开始我们会有一些疑问，比如怎么缓存的， 怎么更新缓存

register

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function (err) {
        console.log('ServiceWorker registration failed: ', err);
    });
}

unregister

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for(let registration of registrations) {
        registration.unregister()
    }})
}

manifest.json

配置项目的属性， 比如名称啊，图标啊 balabala 之类的

service worker

这里比较关键的是， 别忘了保留控制手段

install

这个事件里面缓存你需要缓存的东西

self.addEventListener('install', event => {  
    event.waitUntil(
        caches.open(cacheName)                   
            .then(cache => cache.addAll([
                '/index.html',
                '/index.js'
            ]))
    );
});

fetch

拦截请求
同样的， 你可以在这里拦截请求进行缓存或者从缓存里读取返回回来
下这个示例就是拦截了所有的普通文件请求，但没有拦截 xhr 请求

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                if (response) {
                    return response;
                }
                var fetchRequest = event.request.clone();

                return fetch(fetchRequest).then(
                    function(response) {
                        if(!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                        var responseToCache = response.clone();

                        caches.open(cacheName)
                            .then(function(cache) {
                                cache.put(event.request, responseToCache);
                            });

                        return response;
                    }
                );
            })
    );
});