PWA 把 WEB 技术带回移动端

[fox0001]

PWA 基于 web 开发技术，有本地 app 的体验，并且 Google 努力争取成为标准。对于网站 app 的开发来说，是个极大的福音

给中国开发者的 2017Google 开发者会议纪要（有 PWA 的简介） https://zhuanlan.zhihu.com/p/32025213

别人的介绍：下一代 Web 应用模型 —— Progressive Web App https://huangxuan.me/2017/02/09/nextgen-web-pwa/

成功案例如下。用 android 的 chrome 打开，可以添加到本地，使用效果跟本地 app 一样 1 ）速卖通 https://m.aliexpress.com

2 ）微博 https://m.weibo.cn/beta

3 ） twitter。其中 twitter 已经把 PWA 打包为 apk，放在 google play，体积不到 500k https://mobile.twitter.com

[aaronlam]

怎么感觉这东西是全局版的小程序

[czmecho]

Google maps go 版本就是 PWA 打包的，我的天！
@aaronlam 明明是小程序学了 PWA

[aaronlam]

@czmecho 如果这个标准能统一感觉 WEB APP 能逆一波天

[czmecho]

@aaronlam #3 反正有微信小程序在，在国内还是很难推广开来的。
不过多家浏览器开发商已经在跟进了，如 UC。
像微信内置浏览器就是一个市场份额很高的浏览器，它要是为了自己的小程序，不支持 PWA，那就更难了。

[overflowHidden]

不知道能不能取代 hybrid app

[fe619742721]

之前看过介绍，感觉是个很好的方向，如果国内手机浏览器厂商能够统一推送能力的话，就更给力了。
使用了 2 天微博 PWA，体验很不错

[miniyao]

超过 10M 体积的原生应用，就没法替代了。再怎么样没有人能接受第一次加载 PWA 应用要等 10M 大小的内容缓存完吧，不过绝大多数的应用都可以控制在 1M 以内的初始加载吧

[fox0001]

@fe619742721 #6 发现微博 PWA 不能把图片下载或分享

[nondanee]

@miniyao 完全可以 fetch 相应资源时再缓存，不一定要 install 时就缓存全部啊🙃

[fox0001]

@miniyao #7 不知道可不可以实现延迟缓存。一般大的文件都是多媒体文件（图片、音频、视频之类），缓存时只缓存基本的 HTML、css 和 js，第一次加载时才缓存多媒体文件

[crysislinux]

Safari 肯定要搞事。

[miniyao]

@nondanee
@fox0001
嗯，应该是可以异步缓存。

Twitter 的 PWA 应用使用人数已经超过了原生应用。-- 这个数据有点让人吃惊

[millson]

前几年就有这个概念了，不相信国内的流氓 app 们会去做，就算做也会是阉割版的

[fox0001]

@crysislinux #11 就剩下他们了

[honeycomb]

@fox0001 但是苹果有底气做到不在 ios 支持 pwa，就像 safari 一直不支持 vp9，webm/微信小程序不太可能向 pwa 让步那样

[SuperMild]

网络世界越开放对 Google 越有利？微信、苹果等是靠封闭的生态圈盈利的，Google 是靠……其实真不知道 Google 是靠什么盈利的……

[sslyxhz]

@SuperMild 上次看到有数据说谷歌八成收入靠广告

[GreatMartial]

支持一下，真的很好用

[sorra]

微信小程序基础不牢，定不是 PWA 的对手

[Rice]

最大的问题是苹果支不支持

[fox0001]

@honeycomb #15 其实 PWA 解决了手机 Web 端和 Android 端，一次过现实两个解决方案，已经很给力了

[kisnows]

@fox0001 #10 可以通过 indexDB 缓存媒体文件。

[kmahyyg]

PWA 目前两个问题，国内大部分不推广不应用。另外一个，大家都懂，Chrome

[cairnechen]

@miniyao PWA 使用人数超过原生应用 source?

[Sivan]

想法是好的，但是苹果不想支持的话推广还是会有些阻力。

[miniyao]

@cairnechen

zhuanlan 点 zhihu 点 com/p/32025213

2017Google 开发者会议纪要

PWA
Progressive Web Apps 简称 PWA，是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。
著名的社交平台 Twitter Android 移动端就用了这种技术，它的体积非常小，只有 0.2M ，非常轻量级。用这种技术构建网页应用，运行非常流畅，可以和原生的 APP 达到一样的效果。Twitter 的 PWA 应用使用人数已经超过了原生应用。

[mrqyoung]

iOS 当然支持啊，Google 文档里面就有怎么支持并且怎么创建桌面快捷方式。去年自己玩了一下感觉挺不错的。pwa 是几年前的概念了

[cairnechen]

@miniyao 感谢，我回头看一下视频

@mrqyoung 求个地址，我只找到这个
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=zh-cn

看起来并没有接近原生应用体验，用 safari 添加到主屏幕也只是打开浏览器再打开网页而已

[jonsun30]

@cairnechen Safari 没有完全支持 pwa

[cairnechen]

@jonsun30 iOS Chrome 直接没找到添加到主屏幕的选项（还是我小白了？）

[jonsun30]

@cairnechen ios chrome 内核还不如 Safari，我没在用不知道

[zhujiulin]

这玩意 chrome 好久以前就有了吧

[crysislinux]

Safari 不支持，不过 pwa 的东西在不支持的平台上就当普通网页跑

[lsido]

Safari 已经搞事了

[mrqyoung]

@cairnechen 没错就是你发的链接中的 tutor #7 里面有说明。https://codelabs.developers.google.com/codelabs/your-first-pwapp/#7

在 iOS 上用 safari 打开 pwa 页面后，添加到主屏幕，下次通过桌面图标打开就直接像 app 一样而不是 safari 的界面，除非页面出错(例如 https 证书问题)。

可以直接使用 google 的例子来测试，safari 打开： https://weather-pwa-sample.firebaseapp.com/final/index.html 再添加到主屏幕

[cairnechen]

@mrqyoung google 的例子测试成功了，mobile.twitter.com m.weibo.cn/beta 均失败

[mrqyoung]

@cairnechen 你是对的，在 iOS 上有一些限制。

https://stackoverflow.com/a/41194974

> As you can see, almost everything is working, even if your page can't work offline on iOS/Safari, there are still a huge benefit of "upgrading" your web app into a PWA.

[cairnechen]

@mrqyoung 比较好奇 google 的例子为啥能完美运行，看 twitter 的 blog 很早就开始做 PWA 了，如果 google 能做到，没道理以 twitter 的技术实力做不到

[KuroNekoFan]

试了下只有 firebase 那个是达到了预期的效果

[chztv]

iOS11.3 已经支持 PWA 了，twitter \豆瓣\微博都 OK