PWA 把 WEB 技术带回移动端

2017-12-15 10:12:19 +08:00
 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

9974 次点击
所在节点    分享发现
40 条回复
fox0001
2017-12-15 13:29:56 +08:00
@honeycomb #15 其实 PWA 解决了手机 Web 端和 Android 端,一次过现实两个解决方案,已经很给力了
kisnows
2017-12-15 17:44:11 +08:00
@fox0001 #10 可以通过 indexDB 缓存媒体文件。
kmahyyg
2017-12-15 17:48:07 +08:00
PWA 目前两个问题,国内大部分不推广不应用。另外一个,大家都懂,Chrome
cairnechen
2017-12-15 18:18:18 +08:00
@miniyao PWA 使用人数超过原生应用 source?
Sivan
2017-12-15 18:32:18 +08:00
想法是好的,但是苹果不想支持的话推广还是会有些阻力。
miniyao
2017-12-15 18:38:49 +08:00
@cairnechen

zhuanlan 点 zhihu 点 com/p/32025213

2017Google 开发者会议纪要

PWA
Progressive Web Apps 简称 PWA,是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。
著名的社交平台 Twitter Android 移动端就用了这种技术,它的体积非常小,只有 0.2M ,非常轻量级。用这种技术构建网页应用,运行非常流畅,可以和原生的 APP 达到一样的效果。Twitter 的 PWA 应用使用人数已经超过了原生应用。
mrqyoung
2017-12-15 18:40:46 +08:00
iOS 当然支持啊,Google 文档里面就有怎么支持并且怎么创建桌面快捷方式。去年自己玩了一下感觉挺不错的。pwa 是几年前的概念了
cairnechen
2017-12-15 18:56:30 +08:00
@miniyao 感谢,我回头看一下视频

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

看起来并没有接近原生应用体验,用 safari 添加到主屏幕也只是打开浏览器再打开网页而已
jonsun30
2017-12-15 19:03:36 +08:00
@cairnechen Safari 没有完全支持 pwa
cairnechen
2017-12-15 19:10:13 +08:00
@jonsun30 iOS Chrome 直接没找到添加到主屏幕的选项(还是我小白了?)
jonsun30
2017-12-15 19:35:59 +08:00
@cairnechen ios chrome 内核还不如 Safari,我没在用不知道
zhujiulin
2017-12-15 22:41:58 +08:00
这玩意 chrome 好久以前就有了吧
crysislinux
2017-12-16 00:23:28 +08:00
Safari 不支持,不过 pwa 的东西在不支持的平台上就当普通网页跑
lsido
2017-12-16 10:52:04 +08:00
Safari 已经搞事了
mrqyoung
2017-12-16 11:37:16 +08:00
@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
2017-12-16 12:12:32 +08:00
@mrqyoung google 的例子测试成功了,mobile.twitter.com m.weibo.cn/beta 均失败
mrqyoung
2017-12-16 13:08:20 +08:00
@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
2017-12-16 13:22:48 +08:00
@mrqyoung 比较好奇 google 的例子为啥能完美运行,看 twitter 的 blog 很早就开始做 PWA 了,如果 google 能做到,没道理以 twitter 的技术实力做不到
KuroNekoFan
2017-12-16 15:21:45 +08:00
试了下只有 firebase 那个是达到了预期的效果
chztv
2018-03-06 15:13:27 +08:00
iOS11.3 已经支持 PWA 了,twitter \豆瓣\微博都 OK

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/414930

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX