PWA的探索与应用

本文由云+社区发表

PWA（Progressive Web App）起源背景

传统的Web网页存在以下几个问题：

  • 进入一个页面必须要记住它的url或者加入书签，入口不便捷；
  • 没网络就没响应，不具备离线能力；
  • 不像APP一样能进行消息推送。

Native app：

  • 开发成本高
  • 软件上线需要审核
  • 即使使用频率不高，想使用一个app必须先下载安装

PWA概念的提出

2016 年Google I/O 大会上提出一个 Next Web Generation 的概念。PWA是在传统Web应用的基础上，结合Manifest和service worker，完善Web应用的一些能力，比如：

  • 添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
  • 消息推送

PWA技术点

Web App Manifest

Web App Manifest 技术实现了将PWA网页应用 添加至桌面的功能，但该项技术目前仍处于实验性阶段，各浏览器支持度不高

image.png

PWA 站点部署的 manifest.json文件满足以下条件时会自动显示横幅：

- short\\_name （主屏幕显示）
- name （安装横幅显示）
- icons （必须包含一个 mime 类型为 image/png 的图标声明）
- start\\_url （应用启动地址）
- display （必须为 standalone 或 fullscreen）
- 站点注册 Service Worker。
- 站点支持 HTTPS 访问。
- 同一浏览器中站点至少被访问两次，间隔至少为 5 分钟。

Service Worker

? PWA应用的离线体验、定期的后台同步以及推送通知等功能的实现依赖于Service Worker技术，下图为目前SW技术的支持度。

SW具有以下特征：

  • 一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
  • 一旦被 install，就永远存在，除非被手动 unregister
  • 用到的时候可以直接唤醒，不用的时候自动睡眠
  • 离线内容开发者可控
  • 能向客户端推送消息
  • 不能直接操作 DOM
  • 必须在 HTTPS 环境下才能工作
  • 异步实现，内部大都是通过 Promise 实现

Service Worker生命周期

  • installing：这个状态发生在 SW 注册之后开始安装，install 事件回调中执行skipWaiting()方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。
  • installed：SW已经完成了安装，等待其他的 SW 线程被关闭。
  • activating：在这个状态下清除其他的worker 以及关联缓存的旧缓存资源，等待新的 SW线程被激活。在 activate 事件回调中执行self.clients.claim()方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。旧的 Service Worker 脚本不再控制着页面，之后会被停止。
  • activated：在这个状态可以处理功能性的事件 fetch (请求)、sync (后台同步)、push (推送)。
  • 废弃状态 ( redundant )：这个状态表示一个 Service Worker 的生命周期结束。

Service Worker 支持的事件

  • install：Service Worker 安装成功后被触发的事件， 在事件处理函数中可以添加需要缓存的文件
  • activate：当 Service Worker 安装完成后并进入激活状态，会触发 activate 事件。通过监听 activate 事件你可以做一些预处理，如对旧版本的更新、对无用缓存的清理等。
  • message：Service Worker 运行于独立 context 中，无法直接访问当前页面主线程的 DOM 等信息，但是通过 postMessage API，可以实现他们之间的消息传递，这样主线程就可以接受 Service Worker 的指令操作 DOM。
  • fetch ：当浏览器在当前指定的 scope 下发起请求时，会触发 fetch 事件，并得到传有 response 参数的回调函数。fetch 事件特别重要，因为它能够定义你的缓存策略。也就是说，你可以决定何时使用缓存数据，何时使用网络请求来的数据。
  • push：push 事件是为推送准备的。通过 PUSH API，当订阅了推送服务后，可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息，即使用户已经关闭了页面。
  • sync：sync 事件由 background sync (后台同步)发出。background sync 是 Google 配合 SW 推出的 API，用于为 Service Worker 提供一个可以实现注册和监听同步处理的方法。但它还不在 W3C Web API 标准中。在 Chrome 中这也只是一个实验性功能，需要访问 chrome://flags/#enable-experimental-web-platform-features ，开启该功能，然后重启生效。Sync 事件允许延迟网络任务，直到用户连接上网络，它实现的功能通常被称为后台同步。这对于在离线模式下，确保用户启动的任何有网络依赖的任务，最终都将在网络再次可用时达到其预期目的，是非常有用的。

Service Worker 的工作原理

Service Worker是基于注册、安装、激活等步骤

注册

