专栏名称: 京东成都研究院
京东商城成都研究院信息平台
目录
相关文章推荐
51好读  ›  专栏  ›  京东成都研究院

印尼移动站PWA实践

京东成都研究院  · 公众号  · 成都  · 2018-08-31 18:47

正文

PWA(Progressive Web App)是 Google提出的下一代web应用模型。能带来全新的移动网站用户体验。我们先来看下他的一些基本特性。

无商店 -  web app不需要通过store去管理,不需要购买等,只要用户访问就会安装,也方便了app的分享只要一个网址即可。

消息通知 - 用户只要允许,即使网页关闭后仍然可以在系统通知栏收到推送消息。

后台加载 - 往常的网页应用只要关闭了网页他的生命就结束了,现在引入了一个 Service Worker 的概念,即使网页关闭,PWA 仍然可以在后台运行获取数据更新。

离线使用 - PWA 打开后会缓存一些内容,之后再次访问即使没有网络也可以浏览之前的页面。

原生界面 - PWA 应用可以控制浏览模式隐藏浏览器的地址栏,配置颜色,配置启动画面等,这样就与原生app的使用很类似了。

桌面图标 - PWA支持自动弹出提示框让用户把网页添加到桌面可以配置app的名字,启动画面等基础信息。

下面看看Google官方的说明 https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

渐进增强 – 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则。

响应式用户界面 – 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备。

不依赖网络连接 – 通过 Service Workers 可以在离线或者网速极差的环境下工作。

类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的。

持续更新 – 受益于 Service Worker 的更新进程,应用能够始终保持更新。

安全 – 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。

可发现 – 得益于 W3C manifests 元数据和 Service Worker 的登记,让搜索引擎能够找到 web 应用。

再次访问 – 通过消息推送等特性让用户再次访问变得容易。

可安装 – 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。

可连接性 – 通过 URL 可以轻松分享应用,不用复杂的安装即可运行。

下图为我们实践的一些基本效果图


下图为我们上线后带来的一些业绩

下面看看我们做PWA的一个技术范围


我们会配置manifest.json文件用来标识web app的一些基本信息,会用到支持pwa的一个重要的服务 service workers,同时IndexedDB 一种类似关系数据库的东西可支持数据持久化,主键,存储JavaScript对象(这点很重要可以存对象而不是像localstroage 存json字符串),CacheStorage我们用来存储 key/value 的东西就是网页的数据一个url,一个response。

下面看一下我们在chrome浏览器调试工具的视图信息

现在我们挨个看下我们上面提到的一些技术的实现

首先是配置 App Manifest

https://developer.mozilla.org/en-US/docs/Web/Manifest

name – 展示给用户的应用程序的全称

short_name –全称无法完全显示时使用的短名称

description – 对于应用的详细描述

start_url –启动程序对应的URL(一般是‘/’)

scope – 导航范围。例如‘/app/’指限制应用只访问该文件夹

background-color – 启动界面和chrome浏览器(如果需要的话)的背景颜色

theme_color – 应用程序的颜色,通常与背景色相同,它将影响app的显示效果

orientation – 设置优先的显示方向:any, natural, landscape, landscape-primary, landscape-secondary,portrait, portrait-primary,和 portrait-secondary

display – 设置优先的显示模式:fullscreen (非chrome), standalone (看上去像一个原生app), minimal-ui (包含一小部分UI控件) and browser (一个常规的浏览器标签页)

icons – 一个图片对象列表,定义了src(地址)、sizes(宽高)和type(类型)。有一系统的图标应该被定义。

其中启动画面目前只能配置画面颜色,画面中间的logo为 icons中的自动适配,gcm_sender_id,当我们用基础方式注册google消息中心的时候基本用不到,但是firebasejs sdk 会去检索一次。

现在我们来看看service worker,为了方便理解,下图为 service worker 在我们整个系统中的位置

我们会在用户本地开启Service Woker的服务,类似于用户本地搭建的一个nginx文件管理服务器。

用户通过浏览器发起的所有请求都会在Service Worker中进行处理分析,同时连接用户本地的基础数据库管理数据。

远程服务器可管理用户本地服务,安装/更新/基础配置变更。

我们用到的一些基本库:sw-precache,sw-toolbox,sw-offline-google-analytics

达到

1.在线快速,支持离线(时有时无的网络)

2.请求过滤/数据存储

3.收消息,上报设备用户信息订阅消息。

DB大小限制如下图

我们要开启service worker 是需要Https的这样才能保证安全,下面我们看看注册service worker的代码

首先,我们需要准备一个 sw.js 的脚本文件是用于 service worker中运行的。Sw.js文件内容的变化也引发web app重新安装的,它的内容主要用于安装/更新app,以及app使用的策略管理,收消息等。

我们在注册service worker 服务的时候需要注意作用域,我们是在 m.jd.id/sw.js  会处理 m.jd.id 的所有网页的请求,同时包含跨域的接口也是能被过滤处理的。


我们现在来看看service worker 中的基本事件

install - 当前脚本被安装时,会触发 install 事件。

activate - 当安装完成后并进入激活状态,会触发 activate 事件。通过监听 activate 事件你可以做一些预处理,如对于旧版本的更新、对于无用缓存的清理等。







请到「今天看啥」查看全文


推荐文章
读书小分队  ·  看清一个人最好的方式!
8 年前
单反摄影技巧  ·  风光摄影的5大秘诀,赶紧收藏
7 年前