您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript轻应用PWA实践全过程

时间:2019-08-08 13:17:22  来源:  作者:



前言

PWA (Progressive web Apps),渐进式Web 应用,又称轻应用,是一种纯html5网站却可实现Native App的屏幕入口、离线缓存、消息推送等功能的W3C标准的技术组合。

PWA的完整教程网上比较少(中文版写的比较好的:https://lavas.baidu.com/pwa,不过里面实践比较少,很多坑没踩出来),故写下这篇文章帮助需要的人。PWA按照以上三个主要功能,分别用到三种技术:

manifest.json 实现APP入口

Service Worker 离线缓存

Web Push 消息推送

它们都需要在https基础上才能使用。

PWA并不是新技术,早在2014年即有人提出草案并做出了demo,比微信小程序还早。随着标准被新版本浏览器支持,17年国内也有很多团队开始实践,而18年前端Chrome力推的两大前端技术就是PWA与Flutter。不同的是,PWA是力求不改变原站代码的基础上,逐步的实现轻应用的功能;而Flutter是用Dart重写跨平台的APP,一套代码,多端使用。

理想很美好,现实很骨感。PWA在国内实践并不算多,由两个重要原因:1. 国内浏览器对之支持不太好。2. web push功能在国内遇阻,因为web push由浏览器自己的消息推送服务器实现的,比如Chrome的消息推送国内常常block。所以,为了更好的体验,中国局域网用户推荐使用Firefox, 其他互联网用户推荐使用Chrome(测试后发现,国内局域网也是部分能收到Chrome的推送)。

manifest.json 实现APP入口

manifest.json是一个位于网站对外根目录的配置文件(一般与index.html在同级目录),开发者只需按照 W3C定义好的属性https://www.w3.org/TR/appmanifest/设置即可,本文不做详述,只列举几个常用的属性:

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

手机用户可以用浏览器的“添加至主屏幕”,上述配置在此处生效,并且手机默认也会提示用户去添加。

开发者可以在Chrome devTools 的Application的Manifest中查看当前网站的匹配,它还可以提示配置错误。

Service Worker 离线缓存

Service Worker 是运行于浏览器后台的独立线程,它注册在指定源的路径下,不仅不同网站都有独立的Worker,同一个网站不同的路径下也可以注册不同的Worker,一旦注册则是永久的,除非手动卸载,在Chrome devTools 的Application的Service Worker中可以查看/卸载。

可以发现Service Worker与Web Worker非常类似,都是独立于主线程之外的独立线程,都不能使用Window之类的浏览器内置对象,都不能操作DOM,都是异步的等。不仅如此,Service Worker还被增强了,它可以拦截/代理浏览器的请求,可以使用Cache Storage缓存页面,可以监听服务器推送的消息并且向在浏览器给用户推送消息等。

使用Service Worker之前,我们先了解一下它的生命周期:

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 


JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

以上代码写在一个名为service_worker.js的脚本里,但它是独立运行的,我们又需要写引用/执行这个脚本的脚本 service_worker_before.js。

入口文件service_worker_before.js 注册Service worker :

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

注册代码很简单,需注意几点:

a. scope是Worker的源的范围,默认值为service_worker.js所在目录。

b. 这里命名了swVersion 即Service Worker version,用它记录与升级我们的Worker, 并把这个值传入Worker中,控制着缓存的版本,我们让缓存与Worker一起升级。但有一个问题,我们的页面是会被缓存的,这时无论我们的版本号是多少,都无法让其升级,所以对于升级代码文件,我们不应该使用离线缓存,而应该使用浏览器默认的缓存,也可以直接设置不缓存。

c. 升级文件指 manifest.json, service_worker.js,service_worker_before.js。比如在Nginx中可以设置不要缓存(未实践):

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

外部入口注册后,我们可以在service_worker.js中写Worker内部事件了:

Worker 安装

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

如果追求快速更新,我们可以跳过等待,直接激活,即我们打开的新页面都是使用最新的Worker代码。

Worker 激活

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

激活之后,我们做了3件事:

a. 更新所有的同源客户端的service_worker.js,即使它没有刷新页面。

b.清除非当前最新版本的cache。

c. 把首页与离线页面(根据自己的需要)进入立即缓存,如果不这么做的话,因为激活阶段(第1次打开页面)还没到达,Worker还没有开始做cache的工作,页面已经打开了,这时是没有离线缓存的,第2次打开页面时没有离线cache,但这时页面会缓存下来,只有第3次才开始能取到离线cache,而上述这么做,第2次进来即可以拿到离线cache的首页。offline.html则是离线状态下的提示页,否则用户不知道可以离线缓存,就直接不再使用APP了。

Cache Storage 离线缓存

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

注意点:

a. Cache Storage与我们常说的浏览器缓存(Http Cache)有相似之处,即对整个请求/文件缓存。又有不同之处,它可永久保存,可离线使用。在在Chrome devTools -> Application -> Cache -> Cache Storage中可以查看。

b. fech事件可以拦截HTTPS的请求,进行缓存,但下次请求时如果发现已经缓存过,则直接返回缓存中的HTTPS Response,不过上述代码没有这么做,因为博客页面非常小,为了追求页面最新,只有当离线时才使用缓存,这种做法其实是偏离了离线缓存减小服务器压力的的初衷。不过离线缓存与时时更新是矛盾的,取决于业务怎么权衡了。

c. 请求都是clone之后才缓存,因为请求的状态是变化的,如果直接保存,可能不是当时的结果。

d. 只有Get请求才缓存,否则会报错,毕竟像Post/Put/Delete之类的离线缓存也没有意义。这里开发者可以自己定义规则。

e. 离线提示页是在这里拦截而实现的。

f. 为了保证顺利升级,我在缓存中设置的升文件“manifest.json”、“service_worker.js”,“service_worker_before.js”是不做离线缓存的。

Web Push 消息推送

Web Push的过程比较复杂,因为它涉及到4个端:

JavaScript技术栈应用篇之轻应用PWA实践全过程,快速集成到应用

 

首先先列出简化的9个步骤:

a. 业务服务端生成公钥与私钥,并把公钥给网页客户端

b. 网页客户端需要支持PushManager前提下,然后请求用户授权通知

c. b的基础上,网页客户端把公钥转成Uint8Array

d. 网页客户端向推送服务端发起订阅,如果成功,会得到推送服务器返回的订阅信息

e. 网页客户端把订阅信息发给业务服务端

f. 业务服务端保留该订阅信息

g. 业务服务端拿着订阅列表、公钥私钥、把想要推送的信息发送给推送服务端

h. 推送服务端拿到推送信息,解析后发送给Service Worker端

i. Service Worker监听到信息,使用Notification推送给用户

除了四个端之间有各种交互,还有各种加密比较麻烦外,关于推送服务器文档少、不便于调试、兼容性不好也是个问题。

关于Web Push的php后端实现

本博客后端使用的PHP,相关教程较少,所幸已经开源的组件可用https://github.com/web-push-libs/web-push-php。

安装minishlink/web-push

yum install php-gmp
composer require minishlink/web-push

可是安装报错:

The following exception is caused by a lack of memory or swap, or not having swap configured

Check https:// getcomposer。org/doc/articles/troubleshooting.md#proc-open-fork-failed-errors for details

PHP Warning: proc_open(): fork failed - Cannot allocate memory in phar:// /usr/local/bin/composer/vendor/symfony/console/Application.php on line 952

Warning: proc_open(): fork failed - Cannot allocate memory in phar:// /usr/local/bin/composer/vendor/symfony/console/Application.php on line 952

[ErrorException]

proc_open(): fork failed - Cannot allocate memory

内存问题,修改后OK

/bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=256
/sbin/mkswap /var/swap.1
/sbin/swapon /var/swap.1

a.生成公钥私钥

use MinishlinkWebPushVAPID;
echo var_dump(VAPID::createVapidKeys());

f. 业务服务端保留该订阅信息

g. 业务服务端拿着订阅列表、公钥私钥、把想要推送的信息发送给推送服务端

public function push_mess(Request $request)
{
 $title = $request->input('title');
 $body = $request->input('body');
 $href = $request->input('href');
 $noticeObj = new stdClass();
 $noticeObj->title = $title;
 $noticeObj->body = $body;
 $noticeObj->href = $href;
 $noticeObj->icon = "/static/dist/image/common/favicon.ico";
 $noticeObj->badge = "/static/dist/image/common/favicon.ico";
 $auth = array(
 'VAPID' => array(
 'subject' => 'https://www.boatsky.com/',
 'publicKey' => 'BGMKbiifiHo5zKaK+gQ=',
 'privateKey' => 'FjGJbNeg=',
 ),
 );
 $webPush = new WebPush($auth);
 $subList = DB::table(SUBSCRIPTION_TABLE_NAME)
 ->get();
 foreach($subList as $sub){
 $subscription = Subscription::create(array(
 'endpoint'=> $sub->endpoint,
 'publicKey'=> $sub->public_key,
 'authToken'=> $sub->auth_token,
 'contentEncoding'=> $sub->content_encoding
 ), true);
 $res = $webPush->sendNotification(
 $subscription,
 json_encode($noticeObj)
 );
 }
 // handle eventual errors here, and remove the subscription from your server if it is expired
 $pushResult = '';
 foreach ($webPush->flush() as $report) {
 $endpoint = $report->getRequest()->getUri()->__toString();
 if ($report->isSuccess()) {
 $pushResult = $pushResult . "[successfully] -- {$endpoint}.<br>";
 } else {
 $pushResult = $pushResult . "[failed]- {$endpoint}: {$report->getReason()}<br>";
 $deleteFlag = DB::table(SUBSCRIPTION_TABLE_NAME)->where('endpoint', $endpoint)->delete();
 echo var_dump($deleteFlag);
 if ($deleteFlag) {
 $pushResult = $pushResult . " delete success !<br>";
 }
 }
 }
 $resp = array(
 'errcode' => 0,
 'errmsg' => '',
 'data' => $pushResult
 );
 return response()->json($resp);
}

提交推送的信息页面:

<section class="mod-inner">
 <form class="bsf-form" id="pushForm">
 <h2>推送消息</h2>
 <div class="bsf-unit">
 <label class="bsf-label" for="title">标题:</label>
 <input type="text" name="title" class="bsf-item" value="轻应用PWA实践过程"/>
 </div>
 <div class="bsf-unit">
 <label class="bsf-label" for="body">内容:</label>
 <input type="text" name="body" class="bsf-item" value="技术·JS"/>
 </div>
 <div class="bsf-unit">
 <label class="bsf-label" for="href">链接:</label>
 <input type="text" name="href" class="bsf-item" value="https://www.boatsky.com/blog/66.html?cf=push"/>
 </div>
 <div class="bsf-unit">
 <label class="bsf-label"> </label>
 <button type="button" class="bsf-btn bsf-btn-primary bsf-btn-md" onclick="pushSubmit()">提交</button>
 </div>
 </form>
 <div id="pushResultMsg"></div>
</section>
function pushSubmit() {
 $.ajax({
 url : '/admin/push/push_mess',
 method : 'POST',
 headers: {
 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 },
 data : $('#pushForm').serialize(),
 dataType : 'JSON',
 error : function(e){
 alert('error');
 },
 success : function(resp){
 if(resp.errcode === 0){
 $('#pushResultMsg').html(resp.data);
 }
 else {
 alert(resp.errmsg);
 }
 }
 });
}
</script>

只需使用上述HTML,即可以推送相关信息,并且加上其他配置,还可以设置有效时间,推送时间等。

Web Push 授权、发起订阅、提交订阅

if ('PushManager' in window) {
 if (Notification.permission !== 'granted') {
 // 请求授权
 askPermission();
 }
 // 发起订阅
 navigator.serviceWorker.ready.then(function(reg) {subscribe(reg)});
}
// 授权消息推送
function askPermission() {
 return new Promise(function (resolve, reject) {
 var permissionResult = Notification.requestPermission(function (result) {
 resolve(result); // 旧版本
 });
 if (permissionResult) {
 permissionResult.then(resolve, reject); // 新版本
 }
 }).then(function (permissionResult) {
 if (permissionResult !== 'granted') {
 alert('只有允许显示通知,您才能收到更新提醒,提醒一个月只会出现两三次,您可以在设置处修改。');
 }
 }).catch(e => console.log(e));
}
// 将base64的applicationServerKey转换成UInt8Array
function urlBase64ToUint8Array(base64String) {
 var padding = '='.repeat((4 - base64String.length % 4) % 4);
 var base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
 var rawData = window.atob(base64);
 var outputArray = new Uint8Array(rawData.length);
 for (var i = 0, max = rawData.length; i < max; ++i) {
 outputArray[i] = rawData.charCodeAt(i);
 }
 return outputArray;
}
function subscribe(serviceWorkerReg) {
 serviceWorkerReg.pushManager.subscribe({ // 2. 订阅
 userVisibleOnly: true,
 applicationServerKey: urlBase64ToUint8Array('BGMKbiifiMDHo5ZiXxziLuOC7GZaPGdDBfwZp4eYGUxUKvY1VMjNff814+Oi4jAQXnY1LMNgYahiV8gAzKaK+gQ=')
 }).then(function (subscription) {
 // 3. 发送推送订阅对象到服务器,具体实现中发送请求到后端api
 sendEndpointInSubscription(subscription);
 console.log('subscribe success');
 }).catch(function (e) {
 console.log(e);
 // 订阅请求失败
 if (Notification.permission === 'denied') {
 }
 });
}
function sendEndpointInSubscription(subscription) {
 let endpoint = subscription.endpoint;
 let publicKey = subscription.getKey('p256dh');
 publicKey = publicKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(publicKey))) : null;
 let authToken = subscription.getKey('auth');
 authToken = authToken ? btoa(String.fromCharCode.apply(null, new Uint8Array(authToken))) : null;
 const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];
 const reqData = {
 endpoint,
 publicKey,
 authToken,
 contentEncoding,
 }
 console.log(reqData);
 $.ajax({
 url : '/admin/push/save_subscription',
 method : 'POST',
 headers: {
 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 },
 data : reqData,
 dataType : 'JSON',
 error : function(e){
 },
 success : function(resp){
 console.log('send success');
 }
 });
}

