查看内容

Progressive Web Applications

  • 2020-02-27 02:02
  • 新浦京操作系统
  • Views
  • 添加 argv 构造函数选项
问题:如果没有缓存我们怎么处理?
  1. 等下次sw根据路由去缓存;
  2. 手动缓存
  • 通过渴望评估输入来支持预览

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]);
  • 新浦京澳门娱乐,添加 captureRejection 支持
  • llhttp 选择加入不安全的HTTP标头解析
手动缓存
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;

                            })
            })
    )
})

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

更新

当你更新了你的sw文件,并修改了cacheVersion之后,刷新浏览器,期待的变化并没有发生,因为虽然你改变了缓存版本,但是此时旧的sw还在控制整个应用,新的sw并没有生效。这时就需要更新一下sw,有以下方法

  1. registration.update() ,也就是在注册的时候选择合适方式更新
navigator.serviceWorker.register('/sw.js').then(reg => {
  // sometime later…
    reg.update();
});
  1. 使用self.skipWaiting();
    在install阶段使用这个可以使得新的sw立即生效。
self.addEventListener('install', event => {
  self.skipWaiting();

  event.waitUntil(
    // caching
  );
});
  1. 调试手动更新
![](https://upload-images.jianshu.io/upload_images/454462-a63d53b8a30f3e01.png)

image.png

直接点击update即可。
注意,我们更新了某些文件的时候也要同时更新sw中的缓存版本(cacheVersion)

worker:

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.

stream:

基础知识

用户首次访问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的全局作用域中。

http2:

覆盖率

新浦京澳门娱乐 1

image.png

  • 为“request”和“stream”事件实施捕获指令

manifest文件

这个文件主要是配置添加到桌面的一些基本信息,比如图标启动页等。详细可以看这个https://developer.mozilla.org/zh-CN/docs/Web/Manifest
下面是我写的一个示例https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter/blob/master/pwa/sw.js
或者拉取这个项目https://github.com/Stevenzwzhai/PWA-demo

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对象。整段代码意思就是当请求一个文件时,如果缓存中已经有了,那么就直接返回缓存结果,否则发起请求。

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

注意点

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

tls:

register

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

net:

为什么stream只能读一次?

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

上一篇:Scala 路线图:跳过 2.14,明年上 Scala 3 下一篇:没有了