码迷,mamicode.com
首页 > Web开发 > 详细

js操作serviceWorker缓存静态文件

时间:2019-02-05 19:38:32      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:应用   console   request   height   set   pat   from   alert   match   

js操作serviceWorker缓存静态文件

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

  1. 先看下效果

    技术图片

  2. 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");
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <!-- <img src="./img/alt.png" > -->
        <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>
  3. 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‘
                            })
                        });
                    }
                })
        );
    })

js操作serviceWorker缓存静态文件

标签:应用   console   request   height   set   pat   from   alert   match   

原文地址:https://www.cnblogs.com/ye-hcj/p/10352974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!