关于Progressive Web App

人好像总是有一种惰性，也喜欢给自己找各种借口。博客的更新在我的懒和借口中拖了整整一个月。

图片来自花瓣网友的收集（请从原出处转载）

9月份参与的新项目：产品触屏的PWA转化，至今已有一个月。通过这一个月数据，对前段时间的工作进行总结。由于很多人还不了解PWA到底是什么，所以总结会分为两个部分，一是关于PWA的干货，二是设计过程中的关注点。

关于PWA的干货

PWA是什么？

PWA是Progressive Web App（渐进式网页应用）的缩写，它是Google在2015年提出，并在2016年开始推广的一项新技术。

PWA本质上是一个网页应用。它基于手机浏览器，融合原生APP的结构、交互等体验，让用户在Web App中感受到原生APP的效果。

官方给出的PWA特性:

1. 可靠的（Reliable）

网络不稳定情况下，预加载缓存关键资源 （Load instantly and never show the downasaur, even in uncertain network conditions）.

2.  快速的 （ Fast）

快速响应，无卡顿 （Respond quickly to user interactions with silky smooth animations and no janky scrolling）.

3.  可参与的（ Engaging ）

原生APP沉浸式体验（Feel like a natural app on the device, with an immersive user experience）.

PWA的三个特性体现在哪些方面？

1. 可靠的（Reliable）

Service worker （离线缓存）

离线缓存简而言之就是在无网络这网路环境比较差的环境下，用户也可以打开已经缓存的页面；离线缓存是基于Google提出的Service Worker，它帮助Web在后台跑相关数据。

2. 可参与的（ Engaging ）

桌面图标启动

目前Web APP只能通过浏览器打开，PWA可以快速添加到桌面。用户可以通过桌面图标快速打开WebAPP，该页面是完全去掉了浏览器的页头页尾，在视觉上和APP无差别；目前Google提供添加到桌面的方式有两种（如下图），一是通过Google浏览器菜单添加到主屏幕，它是用户主动换起添加桌面的操作，二是通过浏览器底部的弹框进行添加，它是系统强行推出的弹框，用户可选择关闭。

3.  快速的 （ Fast）

App Shell  （快速加载页面）

在网速不好的时候，用户会看到网页处于白屏状态，同时他们不知道这是异常情况还是加载慢的原因。App Shell可以完美地解决这个问题，页面在第一次加载的时候，先加载页面的框架，等页面数据加载完再进行填充（如下图）。这些加载的框架可以清晰地告诉用户数据正在填充页面。

Push Notification（消息推送）

PWA可以使网站像APP一样接收产品的相关信息。推送的功能对产品的营销有非常重要的作用。

设计的关注点

在该项目中，设计角色主要是配合技术做一些优化

1. 交互轻量化，更接近原生APP，一些功能的动效也可以参考原生APP

2. 确定预加载的框架结构和UI元素

3. 独立logo：将PWA的桌面图标与原生APP图标进行区分；

4. App-like启动画面：当用户通过桌面图标打开pwa的时候，会有一个类似APP的启动页。启动页目前是由Google定义为产品的APP图标和产品名，无法变动。

在参与新技术和新项目过程中，设计需要注意的地方：

1. 留有足够的时间

因为新技术有太多的不确定性，需要一边做一边探索，官方文档也有很多讲解不到的细节点

2. 和技术沟通，了解技术背景和实现的可能性,明确交互在其中应该并且可做的范畴。

在参与一个新技术项目中，很多地方由于新技术的限制，不能完全按照交互的想法，所以提前和技术沟通，了解新技术的限制到底有多少，可做的地方有哪些。

3. 与产品提前做沟通非常有必要

由于前期并未与产品对接，从交互角度优化一些功能且认为不涉及业务内容。当和产品对接后，发现很多历史问题并涉及相关业务，无法在pwa的交互优化中进行

以上是我参与PWA项目以来，对PWA的认知以及实践过程中的一些感想；