JavaScript新知：serviceworkers

来源：动视网责编：小采时间：2020-11-27 20:25:58

JavaScript新知：serviceworkers

JavaScript新知：serviceworkers:前端技术正在像桌面技术靠近，其中一项很重要的就是就是service workers，它让HTML App离线工作成为可能。本文会以一个简单的案例代码来说明这项技术。我使用的工具：1.浏览器版本为chrome 552.服务器系统：Node 5.0我们需要准备3个文件：touch in

推荐度：

点击下载本文 文档为doc格式

导读JavaScript新知：serviceworkers:前端技术正在像桌面技术靠近，其中一项很重要的就是就是service workers，它让HTML App离线工作成为可能。本文会以一个简单的案例代码来说明这项技术。我使用的工具：1.浏览器版本为chrome 552.服务器系统：Node 5.0我们需要准备3个文件：touch in

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

1.浏览器版本为chrome 55

2.服务器系统：Node 5.0

我们需要准备3个文件：

touch index.html b.html sw.js

其中文件index.html内容为：

 <script>
 if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('/sw.js');
 } </script>

它注册一个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就是一个为了演示离线效果的文件，内容为：