if (‘serviceWorker‘ in navigator) {
window.addEventListener(‘load‘, function () {
    navigator.serviceWorker.register(‘/jslearning/sw.js‘) // 默认作用域为jslearning下，也可以通过设置scope参数进行设置
        .then(function (registration) {
            // 注册成功
            console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
        })
        .catch(function (err) {
            // 注册失败:(
            console.log(‘ServiceWorker registration failed: ‘, err);
        });
});
}

安装

this.addEventListener(‘install‘, function(event) {
  console.log(‘V1 installing…‘);
  //需要缓存的重要的高优先级资源
  var vipUrlsToPrefetch = [
‘./index.html‘
  ];
  //次重要的资源
  var urlsToPrefetch = [
‘./icon.png‘
  ];
  event.waitUntil(
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
  //urlsToPrefetch非重要资源，即使有资源加载失败也不影响Service Worker安装
  cache.addAll(urlsToPrefetch);
  //vipUrlsToPrefetch中资源全部请求成功，Service Worker安装事件才顺利完成，可以进入激活事件
  return cache.addAll(vipUrlsToPrefetch);
})
  );
});

激活

//Service Worker激活事件
this.addEventListener(‘activate‘, function(event) {
  //在激活事件中清除非当前版本的缓存避免用户存储空间急剧膨胀
  event.waitUntil(caches.keys().then(function(cacheNames) {
console.log(‘V1 activate‘);
return Promise.all(cacheNames.map(function(cacheName) {
    if (cacheName !== OFFLINE_CACHE_NAME) {
      if(cacheName.indexOf(OFFLINE_CACHE_PREFIX) != -1) {
        return caches.delete(cacheName);
      }
    }
}));
  }));
});

Service Worker更新

  • 如果线程的字节与已有的SW线程字节不同，浏览器则考虑更新SW线程。
  • 更新的SW线程与现有SW线程一起启动，并获取自己的 install 事件。
  • 如果新工作SW线程出现不正常状态代码（例如，404）、解析失败，在执行中引发错误或在安装期间被拒，则系统将舍弃新工作线程，但当前工作线程仍处于活动状态。
  • 安装成功后，更新的工作线程将 wait，直到现有工作线程控制0个客户端。
  • self.skipWaiting() 可跳过等待情况，这意味着sw线程在安装完后立即激活。

Service Worker缓存策略

? Service Worker缓存策略大部分在fetch与install时间中定义，对于某些固定不变的静态资源，可以在Service Worker初次安装的install事件中将其缓存，但资源过大或者网络不佳都会造成资源并未全部下载成功而导致Service Worker安装被中断安装失败。SW主要有以下几类缓存策略：

  • 不影响安装的资源预缓存
  • 渐进式缓存
  • 仅使用缓存、仅使用网络
  • 缓存优先 、网络优先
// 渐进式缓存
var addToCache = function(req) {
  return fetch(req.clone()).then(function(resp) {
    var cacheResp = resp.clone();
    if (!resp.ok) {
      return resp;
    }
    caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
      cache.put(req.clone(), cacheResp);
    });
    return resp;
  });
};

this.addEventListener(‘fetch‘, function(event)  {
  event.respondWith(
     caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
          return cache.match(event.request);
      }).then(function(response) {
        if (response) {
            return response;
        } else {
            return addToCache(event.request);
        }
    })
  );
});

PWA应用可以通过开发者工具中的Application进行查看调试，如下图所示：

PWA优缺点总结

优点

  • 可以将app的快捷方式放置到桌面上，全屏运行，与原生app无异
  • 能够在网络差和断网条件下
  • 推送消息的能力
  • 快速响应用户指令

缺点

  • 支持率不高
  • Chrome在安卓移动端上的占有率很低
  • 依赖的GCM服务在国内无法使用
  • 微信小程序的竞争

PWA应用

  • Lavas 是一套基于 Vue 的 PWA 解决方案，能够帮助开发者快速搭建 PWA 应用
  • 新浪微博
  • 饿了么
  • Instagram
  • Twitter
  • Offline Wikipedia
  • Spotlight
  • ...

参考文献

此文已由作者授权腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

原文地址：https://www.cnblogs.com/qcloud1001/p/10256645.html

时间： 2024-10-16 04:11:22

PWA的探索与应用的相关文章

GLSProv WebUI Framework 探索阶段成果所得(1)

作为我的处子随笔,我就凭着我所想到的记录一下这段时间探索我所做的这个Feature的历程以及所学,所感. 先说一下背景,Provisiong一直是我们COM组项目里比较重要的配置环节,诞生10来年,一直是Java Swing作为主要的GUI界面,配合后台的OMCP Server 与网元以及数据库打交道.自从COM web 化以来,Swing Gui 从纯Java 演变为了WEB Swing, 但是本质上并没有什么变化, 较差的客户体验一直让老美不爽,所以经"董事会"们开会研究,先拿规模

