js操作serviceWorker缓存静态文件

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

  1. 先看下效果

  2. index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.         .box{
    10.             background-image: url("./img/alt.png");
    11.             width: 100px;
    12.             height: 100px;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <!-- <img src="./img/alt.png" alt=""> -->
    18.     <div class="box"></div>
    19.     <script>
    20.         if(navigator.serviceWorker) {
    21.             navigator.serviceWorker.register('./sw.js').then(function(res){
    22.                 console.log(res.scope + "->" + "service worker注册成功");
    23.             }).catch(function(err){
    24.                 console.log(err);
    25.             })
    26.         }else{
    27.             alert("你的浏览器不支持serviceWorker");
    28.         }
    29.     </script>
    30. </body>
    31. </html>

  3. sw.js

    1. var version = "v1::"; // 设置版本号
    3. self.addEventListener("install", function (event) { // serviceworker第一次加载的时候调用，可以在此时缓存静态资源
    4.     event.waitUntil(
    5.         // caches帮助我们缓存资源
    6.         caches
    7.             .open(version + 'fundamentals')
    8.             .then(function (cache) {
    9.                 // 将列出的文件缓存起来
    10.                 return cache.addAll([
    11.                     '/',
    12.                     '/img/alt.png'
    13.                 ]);
    14.             })
    15.             .then(function () {
    16.                 console.log('缓存完毕');
    17.             })
    18.     );
    19. });
    21. self.addEventListener('activate', function (event) { // install方法调用完毕后就调用此方法，主要用来删除过期的缓存
    23.     event.waitUntil(
    24.         caches
    25.             // keys方法用来获取缓存版本号
    26.             .keys()
    27.             .then(function (keys) {
    28.                 // 下面的方法用来删除不是以version开头的缓存版本
    29.                 return Promise.all(
    30.                     keys
    31.                         .filter(function (key) {
    32.                             return !key.startsWith(version);
    33.                         })
    34.                         .map(function (key) {
    35.                             return caches.delete(key);
    36.                         })
    37.                 );
    38.             })
    39.             .then(function () {
    40.                 console.log('WORKER: 激活完毕.');
    41.             })
    42.     );
    43. })
    45. self.addEventListener('fetch', function (event) { // 请求外部资源时调用
    47.     // 只捕获get请求
    48.     if (event.request.method !== 'GET') {
    49.         // 只让get请求去缓存中查找
    50.         console.log('WORKER: 被拦截的api.', event.request.method, event.request.url);
    51.         return;
    52.     }
    54.     // 让get请求取缓存中查找资源
    55.     event.respondWith(
    56.         caches
    57.             .match(event.request)
    58.             .then(function (cached) {
    59.                 // 将缓存中的资源立即返回，并且同时去服务器下载最新的资源存到缓存中
    60.                 var networked = fetch(event.request)
    61.                     .then(fetchedFromNetwork, unableToResolve)
    62.                     .catch(unableToResolve);
    64.                 // 通过caches.match这个方法，如果缓存中有资源，直接就返回了，如果没有转向网络
    65.                 console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url);
    66.                 return cached || networked;
    68.                 function fetchedFromNetwork(response) {
    69.                     // 从网络中加载资源
    70.                     var cacheCopy = response.clone();
    71.                     console.log('WORKER: 从网络中拉取的资源地址.', event.request.url);
    72.                     caches
    73.                         // 存储资源
    74.                         .open(version + 'pages')
    75.                         .then(function add(cache) {
    76.                             cache.put(event.request, cacheCopy);
    77.                         })
    78.                         .then(function () {
    79.                             console.log('WORKER: 从网络中拉取的资源已经缓存', event.request.url);
    80.                         });
    81.                     return response;
    82.                 }
    84.                 // 既不能从网络中获取资源又不能从缓存中获取，就会调用此方法
    85.                 function unableToResolve() {
    86.                     console.log('WORKER: 获取资源失败.');
    87.                     return new Response('<h1>Service Unavailable</h1>', {
    88.                         status: 503,
    89.                         statusText: 'Service Unavailable',
    90.                         headers: new Headers({
    91.                             'Content-Type': 'text/html'
    92.                         })
    93.                     });
    94.                 }
    95.             })
    96.     );
    97. })

js操作serviceWorker缓存静态文件的更多相关文章

  1. Nginx设置Js、Css等静态文件的缓存过期时间

    location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小 ...

  2. apache下用expires_module让浏览器缓存静态文件

    让浏览器缓存CSS.JS.图片.静态文件等是很重要的事情,这样可以减轻服务器的压力,省的浏览器经常要去服务端下载这些静态文件.下面看看配置方法吧. 1.开启apache扩展模块mod_expires. ...

  3. 【摘自张宴的"实战:Nginx"】使用nginx的proxy_cache模块替代squid,缓存静态文件

    #user nobody;worker_processes 1; error_log logs/static_source.error.log;#error_log logs/error.log no ...

  4. 霸气！Nginx 中缓存静态文件秘籍

    导读 这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件)设 ...

  5. 用nginx缓存静态文件

        这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件) ...

  6. virtualBox 虚拟机下nginx设置不缓存静态文件不起作用解决办法

    最近开发的时候,调整js时会一直使用缓存文件,无法显示改动!nginx配置静态文件add_header Cache-Control no-cache;也不起作用,很苦恼! nginx配置代码:even ...

  7. nginx优化:使用expires在浏览器端缓存静态文件

    一,nginx中expires指令的作用 网站的图片等静态文件一旦发布,通常很少改动, 为了减小对服务器请求的压力,提高用户浏览速度, 我们可以设置nginx中的expires, 使用户访问一次后,将 ...

  8. tomcat 无法加载js和css 等静态文件的问题

    前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...

  9. SpringMVC架构的项目，js，css等静态文件导入有问题

    发生原因 <servlet> <servlet-name>springmvc-mybaits</servlet-name> <servlet-class> ...

随机推荐

  1. python3.7安装模块MySQLdb报错error: Microsoft Visual C++ 14.0 is required.

    error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools&quo ...

  2. 51nod 1287 线段树

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1287 简单的线段树题目,直接写个二分查找大于等于x的最小位置就好了. # ...

  3. [6644] 02 Apr 23:11:58.976 # Creating Server TCP listening socket *:6379: bind: No such file or directory

    redis报错: [6644] 02 Apr 23:11:58.976 # Creating Server TCP listening socket *:6379: bind: No such fil ...

  4. eclipse配置tomcat运行项目访问不加项目名

  5. UI-UIButton、UILable、UITextField总结

    UIButton按钮====================================================== 第一.UIButton的定义 UIButton *button=[[U ...

  6. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  7. 【SQL查询】合并多个数据集_union

    SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...

  8. iphone5s越狱之后必装

    一．iphone5s完美越狱之后必装插件一览表 由于iPhone5s配置了强大的64位的A7处理器,所以在iOS7完美越狱后,不少iPhone5s用户发现之前安装的大部分人们插件在越狱后难以兼容.但是 ...

  9. UVALive 6163(暴力枚举)

    这道题我的做法就是枚举这四个数的所有排列所有运算所有计算顺序. 略有考验代码能力,不能漏掉情况,注意模块化的思想,一些功能写成函数调试的时候结构清晰好分析. 比赛时没有AC是对next_permuta ...

  10. Android tcpdump 使用

    /************************************************************************** * Android tcpdump 使用 * 说 ...