Google 2015 年发布的 Progressive Web App 现在怎么样了？

标签： google progressive web | 发表时间：2017-03-23 15:56 | 作者：jixiaohua
出处：https://www.diycode.cc/

Progressive Web App 是 Google 在 2015 提出来的下一代一种 Web 应用理念( Next Generation of Applications for the Web ) ， 大白话来说就是一个利用现代浏览器的能力来达到类似 App 的用户体验的技术。

从Google官方网站介绍内容提炼一下，PWA 的一些基本能力分别是：

  • 渐进式：能确保每个用户都能打开网页
  • 响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配
  • 离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助
  • APP：能够像 APP 一样和用户进行交互
  • 常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来
  • 安全：安全第一，给自己的网站加上一把绿锁--HTTPS
  • 可搜索：能够被引擎搜索到
  • 推送：做到在不打开网页的前提下，推送新的消息
  • 可安装：能够将 Web 想 APP 一样添加到桌面
  • 可跳转：只要通过一个连接就可以跳转到你的 Web 页面

关于 Progressive Web App 的一些介绍：
1、Learn How to Develop the Next Generation of Applications for the Web**
这是 PWA 的官方网站，里面非常详细描述了关于 PWA 的理念，当然是必看啊！

2、下一代 Web 应用模型 — Progressive Web App

@黄玄 写的关于 PWA 的技术分析以及 PWA 技术在中国特殊环境下的一些担忧，我简单抄录出来：

看看 Google 官方宣传较多的 PWA  案例就会发现，FlipKart、Housing.com 来自印度；Lyft、华盛顿邮报来自北美；唯一来自中国的 AliExpress 主要开展的则是海外业务。

1、由于中国的特殊性，笔者在 第一次聊到 PWA 时难免表现出了一定程度的悲观：
2、国内较重视 iOS，而 iOS 目前还不支持 PWA。
3、国内的 Android 实为「安卓」，不自带 Chrome 是一，可能还会有其他兼容问题。
4、国内厂商可能并不会像三星那样对推动自家浏览器支持 PWA 那么感兴趣。
5、依赖 GCM 推送的通知不可用，Web Push Protocol 还没有国内的推送服务实现。
6、国内 webview 环境较为复杂（比如微信），黑科技比较多。

反观印度，由于 Google 服务健全、标配 Chrome 的 Android 手机市占率非常高，PWA 的用户达到率简直直逼 100%，也难免获得无数好评与支持了。 笔者奢望着本文能对推动 PWA 的国内环境有一定的贡献。不过无论如何，PWA 在国内的春天可能的确会来得稍微晚一点了。

3、Progressive Web App Libraries in Production**
这是Addy Osmani在今年2月底的分享（作者是 Chrome 团队员工、TodoMVC 作者， 也是 Progressive Web App 技术的推动者）这个文章介绍了一些大厂商比如阿里巴巴国际版、印度电商 Flickart、华盛顿邮报、打车软件Lyft 等在 PWA 上面的实践和一些技术分析。

这是Addy Osmani 最近关于 PWA 的总结性质文章了。

4、PWA 在饿了么的实践经验
饿了么员工 @王亦斯 的分享 「饿了么 M 站」在 PWA 改造中的实践经验。涉及到的方面有：PWA 线上部署的准备工作、多页应用的 prerender 优化、实践过程中踩到的（和推进解决的）坑。

5、What app to build in 2017? Native, Hybrid or Progressive Web Apps?
国外一个天使投资机构组织的线下分享活动回顾，里面有一些国外团队对于 PWA 、原生 App 以及 Hybrid 方案的一些看法和分享。

6、Addy Osmani 2016年 10 月份写的技术文章：
Progressive Web Apps with React.js: Part I — Introduction**
Progressive Web Apps with React.js: Part 2 — Page Load Performance**
Progressive Web Apps with React.js: Part 3 — Offline support and network resilience**
Progressive Web Apps with React.js: Part 4 — Progressive Enhancement

7、国外第一批尝鲜支持 PWA 的公司写的开发经验，看了下时间居然是2015底的了！
Flipkart — how they built a progressive web app
Nolan Lawson — Pokedex**
Jeff Posnick — Instant Loading with Service Workers and  associated video

用 @尤雨溪今天早上的微博总结下：

事实证明 Google 推东西的时候基本是无视中国市场的，印度这种超高 Android 占有率的发展中国家才是 PWA 的目标

相关 [google progressive web] 推荐：

Google 2015 年发布的 Progressive Web App 现在怎么样了？

- - DiyCode - 致力于构建开发工程师高端交流分享社区社区
Progressive Web App 是 Google 在 2015 提出来的下一代一种 Web 应用理念( Next Generation of Applications for the Web ) ， 大白话来说就是一个利用现代浏览器的能力来达到类似 App 的用户体验的技术. 从Google官方网站介绍内容提炼一下，PWA 的一些基本能力分别是：.

