PWA初探整理

jifei 发布于2019-08-23 12:56 / 1582人阅读

摘要：站点在同一浏览器中被访问至少两次，两次访问间隔至少为分钟。询问授权发送给后端存储服务端向发送消息，同时带上根据再下发给对应的浏览器触发的事件后续处理参考使用发送推送

关键特性

Web App Manifest – 在主屏幕添加app图标，定义手机标题栏颜色之类

App Shell – 先显示APP的主结构，再填充主数据，更快显示更好体验

Service Worker - 缓存，离线开发，以及地理位置信息处理等

Push Notifion - 消息推送

Service Worker

运行在浏览器端的代理服务器

基本特点

事件驱动型服务线程

只能基于https或者localhost

可以控制页面所发送网络请求的处理方式

运行在浏览器后台的脚本，无法直接操作dom

生命周期

支持事件

register

在主线程代码中注册

可以指定scope，通常指定到网站根路径，能够拦截所有的fetch事件

service worker 已经被注册过，浏览器会自动忽略上面的代码

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker.register("/sw.js", {
      scope: "/"
    }).then(function (reg) {
      // 注册成功
      console.log("success and scope: ", reg.scope);
    }).catch(function (err) {
      // 注册失败
      console.log("failed: ", err);
    });
  });
}

installing

缓存文件

installed/waiting

此状态下，worker有效但尚未激活，它尚未纳入 document的控制，确切来说是在等待着从当前 worker 接手

sw.js发生了更新，但是页面一直挂载中，没有关闭或强制刷新，此时上一个版本的sw还在工作中，新的sw处于等待中

// 安装阶段跳过等待，直接进入 active
self.addEventListener("install", function (event) {
  event.waitUntil(self.skipWaiting());
});

self.addEventListener("activate", function (event) {
  event.waitUntil(
    Promise.all([

      // 更新客户端
      self.clients.claim()

    ])
  );
});

activating/activated

缓存更新

fetch

代理请求

message

sw与主线程间的双向通信，建立MessageChannel作为纽带

// index.html
navigator.serviceWorker.register("/service-worker.js", {
  scope: "/"
}).then(function (reg) {
  // 创建一个
  const channel = new MessageChannel();
  
  // port1供主线程使用
  channel.port1.onmessage = messageEvent => {
    console.log("来自sw的message", messageEvent.data);
  }
  
  const serviceWorker = reg.active;
  
  // port2指向sw
  if (serviceWorker) {
    serviceWorker.postMessage("index->sw", [channel.port2]);
  }
});

// sw.js
self.addEventListener("message", function (event) {
  console.log("来自index的message", event.data);
  // 通过port找到发送消息的client
  event.ports[0].postMessage("sw->index");
});

更多的应用场景

后台数据同步

预取用户可能需要的资源，比如相册中的后面数张图片

在后台集中接收计算成本高的数据更新，比如地理位置和陀螺仪信息，多个页面就可以利用同一组数据

Cache API

只能缓存 GET 请求；

可以缓存属于自己域下的请求，同时也可以缓存跨域的请求，不过无法对跨域请求的Request和Response进行修改

缓存的更新需要自行实现

缓存不会过期，除非将手动删除，大小有限制，LRU删除

caches.open

创建一个cache

cache.add/addAll

支持传入Requesturl

缓存资源，支持单个和数组

在cache.add内部会自动去调用fetch取回request的请求结果，然后才是把response存入cache

cache.put

相当于cache.add的第二步，即fetch到response后存入cache

无法直接缓存跨域的请求，response.status会返回0

如果跨域的资源支持CORS，那么可以把request的mod改成cors

caches.match

catch.match(request, {
  
}).then(function(response) {

})

cache.delete 一些使用点

分段缓存，提高安装成功率

先安装非重要资源，再安装重要资源

渐进式缓存

对于在install时没有缓存的资源，可以在用户交互之后再缓存

优先原则

对于静态页面，缓存优先，减少请求

对于天气类型应用，先去fetch，服务器故障或者网络不良时，折回本地缓存

Manifest

一个基本的manifest.json

