澳门新蒲京娱乐

新蒲京官方下载 2
那般优化排行会很累,如何行使seo能力霸屏你的行业第一词排行

现状调查报告火热出炉

Node.js 13.4.0 发布

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(namesState of Qatar{};//展开多个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.瑟维斯 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(卡塔尔 得到页面包车型大巴调控权,
这样今后展开页面都会动用版本更新的缓存。

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图