在无线页面中，所有的元素都是实时渲染的。所以 PWA 增加了类似 Splash screen 的等待画面，显示品牌 Logo 和品牌名，以便在这个等待时间内，预加载第一个页面所需的资源，缓和用户的等待时间。

　　沉浸式的的全屏体验 Web App Manifest

　　用户点击被保存在桌面的 PWA icon ，进入全屏的 PWA 界面。没有了浏览器头部，Progressive Web App 和 Navtive App 几乎没有界面上的差别。

　　用户在浏览和使用页面的过程中，完全感知不到卡顿，所有的动效和反馈都是接近原生体验的。这对于像欧美这些应用下载意愿较低的用户而言，无疑是更进一步提升了在手机端的使用体验。

　　无网络也能访问

　　当你处于无网络时，可以继续使用 PWA，会自动加载你已经缓存的内容得以在离线时继续访问。这对于像巴西这类流量资费偏贵的用户来说，可以节省很多不必要的浪费。

　　不同网站对于 Service Worker 的使用也不同：

Flipkart 在无网络状态下，置灰展示所有页面信息，所有已经加载的内容可以继续浏览，但是给到用户的感觉过于消极；

Digikala 在无网络状态下，仅使用灰色提示用户已经离线状态；

Alibaba 在无网络状态下，通过品牌定义的报错颜色提示用户出于离线状态，但是由于整体页面都比较明亮，用户感知不到处于离线状态；

Currency Converter 在无网络状态下，缓存的汇率比例可以继续离线使用；可以看到不同产品对于自己产品诉求的不同，使用离线提示的方案也会各有不同。

　　不安装也能推送通知 Push Notification

　　Push 是如今的产品必不可少的一个营销工具，我们需要通过它传递信息、唤醒用户。但通常的 Mobile Site 是不具备 Push 能力的。

　　PWA 却可以，它能像 app 一样接收网站讯息，通知用户网站产生了新的内容或者和用户相关的通知，促使用户的回访。

　　与很多喜欢尝鲜的团队一样，2016 年初我们开始与 Google 团队合作，推动 PWA 技术在 AliExpress 上的落地。希望通过「新设计带来新体验；新技术推动新变革」来看看 PWA 对于电商平台的意义。

　　结果是非常令人惊奇和满意的。AliExpress 发现新用户的转换率增加了 104％。在 Safari 的转化率也上升了 82％。现在用户每次访问的页面数量是原先的两倍，也大大提升了用户浏览页面的时间。

　　AliExpress 的 Mobile Site 存在已经有些年头了，逻辑也不比 app 简单，想要重新开工并不是件容易的事情。而对于设计团队，我们的精力主要放在了以下几个方面：

　　无线「格式化」

　　抛弃了原有 PC 年代的 Header 和 Footer 的形式，以更符合 Web App 的特性。

　　优化交互结构

　　使用了类 app 的头部导航结构，整合页面中的功能，更合理的利用首屏的高度，更充分的展示有效内容。

　　界面升级

　　不仅在 UI 界面层遵循了 Material Design ，也在功能动效的还原上接近原生体验。

　　结果喜人，开奖，但过程同样也是坎坷不易的。有些 tips 给到大家：

　　1. 为你的 PWA 设计一个有识别性的 icon ，区别于 Native App icon（如果你有的话）。

　　由于市面上有较多投放尺寸，所以桌面启动icon需要适配各种场景，包含的内容：

Android Chrome 桌面图标及开机画面

iOS Safari 桌面图标及全屏开机画面

浏览器 favicon Windows Phone 图标

其他配置

　　推荐使用 Favicon Generator for all platforms: iOS、Android、PC/Mac... 来生成各种尺寸的图标及配置。