{
    "short_name": "短名称",
    "name": "这是一个完整名称",
    "icon": [
        {
            "src": "icon.png",
            "type": "image/png",
            "sizes": "48x48"
        }
    ],
    "start_url": "index.html"
}

可以实现的功能

基本功能

自定义名称

自定义图标

设置启动网址

设置作用域

添加启动画面

设置显示类型

指定显示方向

设置主题色

应用安装横幅

站点部署 manifest.json，该文件需配置如下属性：

short_name （用于主屏幕显示）

name （用于安装横幅显示）

icons （其中必须包含一个 mime 类型为 image/png 的图标声明）

start_url （应用启动地址）

display （必须为 standalone 或 fullscreen）

站点注册 Service Worker。

站点支持 HTTPS 访问。

站点在同一浏览器中被访问至少两次，两次访问间隔至少为 5 分钟。

Web Push Notification PushManager

询问授权

发送subscription给后端存储

服务端向FCM/GCM发送消息，同时带上subscription

FCM根据subscription再下发给对应的浏览器

触发Service Worker的push事件

后续处理

参考

https://segmentfault.com/a/11...

https://x5.tencent.com/tbs/gu...

https://lavas.baidu.com/pwa/o...

http://www.zhangxinxu.com/wor...

https://zhuanlan.zhihu.com/p/...

https://github.com/delapuente...

https://github.com/SangKa/PWA...

使用Service Worker发送Push推送

https://fed.renren.com/2017/1...

https://pwa.rocks/

GPU云服务器云服务器 PWA 初探webrtc webrtc技术初探初探腾讯云存储网关

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99108.html

Service Workers （PWA 初体验）

摘要：是一个注册在指定源和路径下的事件驱动。可以提供有效有效的离线体验，拦截网络请求。出于安全原因，要求必须在下才能运行。返回一个对象，的结果是对象值对象组成的数组。当事件的处理程序执行完毕后，可以认为安装完成了。在前端越来越重的这个时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。浏览器缓存、协议缓存、强缓存懒加载（首屏） CDN 多域名突破下载并发限制。...

twohappy 2019-08-02 15:23 评论0 收藏0
Service Workers （PWA 初体验）

摘要：是一个注册在指定源和路径下的事件驱动。可以提供有效有效的离线体验，拦截网络请求。出于安全原因，要求必须在下才能运行。返回一个对象，的结果是对象值对象组成的数组。当事件的处理程序执行完毕后，可以认为安装完成了。在前端越来越重的这个时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。浏览器缓存、协议缓存、强缓存懒加载（首屏） CDN 多域名突破下载并发限制。...

刘厚水 2019-08-23 18:18 评论0 收藏0
初探IndexedDB

背景随着前端技术日新月异地快速发展，web应用功能和体验也逐渐发展到可以和原生应用媲美的程度，前端缓存技术的应用对这起到了不可磨灭的贡献，因此想一探前端的缓存技术，这篇文章主要会介绍在日常开发中比较少接触的IndexedDB IndexedDB 什么是IndexedDB IndexedDB简单理解就是前端数据库，提供了一种在用户浏览器中持久存储数据的方法，但是和前端关系型数据不同的是，Index...

jsyzchen 2019-08-23 17:10 评论0 收藏0
pwa 实战总结

摘要：现在表示公开支持。一旦安装完成，如果注册的没有变化，则显示为已激活的生命周期结束。一旦安装这步完成，便会激活，并控制在其范围内的一切。目前还在草案状态，仅火狐和谷歌浏览器支持此特性。 PWA初探什么是PWA PWA（Progressive Web Apps）：渐进式 Web app PWA 旨在增强 Web 体验，能让用户在访问一个web的时候感觉在使用app一样。 PWA可以看作是...

xioqua 2019-08-22 18:08 评论0 收藏0
初探vue-cli 3.0

摘要：当你将一系列的特性选择完毕后最后回提示你是否将已选项保存成一个快速将来可复用的当你选择保存时，被保存的将会存在用户的目录下一个名为的文件里。准备工作 npm install -g @vue/cli or yarn global add @vue/cli 安装需要Node.js8.9以上版本，安装完成后可以通过vue --version来验证是否安装成功项目创建 vue create...

superPershing 2019-08-23 12:23 评论0 收藏0