JavaScript新知:service workers

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年9月30日23:30:47 评论 157 views
广告也精彩

前端技术正在像桌面技术靠近,其中一项很重要的就是就是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就是一个为了演示离线效果的文件,内容为:

<h1>serviceWorker B</h1>

虽然即可安装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
企鹅博客
  • 本文由 发表于 2019年9月30日23:30:47
  • 转载请务必保留本文链接:https://www.qieseo.com/387962.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...

发表评论