Service Worker 的一个实战例子-阿里云开发者社区

开发者社区> -技术小能手-> 正文

Service Worker 的一个实战例子

简介: Service Worker 的一个实战例子
+关注继续查看

关于 Service Worker 概念的例子,请参考我之前的这篇文章。本文是实战。

本地新建一个 html 文件,该文件里加载一个 Service worker 的实现:image.png该 HTML 加载的 Service Worker 实现,位于 sw.js 文件内:

// @ts-nocheck
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/purehtml/serviceworker.html'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  // @ts-ignore
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          // Cache hit - return response
          if (response) {
            console.log('Cache hit: ', response);
            return response;
          }
  
          return fetch(event.request).then(
            function(response) {
              // Check if we received a valid response
              if(!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }
  
              // IMPORTANT: Clone the response. A response is a stream
              // and because we want the browser to consume the response
              // as well as the cache consuming the response, we need
              // to clone it so we have two streams.
              var responseToCache = response.clone();
  
              caches.open(CACHE_NAME)
                .then(function(cache) {
                  cache.put(event.request, responseToCache);
                });
  
              return response;
            }
          );
        })
      );
  });

一定要把该 html 和 JavaScript,发布到 web server 上运行(比如使用 Node.js 的 express 框架)。


如果本地直接打开 HTML,会遇到错误:ServiceWorker registration failed:TypeError:failed to register a ServiceWorker:The URL protocol of the current origin(‘null’) is not supported.image.pngServiceWorker registration successful with scope:

刷新之后,可以看到该应用的 Cache Storage 里,已经显示了两条缓存数据:image.png看到了处于 active 状态的 Service Worker:

image.png如果一个网页是通过 Service Worker 返回的,在 Chrome 开发者工具里能看到对应的图标:image.png



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7238 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8919 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10521 0
《Node.js 实战》预售: 实例讲解 Node.js 在实战开发中的应用
CNode 社区的 4 位大牛合力撰写的 《Node.js 实战》一书,现在当当、京东、亚马逊、互动等各大网店火热预售中。
141 0
storm 实战及实例讲解(一)
http://blog.csdn.net/comaple/article/details/7912529 先给大家打打气,看看效果。
1015 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载