计算机系统

Node.js 13.4.0 版本现已发布。其具体更新内容如下:

Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging.

Changes
deps:

基础知识

用户首次访问service worker控制的网站或页面时,service worker会立刻被下载。
ServiceWorker(web worker 的一种)接口
Cache:表示对request/response对象的存储,一个域可以有多个 Cache 对象. 你将在你的代码中处理和更新缓存 . 在 Cache 除非显示地更新缓存, 否则缓存将不会被更新; 缓存数据不会过期, 除非删除它
Cache.match(request, options)返回一个Promise,查找cache中匹配的request
Cache.match(request, options)匹配一个数组对象中的request
Cache.add(request)发送请求并将请求放入cache中,
Cache.put(request, response)将request和response都添加到cache中
Cache.delete(request, options) 才cache中查找乡音的值,并删除返回一个promise,resoleve为true,如果找不到返回false
Cache,keys(request, options)返回一个promise,resolve为所有的cache键值

CacheStorage: 对Cache对象的存储,提供命名缓存的主目录,sw可以通过访问并维护名字字符串到Cache对象的映射
caches.open(cacheName).then(names){};//打开一个cache对象

Client: 表示sw client的作用域。

sw.js中的self:这个关键字表示的是一个service worker 的执行上下文的一个全局属性(ServiceWorkerGlobalScope),类似于window对象,不过这个self是作用于service worker的全局作用域中。

  • 将 npm 更新到 6.13.4
  • 更新 uvwasi(Anna Henningsen)
  • 升级到 libuv 1.34.0(Colin Ihrig)

sw生命周期

图片 1

image.png

doc:

覆盖率

图片 2

image.png

  • docs 不赞成使用 http 完成

注意点

  1. 基于https
    可以使用http-server+ngrok配合,当然更简单的使用github。
    2.Service worker是一个注册在指定源和路径下的事件驱动worker。实际上 SW 在你网页加载完成同样也能捕获已经发出的请求,所以,为了减少性能损耗,我们一般直接在 onload 事件里面注册 SW 即可。
  2. 作用域问题
    SW 的作用域不同,监听的 fetch 请求也是不一样的。 例如,我们将注册路由换成: /example/sw.js,那么,SW 后面只会监听 /example 路由下的所有 fetch 请求,而不会去监听其他

events:

register

if(navigator.serviceWorker){
    navigator.serviceWorder.register('sw.js')
        .then(registration  =>  {
              console.log(`registered event at scope:${registration.scope}`);
        })
        .cache(err => {
               throw err;
         })
}
  • 添加 captureRejection 选项

install

self.addEventListener('install', function(event) {
  // Perform install steps
});

缓存文件

const cacheVersion = 'v1';
const cacheList = [
    '/',
    'index.html',
    'logo.png',
    'manifest.json',
    '/dist/build.js'
];
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheVersion).then(function(cache) {
      return cache.addAll([cacheList]);
    })
  );
});

event.waitUntil()参数必须为promise,它可以延长一个事件的作用时间,因为我们在打开缓存或者更新的时候很有可能会有延迟,而event.waitUntil()可以防止事件终端。另外它会监听所有的异步promise,一旦有一个reject那么该次event便是失败的,也就是说sw启动失败。当然如果有些文件比较大不好缓存的话别让它返回就好了:

cache.addAll([cachelist1]);
return cache.addAll([cachelist2]);

http:

fetchEvent

缓存捕获,当发起请求的时候将request和response缓存下来(缓存一开始定义的缓存列表)。

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if(response){
                    return reponse;
                 }
                  return fetch(event.request);
             })
    )
})

这是个比较简单的格式,event.respondWith(r),包含请求响应代码,可以设置一个参数r,r是一个promise,resolve之后是一个response对象。整段代码意思就是当请求一个文件时,如果缓存中已经有了,那么就直接返回缓存结果,否则发起请求。

  • 添加 captureRejection 支持
  • llhttp 选择加入不安全的HTTP标头解析
问题:如果没有缓存我们怎么处理?
  1. 等下次sw根据路由去缓存;
  2. 手动缓存

http2:

手动缓存
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if(response){
                    return response;
                }
                //fetch请求的request、response都定义为stream对象,所以只能读一次这里需要clone一个新的
                let requestObj = event.request.clone();

                return fetch(requestObj)
                            .then(response => {
                                //检测是否成功
                                if(!response || response.status !== 200 || response.type !== 'basic') {
                                    return response;
                                }
                                //如果请求成功,第一要去渲染,第二要缓存
                                //cache.put()也使用stream,所以这里也需要复制一份
                                let responseObj = response.clone();

                                caches.open(cacheVersion)
                                    .then(cache => {
                                        cache.put(event.request, responseObj);
                                    });
                                return response;

                            })
            })
    )
})
  • 为“request”和“stream”事件实施捕获指令
为什么stream只能读一次?

当可读流读取一次之后可能已经读到stream结尾或者stream已经close了,这里request和response都实现了clone接口来复制一份,所以在需要二次使用stream的时候就需要用副本来实现了。

net:

删除旧的缓存

self.addEventListener('activate', evnet => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.filter(cachename => {
                    if(cachename == cacheVersion){
                        return caches.delete(cachename);
                    }
                })
            ).then(() => {
                return self.clients.claim()
            })
        })
    )
})

我们检查之前保存的sw缓存,还要注意一点就是Promise.all()中不能有undefined,所以我们对于相同的版本要过滤,因而不使用map,避免返回undefined。
通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。

其他新闻
  • 要说互联网上长久的项目,原创公众号算一个,但别忽略了网站,毕竟做了十年以上的草根站长,不在少数,每年轻松赚百万。 有人说做SEO不赚钱,而实际上只要你选对了项目,就算你...
    2020-03-17
  • 熊掌号是个什么东西,对于自媒体而言,这是一个类似微信公众账号的平台,只是在百度APP下才能运行,对于网站站长来讲,这是一个可以帮助你解决网站收录以及排名的良好工具,那...
    2020-03-17
  • 做为一位SEOer都知道百度前三的网站占据了80%的流量,所以每一位seo人员都是希望自己的网站能够是第一名或者是可以进入百度前三名,那么我们的网站凭什么可以进入百度前三呢? 很...
    2020-03-17
友情链接

公司名称巴黎人电玩
版权所有:Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有

友情链接

Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有
公司地址http://www.zhongqiangjy.com