好产品,或许你已见得不少。但好产品背后的探索和思考,恐怕没有太多人知道。
在这个栏目里,你会知道「产品人」如何创作,提供更好的用户体验,并影响成千上万人的生活。
我们精选优质内容,为你提供特别的产品视角。 如果你有好文推荐,或者希望投稿,欢迎联系 appsolution@ifanr.com。
微信号 appsolution 后台回复「早读」可获取文章合辑。
A 君导读:说到微信小程序,估计大家都不陌生。在讨论小程序的时候,有不少专业人士也会谈到 Google 的 PWA,这是无需安装的 Web App,能在封闭的浏览器中如 app 般运行,而且还能被搜索引擎索引并呈现。
独立的 Logo
快速加载 App Shell 模型
添加到主屏幕,从主屏幕启动
App-like 启动画面
Web App Manifest
Service Worker 离线缓存
推送通知 Push Notification
Flipkart 在无网络状态下,置灰展示所有页面信息,所有已经加载的内容可以继续浏览,但是给到用户的感觉过于消极;
Digikala 在无网络状态下,仅使用灰色提示用户已经离线状态;
Alibaba 在无网络状态下,通过品牌定义的报错颜色提示用户出于离线状态,但是由于整体页面都比较明亮,用户感知不到处于离线状态;
Currency Converter 在无网络状态下,缓存的汇率比例可以继续离线使用;可以看到不同产品对于自己产品诉求的不同,使用离线提示的方案也会各有不同。
Push 是如今的产品必不可少的一个营销工具,我们需要通过它传递信息、唤醒用户。但通常的 Mobile Site 是不具备 Push 能力的。
PWA 却可以,它能像 app 一样接收网站讯息,通知用户网站产生了新的内容或者和用户相关的通知,促使用户的回访。
Android Chrome 桌面图标及开机画面
iOS Safari 桌面图标及全屏开机画面
浏览器 favicon Windows Phone 图标
其他配置
PWA 官方文档:http://t.cn/R5UMP8A
PWA check list 帮助快速测试 PWA 页面:http://t.cn/RfRxrb6
AliExpress case study:http://t.cn/R5CRZlX
PWA 网站大全:https://pwa.rocks/
PWA 还是 Native:http://t.cn/RXTbowd
Material Design Guideline:material.io/guidelines/
联系客服