endpoint: 为客户端推荐的地址,推送服务端便是用这个找到客户端的。

publicKey: 公钥

authToken: 加密方式,好处是推送服务器也无法解密这个信息

contentEncoding: 编码方式

Service Worker 监听push,发出通知

// 监听server有push的消息,通知用户
self.addEventListener('push', function (event) {
 console.log('push', event);
 if (!(self.Notification && self.Notification.permission === 'granted')) {
 return;
 }
 if (event.data) {
 var promiseChain = Promise.resolve(event.data.json()).then(data => {
 console.log(data);
 // 使用setTimeout之后,可以实现点击跳转,否则chrome不行
 setTimeout(function(){
 self.registration.showNotification(data.title, {
 body: data.body,
 icon: data.icon,
 badge: data.badge,
 data: {
 href: data.href,
 }
 });
 }, 10);
 });
 event.waitUntil(promiseChain);
 }
});

self.registration.showNotification 中data是可以传额外的参数。

有个细节,官方没有提到的,需要用setTimeout包着showNotification,Chrome推送出的消息才不会出现链接无法点击的问题。

监听推送消息的点击事件

// 推送消息点击事件
self.addEventListener('notificationclick', event => {
 console.log('notificationclick');
 const clickedNotification = event.notification;
 const urlToOpen = new URL(clickedNotification.data.href, self.location.origin).href;
 let promiseChain = clients.matchAll({
 type: 'window',
 includeUncontrolled: true
 }).then(windowClients => {
 let matchingClient = null;
 for (let i = 0, max = windowClients.length; i < max; i++) {
 let windowClient = windowClients[i];
 if (windowClient.url.split('?')[0] === urlToOpen.split('?')[0]) {
 matchingClient = windowClient;
 break;
 }
 }
 return matchingClient ? matchingClient.focus() : clients.openWindow(urlToOpen);
 });
 event.waitUntil(promiseChain);
 clickedNotification.close();
});

监听 notificationclick 点击事件,除了需要打开弹窗,还要判断该弹窗是否曾经打开过,如果是则只需active tab即可。

参考链接

https://www.boatsky.com/blog/66



Tags:JavaScript PWA   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
PWA (Progressive web apps),渐进式Web 应用,又称轻应用,是一种纯HTML5网站却可实现Native App的屏幕入口、离线缓存、消息推送等功能的W3C标准的技术组合。...【详细内容】
2019-08-08  Tags: JavaScript PWA  点击:(309)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条