使用Visual Studio快速开发STM32F4-Discovery探索板入门

本本将主要介绍如何使用Visual Studio创建一个基于STM32F4-Discovery探索板的简单工程. 本文使用以下硬件和软件: ●      Microsoft Visual Studio ●      VisualGDB ●      STM32F4-Discovery探索板 我们将创建一个简单的“LED闪烁”的工程,然后进行构建,并使用调试器进行单步调试. 1.    启动Visual Studio.选择File-> New-> Project. 2.    选择VisualG

数据探索

一.查看数据 首先,我们查看iris数据集的大小和结构,其维度和名称分别使用函数dim()和names()获取. 函数str()和attributes()返回数据的结构和属性 二.单变量分析 > head(iris) Sepal.Length Sepal.Width Petal.Length Petal.Width Species1 5.1 3.5 1.4 0.2 setosa2 4.9 3.0 1.4 0.2 setosa3 4.7 3.2 1.3 0.2 setosa4 4.6 3.1 1.

地统计分析笔记——探索数据

来自:http://blog.csdn.net/kikitamoon/article/details/49925147 在执行地统计分析之前,浏览.熟悉.检查自己的数据是至关重要的.绘制和检查数据是地统计分析过程中的必要阶段,我们可以从这些工作中获得一些先验知识,指导后续的工作. Stage 1 绘制数据 通过ArcMap的图层渲染方案绘制数据,我们可以获得对数据的第一印象. 例如,使用单一符号渲染了解采样点的疏密分布,通过分类渲染了解采样点高值低值的分布,等等. Stage 2 检查数据 绘制

C++随笔：.NET CoreCLR之GC探索（2）

首先谢谢 @dudu 和 @张善友 这2位大神能订阅我,本来在写这个系列以前,我一直对写一些核心而且底层的知识持怀疑态度,我为什么持怀疑态度呢?因为一般写高层语言的人99%都不会碰底层,其实说句实话,我以前也不看这些东西,只是因为自己觉得对C++感兴趣,索性乱写点东西,如果有写得不好的地方,还请上面2位大神指出. 其实我现在虽然写的是C++,但是我打算在后面把C++和.NET的一些基础类库融合起来,我发现写CLR的文章特别少,不知道什么原因.反正,废话不多,开始今天的写作吧,今天依然是把重点集中

探索Oracle之数据库升级二 11.2.0.3升级到11.2.0.4完整步骤

探索Oracle之数据库升级二  11.2.0.3升级到11.2.0.4完整步骤 说明:         这篇文章主要是记录下单实例环境下Oracle 11.2.0.1升级到11.2.0.3的过程,当然RAC的升级是会有所不同.但是他们每个版本之间升级步骤都是差不多的,先升级Database Software,再升级Oracle Instance. Oracle 11.2.0.4的Patchset No:19852360下载需要有Oracle Support才可以.  Patchset包含有7个

[ 测试思维 ] 探索式软件测试

非常不错的关于探索式软件测试的学习资料 1.探索式测试简析 作者:微软 史亮 http://pan.baidu.com/s/1c2D4tAo 2.探索式测试白皮书 作者:淘宝 季哥 http://pan.baidu.com/s/1qYFNG3y

探索 ConcurrentHashMap 高并发性的实现机制

简介 ConcurrentHashMap 是 util.concurrent 包的重要成员.本文将结合 Java 内存模型,分析 JDK 源代码,探索 ConcurrentHashMap 高并发的具体实现机制. 由于 ConcurrentHashMap 的源代码实现依赖于 Java 内存模型,所以阅读本文需要读者了解 Java 内存模型.同时,ConcurrentHashMap 的源代码会涉及到散列算法和链表数据结构,所以,读者需要对散列算法和基于链表的数据结构有所了解. Java 内存模型 由

JVM中class文件探索与解析（一）

一直想成为一名优秀的架构师的我,转眼已经工作快两年了,对于java内核了解甚少,闲来时间,看看JVM,吧自己的一些研究写下来供大家参考,有不对的地方请指正. 废话不多说,一起来看看JVM中类文件是如何加载和运行的. (1)首先,编写简单代码,对其编译生成的class文件进行研究,其java代码如下: 1 public class test { 2 private static int count = 0; 3 public static void recursion(){ 4 count++;