好产品，或许你已见得不少。但好产品背后的探索和思考，恐怕没有太多人知道。

　　在这个栏目里，你会知道「产品人」如何创作，提供更好的用户体验，并影响成千上万人的生活。

　　我们精选优质内容，为你提供特别的产品视角。 如果你有好文推荐，或者希望投稿，欢迎联系 [email protected]。

　　微信号 appsolution 后台回复「早读」可获取文章合辑。

　　这是灵感早读的第 65篇文章

　　A 君导读：说到微信小程序，估计大家都不陌生。在讨论小程序的时候，有不少专业人士也会谈到 Google 的 PWA，这是无需安装的 Web App，能在封闭的浏览器中如 app 般运行，而且还能被搜索引擎索引并呈现。

　　到底 Web App 实际使用如何呢？今天 AppSo（微信公众号 AppSo）分享来自「阿里国际 UED」的文章，用上 PWA 后，他们的新用户转化率提升了 104%。

　　过去的 2016 年里，你一定不下数次听到 PWA 这个词，但它究竟是什么呢？

　　PWA 其实是一种渐进式的的无需用户安装、可被随时唤起的 Web App，融合了 Native App 的结构、交互、降级方案等的更优体验技术，使得用户通过浏览器打开网站时，获得有如原生 app 般的顺滑体验。

　　Google 的官方文档中是这样介绍的：

　　PWA(Progressive Web App), Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users.

　　利用最新的技术带给用户最好的无线体验。按照官方文档，PWA 具有这些特性：Reliable、Fast、Engaging。

　　可靠的（Reliable）：瞬间加载，即使在不稳定的网络下也不会显示 downasaur（小恐龙页面），通过预加载缓存关键资源，消除对于网络的依赖，确认用户在无网络或者网络情况较差情况下的即时可靠体验。

　　快速的（Fast）：快速响应并带给用户平滑的动画体验，没有卡顿。

　　参与感（Engaging）：原生 app 一般的体验，具有沉浸式的用户体验，可以将 Progressive Web App 安装在用户的主频幕上，甚至没有浏览器的头部，开奖，给用户提供一种如原生 app 的全屏体验。

　　但说了这么多，关于 Progressive Web App 我们应该关注些什么呢？

独立的 Logo

快速加载 App Shell 模型

添加到主屏幕，从主屏幕启动

App-like 启动画面

Web App Manifest

Service Worker 离线缓存

推送通知 Push Notification

　　简单概括描述一下，PWA 是一种给用户提供无需下载、快速启动、顺滑体验的一项移动端技术。

　　独特的识别性，快速与 Native App 进行区分

　　PWA 可以拥有一个桌面图标。Flipkart 不仅重新设计了 icon，还将 PWA 改名为 Flipkart Lite。

　　使用 App Shell 快速加载页面

　　App Shell 预加载页面的框架结构和基础 UI 元素，渐进式缓存，动态加载内容。

　　很多网站在加载页面时都会遇 loading 等待的问题，这段时间里其实服务器在紧张的传输数据给客户端，再由客户端将结构渲染出来、内容填充进去。可惜用户并没有耐心等待，大家极有可能在这短短几秒内就关闭页面走掉了。

　　通过 App Shell 快速加载，可以减少用户界面中的白屏感受，让用户知道数据正在填充回页面。

　　无需下载，随时唤起

　　PWA 让 Web 应用能够像原生应用一样添加到主屏，无需通过应用商店下载，减少了用户安装原生 app 的成本。

　　用户可以通过 Chrome 等浏览器的侧边栏添加（下图左）或者通过 Chrome 弹出的 Add to Home Screen Banner 选择同意添加（右图）。可将 PWA 自带的 icon 生成一个桌面 app 图标，方便用户随时唤起。

　　友好的启动页