js操作serviceWorker缓存静态文件

serviceWorker的作用就是用来做离线应用的，在手机端程序中用的较多

先看下效果

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            background-image: url("./img/alt.png");
             100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- <img src="./img/alt.png" alt=""> -->
    <div class="box"></div>
    <script>
        if(navigator.serviceWorker) {
            navigator.serviceWorker.register('./sw.js').then(function(res){
                console.log(res.scope + "->" + "service worker注册成功");
            }).catch(function(err){
                console.log(err);
            })
        }else{
            alert("你的浏览器不支持serviceWorker");
        }
    </script>
</body>
</html>

sw.js

var version = "v1::"; // 设置版本号

self.addEventListener("install", function (event) { // serviceworker第一次加载的时候调用，可以在此时缓存静态资源
    event.waitUntil(
        // caches帮助我们缓存资源
        caches
            .open(version + 'fundamentals')
            .then(function (cache) {
                // 将列出的文件缓存起来
                return cache.addAll([
                    '/',
                    '/img/alt.png'
                ]);
            })
            .then(function () {
                console.log('缓存完毕');
            })
    );
});

self.addEventListener('activate', function (event) { // install方法调用完毕后就调用此方法，主要用来删除过期的缓存

    event.waitUntil(
        caches
            // keys方法用来获取缓存版本号
            .keys()
            .then(function (keys) {
                // 下面的方法用来删除不是以version开头的缓存版本
                return Promise.all(
                    keys
                        .filter(function (key) {
                            return !key.startsWith(version);
                        })
                        .map(function (key) {
                            return caches.delete(key);
                        })
                );
            })
            .then(function () {
                console.log('WORKER: 激活完毕.');
            })
    );
})

self.addEventListener('fetch', function (event) { // 请求外部资源时调用

    // 只捕获get请求
    if (event.request.method !== 'GET') {
        // 只让get请求去缓存中查找
        console.log('WORKER: 被拦截的api.', event.request.method, event.request.url);
        return;
    }

    // 让get请求取缓存中查找资源
    event.respondWith(
        caches
            .match(event.request)
            .then(function (cached) {
                // 将缓存中的资源立即返回，并且同时去服务器下载最新的资源存到缓存中
                var networked = fetch(event.request)
                    .then(fetchedFromNetwork, unableToResolve)
                    .catch(unableToResolve);

                // 通过caches.match这个方法，如果缓存中有资源，直接就返回了，如果没有转向网络
                console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url);
                return cached || networked;

                function fetchedFromNetwork(response) {
                    // 从网络中加载资源
                    var cacheCopy = response.clone();
                    console.log('WORKER: 从网络中拉取的资源地址.', event.request.url);
                    caches
                        // 存储资源
                        .open(version + 'pages')
                        .then(function add(cache) {
                            cache.put(event.request, cacheCopy);
                        })
                        .then(function () {
                            console.log('WORKER: 从网络中拉取的资源已经缓存', event.request.url);
                        });
                    return response;
                }

                // 既不能从网络中获取资源又不能从缓存中获取，就会调用此方法
                function unableToResolve() {
                    console.log('WORKER: 获取资源失败.');
                    return new Response('<h1>Service Unavailable</h1>', {
                        status: 503,
                        statusText: 'Service Unavailable',
                        headers: new Headers({
                            'Content-Type': 'text/html'
                        })
                    });
                }
            })
    );
})

相关阅读:
learning scala view collection
scala
learning scala dependency injection
learning scala implicit class
learning scala type alise
learning scala PartialFunction
learning scala Function Recursive Tail Call
learning scala Function Composition andThen
System.Threading.Interlocked.CompareChange使用
 System.Threading.Monitor的使用
原文地址：https://www.cnblogs.com/ye-hcj/p/10352974.html