JavaScript新知：service workers

Tony 发布于2019-08-20 13:47 / 1737人阅读

摘要：前端技术正在像桌面技术靠近，其中一项很重要的就是就是，它让离线工作成为可能。本文会以一个简单的案例代码来说明这项技术。这里我们制定了因此任何内容都会被缓存下来。第二个事件是，当访问远程资源时会被调用。

前端技术正在像桌面技术靠近，其中一项很重要的就是就是service workers，它让HTML App离线工作成为可能。本文会以一个简单的案例代码来说明这项技术。
我使用的工具：

浏览器版本为chrome 55

服务器系统：Node 5.0

我们需要准备3个文件：

touch  index.html b.html sw.js

其中文件index.html内容为：

它注册一个service worker，文件名为sw.js，一个JavaScript代码文件。所以真正关键的文件是sw.js，其内容为：

    const cacheName = "v1::static";
    self.addEventListener("install", e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {
          return cache.addAll([
            "/",
          ]).then(() => self.skipWaiting());
        })
      );
    });
    self.addEventListener("fetch", event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {
          return cache.match(event.request).then(res => {
            return res || fetch(event.request)
          });
        })
      );
    });

作为一个事件，install会在ServiceWorker第一次装入时被调用，此处你可以做一些初始化的工作，典型的工作是加载在离线时会需要的文件到cache内。这里我们制定了"/",因此任何内容都会被缓存下来。

第二个事件是fetch，当访问远程资源时会被调用。这里可以做一个匹配，如果在cache内有就曲cache内的资源返回，否则去远程取。

第三个文件b.html就是一个为了演示离线效果的文件，内容为：

    serviceWorker B

虽然即可安装http server，并在当前路径内执行它:

    npm i http-server 
    http-server

访问:

    http://localhost:8080/index.html

和

    http://localhost:8080/b.html

随后，关闭http server，再次访问

    http://localhost:8080/b.html

居然可以访问~，而这就是离线实现的效果。

嗯，想要查看service workers的运行状况，还可以使用如下url来：

    chrome://inspect/#service-workers

可以看到更加细节的是这个：

    chrome://serviceworker-internals/

在这里可以启动，撤销注册等操作。

可以查询它的实现情况，还不是那么乐观：

    http://caniuse.com/#feat=serviceworkers

ref

https://developers.google.com...

关于

作者：刘传君

创建过产品，创过业。好读书，求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81247.html

javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0
JavaScript 是如何工作的：Service Worker 的生命周期及使用场景

摘要：的生命周期的生命周期与页面完全分离。换句话说，这个将为这个域中的所有内容接收事件。这不是必要的，但绝对是推荐的。新的将启动并且安装事件将被移除。使用，可以很容易被劫持连接并伪造响应。后台同步允许延迟操作，直到用户具有稳定的连接。这是专门探索 JavaScript 及其所构建的组件的系列文章的第8篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前...

zzzmh 2019-08-23 14:28 评论0 收藏0
JavaScript 工作原理之八－Service Workers，生命周期及其使用场景

摘要：生命周期的生命周期和网页完全不相关。意即会作用于整个源地址上。激活安装完之后下一步即激活。同时检查响应类型是否为，即检查请求是否同域。创建新的的过程将会启动，然后触发事件。可以利用劫持网络连接和伪造响应数据。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工...

oysun 2019-08-22 17:35 评论0 收藏0
JavaScript工作原理（八）：Service Workers，生命周期和应用案例

摘要：的生命周期生命周期与您的网页是完全分开。激活安装之后，下一步是将其激活。一旦激活，将开始控制所有属于其范围的页面。否则，将执行事件。响应结果被添加到缓存中。请求和响应必须被克隆，因为它们是流。新的将启动并且事件将被触发。 showImg(https://segmentfault.com/img/bV9Sa2?w=800&h=410);您可能已经知道，渐进式Web应用(PWA)会越来越受...

huaixiaoz 2019-08-26 11:53 评论0 收藏0