如何看待 Progressive Web Apps ？

- - 知乎每日精选
看到 @题叶 问这道题时，我刚从 I/O 回来，当时就特想答，今天总算有时间了. 11月20日在 GDG DevFest 2016 北京分享了「Service Worker 101」，Slides: Service Worker 101「GDG DevFest 2016 北京」 ，技术干货技术干货.

Google 的 Web Desinger

- - 极客公园-GeekPark
[核心提示]Google 的免费 Web 设计工具虽然现在主要目的是为广告设计，今后会不会成为 Chrome 应用的开发工具. 听到 Google 推出了一个名为 Google Web Designer 的网页设计还有点惊讶. 虽然 Google 是 Web 技术的大力倡导者，毕竟自己严重依赖这个平台，但市面上相关的产品太多了，从专业的开发工具到小白的所见即所得软件数不胜数，还有 Adobe 这个专业玩家.

『Google发布移动Web性能工具PCAP Web Performance Analyzer』

- - jackyrong
最近，Google的Page Speed团队一直在关注如何更好的优化移动Web应用性能. 虽然我们拥有类似Firebug、Page Speed、YSlow!和Chrome/Safari Developer Tools等优秀工具，但是移动浏览器缺少这样的性能分析利器. 为此，Page Speed团队发布了一个分析移动浏览器网络信息的工具——PCAP Web Performance Analyzer.

Google发布Chrome Web Store应用商店

- Levi - 月光博客
　　Google公司今天在美国举行Chrome相关产品发布会，发布会上正式发布谷歌浏览器应用商店（Chrome Web Store）和Chrome OS操作系统. 　　Google推出的应用商店Chrome Web Store是互联网开放平台应用的一个典型案例，该应用商店提供各种适用于Chrome和Chrome OS的应用程序，目标用户群为1.2亿Chrome浏览器用户，开发者可以在Chrome应用程序商店销售自己的应用程序，并获得收入.

渐进式jpeg(progressive jpeg)图片及其相关

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2916. 一、基本JPEG(baseline jpeg)和渐进JPEG. 网络上那些色色的照片都是 .jpg格式的（“色色”指的是色彩斑斓的意思 ）. 不知诸位有没有注意到，这些 jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)，例如下面的示意（图片来源： http://codinghorror.typepad.com）：.

Google提供 Me on the Web 工具，用Google快訊保護個人資料安全

- gbcwbz - 電腦玩物
在電腦玩物中常有朋友留言問我：「我在Facebook的朋友訊息底下留言，有沒有辦法讓別人看不到我的留言. 」除非是朋友一開始發表訊息時就把那則訊息設定成只有你們兩人看得到，要不然留言當然也會被他人看到. 這裡其實有個重要的觀念，在網路世界中，個人隱私資料除了自己洩漏，也可能被他人洩漏. 如果你把某些私密的訊息、照片用網路或郵件分享給朋友，即使一開始你設定成只讓某些朋友看到，但難保朋友拿到這些資料後不會「幫」你分享出去.

Google瀏覽器玩免費 Game App！ Chrome Web Store遊戲推薦

- hanjinkui - 電腦玩物
2010年12月8日Google推出了「Chrome Web Store」，這是一個線上應用程式商店，你可以在這邊找到各種免費或付費的Web Apps，將它們安裝在Google瀏覽器中，我們就能利用這些程式來繪圖、文書、閱讀、通訊，當然，還有玩遊戲. 關於Chrome Web Store的詳細介紹，可以參考：「Chrome Web Store 詳解.

Google Chrome 15 最新版讓 Web App 取代傳統網站

- noyo - 電腦玩物
我很贊同Mr.Jamie在「App Internet 革命」這篇文章裡所提出的思考，他說：「消費者跟你接觸的管道，正在從「打瀏覽器、連到你的網站」，變成「打開桌面、點選你的 App」；他們發現你的管道，正在從 SEO/入口網站，變成「App Store/Android Market」. Jamie關心的是從創業角度出發的行銷經營，而我關心的是從使用者工作與生活層面出發的應用，但App革命同樣都在發生，就拿我自己使用Android手機、iPad平板的經驗來看，我幾乎不曾「首先打開瀏覽器」，App才是我的上網入口，App商店則是我找到應用的管道.

Blink: Google Chrome/Chromium 及 Opera 的新 Web 渲染引擎

- - LinuxTOY
Google 宣布将在未来的 Google Chrome/Chromium 中使用基于 WebKit 的 fork Web 渲染引擎：Blink. 同时 Opera 表示也将跟进 Google Chrome/Chromium 的步伐. Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS 渲染引擎.