问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
现在看到网上大家都在说Macbook的好处，然后也看到一些公司招聘把人手一台Macbook当成一个看点，Macbook对于前端开发来说有什么优势吗？
PS：没有功能上的优势吗？大家说的都是一些外在的优势，都是用户体验和界面之类的
PS：为什么我的这个问题被隐藏了。。。
这个问题已被隐藏，原因：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在艺术品上面涂鸦一般都不会太差
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
上班了，看了下邮件，修改下答案。
对于个人来说，纯粹因为逼格，细述见后。
对于公司来说，给开发标配一台MBP或者rMBP，体现的是对开发的重视和尊重。
每个公司都有几个脑子不好使的行政，想帮公司省钱，又不知如何下手，就从克扣设备做起：
要个笔记本，T420 i3不带操作系统，然后找我装……公司生死系于我手你知道不？我的时间多值钱你知道不？
要个安卓测试机，“我们这儿还有一台touch4”，touch4连iOS7都不支持，iOS8马上就要出了您知道不！另外问题在于我要的是Android测试机啊！
新招小弟要个显示器，要给买Dell ST2420L，我们是前端，我们要广色域啊，我们要Adobe RGB啊！
MBP对前端来说，没有什么特别的优势，在多屏和常用软件积累上还不如Windows，但是如果公司愿意给你配，至少说明了公司对你是重视的、尊重的。
对比下两种平台在前端开发上的感觉。我公司用mac，回家用windows 8。均为最新版。
都是直接安装，然后使用命令行。windows下的安装路径换过一次，所以可能导致npm用不了。
安装，运行，功能一样
直接安装，命令行一样的
mac上没有，只有半残废替代品和绕一大圈的解决方案
mac上配apache，windows iis + webplatform installer装php、python等，前者纯文本，后者图形界面
mac OS多屏比屎强不了太多，windows多屏很好用
mac qq较屎，微信没有windows端
mac图片预览会改变颜色！！（用截图软件直接取颜色和ps打开不一致）前端怎么忍
safari可以直接联机调试iOS
iOS开发必须用Mac OS
综上所述，在都会用的情况下，mac和windows是差不多的；个别场景下windows占优，个别场景mac也不赖。那么为啥要追求MacbookPro？
配置高，做工好，本子让人有拥有欲
逼格高，公司给你一顶配神舟，你要不？
品牌认同度，其实对界面、体验的评价，见仁见智，我觉得整体来说，windows略占优
你妈：孩子你干啥工作啊？
你：写代码。
你妈：用啥写啊？
你：用windows。
你妈：那我也会写，我还会发微博呢！
试问，逼格何在？
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App&img src=&/v2-907d6ea92fc265ba7c68d75_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-907d6ea92fc265ba7c68d75_r.png&&&blockquote&今年 9 月份的时候，《程序员》杂志社就邀请我写一篇关于 PWA 的文章。后来花式拖稿，拖过了 10 月的 QCon，11 月的 GDG DevFest，终于在 12 月把这篇长文熬了出来。几次分享的不成熟，这次的结构算是比较满意了。「 可能是目前中文世界里对 PWA 最全面详细的长文了」，作为外刊君的一员，希望你能喜欢。&br&&br&本文首发于 &a href=&/?target=http%3A//geek.csdn.net/news/detail/135595& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSDN&i class=&icon-external&&&/i&&/a& 与《程序员》2017 年 2 月刊，现同步发布于 &a href=&/FrontendMagazine& class=&internal&&前端外刊评论&/a&、&a href=&/?target=https%3A//huangxuan.me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hux Blog&i class=&icon-external&&&/i&&/a&，转载请保留链接 ;)&/blockquote&&h2&&b&下一代 Web 应用？&/b&&/h2&&p&近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。&/p&&p&包括但不限于基于 Node.js 的前端工程化方案；诸如 Webpack、Rollup 这样的打包工具；Babel、PostCSS 这样的转译工具；TypeScript、Elm 这样转译至 JavaScript 的编程语言；React、Angular、Vue 这样面向现代 web 应用需求的前端框架及其生态，也涌现出了像&a href=&/?target=http%3A///isomorphic-javascript-future-web-apps/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&同构 JavaScript&i class=&icon-external&&&/i&&/a&与&a href=&/?target=https%3A///%40mjackson/universal-javascript-ae9%23.unrzyz3b2& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&通用 JavaScript 应用&i class=&icon-external&&&/i&&/a&这样将服务器端渲染（Server-side Rendering）与单页面应用模型（Single-page App）结合的 web 应用架构方式，可以说是百花齐放。&/p&&p&但是，Web 应用在移动时代并没有达到其在桌面设备上流行的程度。究其原因，尽管上述的各种方案已经充分利用了现有的 JavaScript 计算能力、CSS 布局能力、HTTP 缓存与浏览器 API 对当代基于 &a href=&/?target=https%3A//en.wikipedia.org/wiki/Ajax_%28programming%29& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Ajax&i class=&icon-external&&&/i&&/a& 与&a href=&/?target=https%3A//en.wikipedia.org/wiki/Responsive_web_design& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&响应式设计&i class=&icon-external&&&/i&&/a&的 web 应用模型的性能与体验带来了工程角度的巨大突破，我们仍然无法在不借助原生程序辅助浏览器的前提下突破 web 平台本身对 web 应用固有的桎梏：&strong&客户端软件（即网页）需要下载所带来的网络延迟；与 Web 应用依赖浏览器作为入口所带来的体验问题。&/strong&&/p&&img src=&/v2-e2cd558ed723c6e8a5b3_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-e2cd558ed723c6e8a5b3_r.jpg&&&p&&em&Web 与原生应用在移动平台上的使用时长对比 &a href=&/?target=https%3A///web/events/pwaroadshow/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&图片来源: Google&i class=&icon-external&&&/i&&/a&&/em&&/p&&p&在桌面设备上，由于网络条件稳定，屏幕尺寸充分，交互方式趋向于多任务，这两点造成的负面影响对比 web 应用免于安装、随叫随到、无需更新等优点，瑕不掩瑜。但是在移动时代，脆弱的网络连接与全新的人机交互方式使得这两个问题被无限放大，严重制约了 web 应用在移动平台的发展。在用户眼里，原生应用不会出现「白屏」，清一色都摆在主屏幕上；而 web 应用则是浏览器这个应用中的应用，使用起来并不方便，而且加载也比原生应用要慢。&/p&&p&Progressive Web Apps（以下简称 PWA）以及构成 PWA 的一系列关键技术的出现，终于让我们看到了彻底解决这两个平台级别问题的曙光：能够显著提高应用加载速度、甚至让 web 应用可以在离线环境使用的 Service Worker 与 Cache Storage；用于描述 web 应用元数据（metadata）、让 web 应用能够像原生应用一样被添加到主屏、全屏执行的 Web App Manifest；以及进一步提高 web 应用与操作系统集成能力，让 web 应用能在未被激活时发起推送通知的 Push API 与 Notification API 等等。&/p&&p&将这些技术组合在一起会是怎样的效果呢？「印度阿里巴巴」 —— &a href=&/?target=https%3A//en.wikipedia.org/wiki/Flipkart& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flipkart&i class=&icon-external&&&/i&&/a& 在 2015 年一度关闭了自己的移动端网站，却在年底发布了现在最为人津津乐道的 PWA 案例 &em&FlipKart Lite&/em&，成为世界上第一个支撑大规模业务的 PWA。发布的一周后它就亮相于 &a href=&/?target=https%3A//youtu.be/m2a9hlUFRhg& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chrome Dev Summit 2015&i class=&icon-external&&&/i&&/a& 上，笔者当时就被惊艳到了。为了方便各媒介上的读者观看，笔者做了几幅图方便给大家介绍：&img src=&/v2-cc1af3c8b32bb4a806edc4dc_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-cc1af3c8b32bb4a806edc4dc_r.jpg&&&/p&&p&&em&图片来源: Hux & &a href=&/?target=https%3A///%40AdityaPunjani/building-flipkart-lite-a-progressive-web-app-2c211e.hz4d3kw41& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&/em&&/p&&p&当浏览器发现用户&a href=&/?target=https%3A///web/fundamentals/engage-and-retain/app-install-banners/%3Fhl%3Den& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&需要&i class=&icon-external&&&/i&&/a& Flipkart Lite 时，它就会提示用户「嘿，你可以把它添加至主屏哦」（用户也可以手动添加）。这样，Flipkart Lite 就会像原生应用一样在主屏上留下一个自定义的 icon 作为入口；与一般的书签不同，当用户点击 icon 时，Flipkat Lite 将直接全屏打开，不再受困于浏览器的 UI 中，而且有自己的启动屏效果。&/p&&img src=&/v2-624a384daff1a6f03c8238e_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-624a384daff1a6f03c8238e_r.jpg&&&p&&em&图片来源: Hux & &a href=&/?target=https%3A///%40AdityaPunjani/building-flipkart-lite-a-progressive-web-app-2c211e.hz4d3kw41& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&/em&&/p&&p&更强大的是，在无法访问网络时，Flipkart Lite 可以像原生应用一样照常执行，还会很骚气的变成黑白色；不但如此，曾经访问过的商品都会被缓存下来得以在离线时继续访问。在商品降价、促销等时刻，Flipkart Lite 会像原生应用一样发起推送通知，吸引用户回到应用。&/p&&p&&strong&无需担心网络延迟；有着独立入口与独立的保活机制。&/strong&之前两个问题的一并解决，宣告着 web 应用在移动设备上的浴火重生：满足 PWA 模型的 web 应用，将逐渐成为移动操作系统的一等公民，并将向原生应用发起挑战与「复仇」。&/p&&p&更令笔者兴奋的是，就在今年 11 月的 &a href=&/?target=https%3A//youtu.be/eI3B6x0fw9s& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chrome Dev Summit 2016&i class=&icon-external&&&/i&&/a& 上，Chrome 的工程 VP Darin Fisher 介绍了 Chrome 团队正在做的一些实验：把「添加至主屏」重命名为「安装」，被安装的 PWA 不再仅以 widget 的形式显示在桌面上，而是真正做到与所有原生应用平级，一样被收纳进应用抽屉（App Drawer）里，一样出现在系统设置中
。 &/p&&p&&em&&img src=&/v2-f4aecde999_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-f4aecde999_r.jpg&&图片来源: Hux & &a href=&/?target=https%3A///adityapunjani& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&@adityapunjani&i class=&icon-external&&&/i&&/a&&/em&&/p&&p&图中从左到右分别为：类似原生应用的安装界面；被收纳在应用抽屉里的 Flipkart Lite 与 Hux Blog；设置界面中并列出现的 Flipkart 原生应用与 Flipkart Lite PWA （可以看到 PWA 巨大的体积优势）&/p&&p&&strong&笔者相信，PWA 模型将继约 20 年前横空出世的 Ajax 与约 10 年前风靡移动互联网的响应式设计之后，掀起 web 应用模型的第三次根本性革命，将 web 应用带进一个全新的时代。&/strong&&/p&&h2&&b&PWA 关键技术的前世今生&/b&&/h2&&h3&&a href=&/?target=https%3A//w3c.github.io/manifest/%23use-cases-and-requirements& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web App Manifest&i class=&icon-external&&&/i&&/a&&/h3&&p&Web App Manifest，即通过一个清单文件向浏览器暴露 web 应用的元数据，包括名字、icon 的 URL 等，以备浏览器使用，比如在添加至主屏或推送通知时暴露给操作系统，从而增强 web 应用与操作系统的集成能力。&/p&&p&让 web 应用在移动设备上的体验更接近原生应用的尝试其实早在 2008 年的 &a href=&/?target=https%3A//huangxuan.me/pwa-qcon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iOS 1.1.3 与 iOS 2.1.0 &i class=&icon-external&&&/i&&/a&时就开始了，它们分别为 web 应用增加了对自定义 icon 和全屏打开的支持。&/p&&img src=&/v2-a3bec7d15ecd5e94f076b0da953a77b8_b.jpg& data-rawwidth=&800& data-rawheight=&392& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-a3bec7d15ecd5e94f076b0da953a77b8_r.jpg&&&p&&em&图片来源: &a href=&/?target=http%3A///articles/08/10/03/latest_iphone_software_supports_full_screen_web_apps.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&/em&&/p&&p&但是很快，随着越来越多的私有平台通过 &meta&/&link& 标签来为 web 应用添加「私货」，&head& 很快就被塞满了：&/p&&br&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&c&&&!-- Add to homescreen for Safari on iOS --&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&apple-mobile-web-app-capable&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&yes&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&apple-mobile-web-app-status-bar-style&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&black&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&apple-mobile-web-app-title&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&Lighten&&/span&&span class=&p&&&&/span&
&span class=&c&&&!-- Add to homescreen for Chrome on Android --&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&mobile-web-app-capable&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&yes&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&mate&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&theme-color&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&#000000&&/span&&span class=&p&&&&/span&
&span class=&c&&&!-- Icons for iOS and Android Chrome M31~M38 --&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&apple-touch-icon-precomposed&&/span& &span class=&na&&sizes&/span&&span class=&o&&=&/span&&span class=&s&&&144x144&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/apple-touch-icon-144x144-precomposed.png&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&apple-touch-icon-precomposed&&/span& &span class=&na&&sizes&/span&&span class=&o&&=&/span&&span class=&s&&&114x114&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/apple-touch-icon-114x114-precomposed.png&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&apple-touch-icon-precomposed&&/span& &span class=&na&&sizes&/span&&span class=&o&&=&/span&&span class=&s&&&72x72&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/apple-touch-icon-72x72-precomposed.png&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&apple-touch-icon-precomposed&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/apple-touch-icon-57x57-precomposed.png&&/span&&span class=&p&&&&/span&
&span class=&c&&&!-- Icon for Android Chrome, recommended --&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&shortcut icon&&/span& &span class=&na&&sizes&/span&&span class=&o&&=&/span&&span class=&s&&&196x196&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/touch-icon-196x196.png&&/span&&span class=&p&&&&/span&
&span class=&c&&&!-- Tile icon for Win8 (144x144 + tile color) --&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&msapplication-TileImage&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/ms-touch-icon-144x144-precomposed.png&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&msapplication-TileColor&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&#3372DF&&/span&&span class=&p&&&&/span&
&span class=&c&&&!-- Generic Icon --&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&shortcut icon&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&images/touch/touch-icon-57x57.png&&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&显然，这种做法并不优雅：分散又重复的元数据定义多余且难以维持同步，与 html 耦合在一起也加重了浏览器检查元数据未来变动的成本。与此同时，社区里开始出现使用 manifest 文件以中心化地描述元数据的方案，比如 &a href=&/?target=https%3A///extensions/manifest& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chrome Extension、 Chrome Hosted Web Apps (2010)&i class=&icon-external&&&/i&&/a&与 &a href=&/?target=https%3A//developer.mozilla.org/en-US/docs/Archive/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS/Manifest& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Firefox OS App Manifest (2011)&i class=&icon-external&&&/i&&/a& 使用 JSON；&a href=&/?target=http%3A//cordova.apache.org/docs/en/6.x/config_ref/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Cordova&i class=&icon-external&&&/i&&/a& 与 &a href=&/?target=https%3A///en-us/library/dn8v%3Dvs.85%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Windows Pinned Site&i class=&icon-external&&&/i&&/a& 使用 XML；&/p&&p&2013 年，W3C WebApps 工作组开始对基于 JSON 的 Manifest 进行标准化，于同年年底发布&a href=&/?target=https%3A//www.w3.org/TR/2013/WD-appmanifest-/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&第一份公开 Working Draft&i class=&icon-external&&&/i&&/a&，并逐渐演化成为今天的 W3C Web App Manifest：&/p&&br&&div class=&highlight&&&pre&&code class=&language-json&&&span&&/span&&span class=&p&&{&/span&
&span class=&nt&&&short_name&&/span&&span class=&p&&:&/span& &span class=&s2&&&Manifest Sample&&/span&&span class=&p&&,&/span&
&span class=&nt&&&name&&/span&&span class=&p&&:&/span& &span class=&s2&&&Web Application Manifest Sample&&/span&&span class=&p&&,&/span&
&span class=&nt&&&icons&&/span&&span class=&p&&:&/span& &span class=&p&&[{&/span&
&span class=&nt&&&src&&/span&&span class=&p&&:&/span& &span class=&s2&&&launcher-icon-2x.png&&/span&&span class=&p&&,&/span&
&span class=&nt&&&sizes&&/span&&span class=&p&&:&/span& &span class=&s2&&&96x96&&/span&&span class=&p&&,&/span&
&span class=&nt&&&type&&/span&&span class=&p&&:&/span& &span class=&s2&&&image/png&&/span&
&span class=&p&&}],&/span&
&span class=&nt&&&scope&&/span&&span class=&p&&:&/span& &span class=&s2&&&/sample/&&/span&&span class=&p&&,&/span&
&span class=&nt&&&start_url&&/span&&span class=&p&&:&/span& &span class=&s2&&&/sample/index.html&&/span&&span class=&p&&,&/span&
&span class=&nt&&&display&&/span&&span class=&p&&:&/span& &span class=&s2&&&standalone&&/span&&span class=&p&&,&/span&
&span class=&nt&&&orientation&&/span&&span class=&p&&:&/span& &span class=&s2&&&landscape&&/span&
&span class=&s2&&&theme_color&&/span&&span class=&p&&:&/span& &span class=&s2&&&#000&&/span&&span class=&p&&,&/span&
&span class=&nt&&&background_color&&/span&&span class=&p&&:&/span& &span class=&s2&&&#fff&&/span&&span class=&p&&,&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&c&&&!-- document --&&/span&
&span class=&p&&&&/span&&span class=&nt&&link&/span& &span class=&na&&rel&/span&&span class=&o&&=&/span&&span class=&s&&&manifest&&/span& &span class=&na&&href&/span&&span class=&o&&=&/span&&span class=&s&&&/manifest.json&&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&诸如 name、icons、display 都是我们比较熟悉的，而大部分新增的成员则为 web 应用带来了一系列以前 web 应用想做却做不到（或在之前只能靠 hack）的新特性：&/p&&ul&&li&scope：定义了 web 应用的浏览作用域，比如作用域外的 URL 就会打开浏览器而不会在当前 PWA 里继续浏览。&/li&&li&start_url：定义了一个 PWA 的入口页面。比如说你添加 &a href=&/?target=https%3A//huangxuan.me& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hux Blog&i class=&icon-external&&&/i&&/a& 的任何一个文章到主屏，从主屏打开时都会访问 &a href=&/?target=https%3A//huangxuan.me& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hux Blog&i class=&icon-external&&&/i&&/a& 的主页。&/li&&li&orientation：终于，我们可以锁定屏幕旋转了（喜极而泣…）&/li&&li&theme_color/background_color：主题色与背景色，用于配置一些可定制的操作系统 UI 以提高用户体验，比如 Android 的状态栏、任务栏等。&/li&&/ul&&p&这个清单的成员还有很多，比如用于声明「对应原生应用」的 related_applications 等等，本文就不一一列举了。作为 PWA 的「户口本」，承载着 web 应用与操作系统集成能力的重任，Web App Manifest 还将在日后不断扩展，以满足 web 应用高速演化的需要。&/p&&h3&&a href=&/?target=https%3A//w3c.github.io/ServiceWorker/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Service Worker&i class=&icon-external&&&/i&&/a&&/h3&&p&我们原有的整个 Web 应用模型，都是构建在「用户能上网」的前提之下的，所以一离线就只能玩小恐龙了。其实，对于「让 web 应用离线执行」这件事，Service Worker 至少是 web 社区的第三次尝试了。&/p&&p&故事可以追溯到 2007 年的 &a href=&/?target=https%3A//en.wikipedia.org/wiki/Google_Gears& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Google Gears&i class=&icon-external&&&/i&&/a&：为了让自家的 Gmail、Youtube、Google Reader 等 web 应用可以在本地存储数据与离线执行，Google 开发了一个浏览器拓展来增强 web 应用。Google Gears 支持 IE 6、Safari 3、Firefox 1.5 等浏览器；要知道，那一年 Chrome 都还没出生呢。&/p&&p&在 Gears API 中，我们通过向 LocalServer 模块提交一个缓存文件清单来实现离线支持：&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// Somewhere in your javascript&/span&
&span class=&kd&&var&/span& &span class=&nx&&localServer&/span& &span class=&o&&=&/span& &span class=&nx&&google&/span&&span class=&p&&.&/span&&span class=&nx&&gears&/span&&span class=&p&&.&/span&&span class=&nx&&factory&/span&&span class=&p&&.&/span&&span class=&nx&&create&/span&&span class=&p&&(&/span&&span class=&s2&&&bata.localserver&&/span&&span class=&p&&);&/span&
&span class=&kd&&var&/span& &span class=&nx&&store&/span& &span class=&o&&=&/span& &span class=&nx&&localServer&/span&&span class=&p&&.&/span&&span class=&nx&&createManagedStore&/span&&span class=&p&&(&/span&&span class=&nx&&STORE_NAME&/span&&span class=&p&&);&/span&
&span class=&nx&&store&/span&&span class=&p&&.&/span&&span class=&nx&&manifestUrl&/span& &span class=&o&&=&/span& &span class=&s2&&&manifest.json&&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-json&&&span&&/span&&span class=&err&&//&/span& &span class=&err&&manifest.json&/span& &span class=&err&&-&/span& &span class=&err&&假设&/span& &span class=&err&&JSON&/span& &span class=&err&&有注释&/span&
&span class=&p&&{&/span&
&span class=&err&&　　&/span&&span class=&nt&&&betaManifestVersion&&/span&&span class=&p&&:&/span&&span class=&err&&　&/span&&span class=&mi&&1&/span&&span class=&p&&,&/span&
&span class=&err&&　　&/span&&span class=&nt&&&version&&/span&&span class=&p&&:&/span& &span class=&err&&　&/span&&span class=&s2&&&1.0&&/span&&span class=&p&&,&/span&
&span class=&err&&　　&/span&&span class=&nt&&&entries&&/span&&span class=&p&&:&/span&&span class=&err&&　&/span&&span class=&p&&[&/span&&span class=&err&&　&/span&
&span class=&err&&　　　　&/span&&span class=&p&&{&/span&&span class=&err&&　&/span&&span class=&nt&&&url&&/span&&span class=&p&&:&/span& &span class=&err&&　&/span&&span class=&s2&&&index.html&&/span&&span class=&p&&},&/span&
&span class=&err&&　　　　&/span&&span class=&p&&{&/span&&span class=&err&&　&/span&&span class=&nt&&&url&&/span&&span class=&p&&:&/span& &span class=&err&&　&/span&&span class=&s2&&&main.js&&/span&&span class=&p&&}&/span&
&span class=&err&&　　&/span&&span class=&p&&]&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&是不是感到很熟悉？好像 &a href=&/?target=https%3A//www.w3.org/TR/2011/WD-html5-/offline.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5 规范&i class=&icon-external&&&/i&&/a&中的 Application Cache 也是类似的东西？&/p&&br&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&html&/span& &span class=&na&&manifest&/span&&span class=&o&&=&/span&&span class=&s&&&cache.appcache&&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&CACHE MANIFEST
index.html
&/code&&/pre&&/div&&p&是的，Gears 的 LocalServer 就是后来大家所熟知的 App Cache 的前身，大约从 &a href=&/?target=https%3A//www.w3.org/TR/offline-webapps/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2008&i class=&icon-external&&&/i&&/a& 年开始 W3C 就开始尝试将 Gears 进行标准化了；除了 LocalServer，Gears 中用于提供并行计算能力的 WorkerPool 模块与用于提供本地数据库与 SQL 支持的 Database 模块也分别是日后 Web Worker 与 Web SQL Database（后被废弃）的前身。&/p&&p&HTML5 App Cache 作为第二波「让 web 应用离线执行」的尝试，确实也服务了比如 Google Doc、尤雨溪早年作品 HTML5 Clear、以及一直用 web 应用作为自己 iOS 应用的 &a href=&/?target=http%3A//FT.com& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&（Financial Times）等不少 web 应用。那么，还有 Service Worker 什么事呢？ &/p&&p&是啊，如果 App Cache 没有被设计得&a href=&/?target=https%3A//huangxuan.me/sw-101-gdgdf/%23/12& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&烂到完全不可编程、无法清理缓存、几乎没有路由机制、出了 Bug 一点救都没有&i class=&icon-external&&&/i&&/a&，可能就真没 Service Worker 什么事了。&a href=&/?target=https%3A//huangxuan.me/sw-101-gdgdf/%23/13& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&App Cache 已经在前不久定稿的 HTML5.1 中被拿掉了，W3C 为了挽救 web 世界真是不惜把自己的脸都打肿了……&i class=&icon-external&&&/i&&/a&&/p&&p&时至今日，我们终于迎来了 Service Worker 的曙光。简单来说，Service Worker 是一个可编程的 Web Worker，它就像一个位于浏览器与网络之间的客户端代理，可以拦截、处理、响应流经的 HTTP 请求；配合随之引入 Cache Storage API，你可以自由管理 HTTP 请求文件粒度的缓存，这使得 Service Worker 可以从缓存中向 web 应用提供资源，即使是在离线的环境下。&/p&&p&&em&&img src=&/v2-f6bbc1eea9d7aaf_b.png& data-rawwidth=&2240& data-rawheight=&1574& class=&origin_image zh-lightbox-thumb& width=&2240& data-original=&/v2-f6bbc1eea9d7aaf_r.png&&Service Worker 就像一个运行在客户端的代理&/em&&/p&&p&比如说，我们可以给网页 foo.html 注册这么一个 Service Worker，它将劫持由 foo.html 发起的一切 HTTP 请求，并统统返回未设置 Content-Type 的 Hello World!：&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// sw.js &/span&
&span class=&nx&&self&/span&&span class=&p&&.&/span&&span class=&nx&&onfetch&/span& &span class=&o&&=&/span& &span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&respondWith&/span&&span class=&p&&(&/span&&span class=&k&&new&/span& &span class=&nx&&Response&/span&&span class=&p&&(&/span&&span class=&s1&&'Hello World!'&/span&&span class=&p&&))&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&Service Worker 第一次发布于 2014 年的 Google IO 上，目前已处于 W3C 工作草案的状态。其设计吸取了 Application Cache 的失败经验，作为 web 应用的开发者的你有着完全的控制能力；同时，它还借鉴了 Chrome 多年来在 Chrome Extension 上的设计经验（Chrome Background Pages 与 Chrome Event Pages），采用了基于「事件驱动」的唤醒机制，以大幅节省后台计算的能耗。比如上面的 fetch其实就是会唤醒 Service Worker 的事件之一。&/p&&img src=&/v2-4a289fc64b4d16f018cb60d1f7908c2a_b.png& data-rawwidth=&2240& data-rawheight=&1574& class=&origin_image zh-lightbox-thumb& width=&2240& data-original=&/v2-4a289fc64b4d16f018cb60d1f7908c2a_r.png&&&p&&em&Service Worker 的生命周期&/em&&/p&&p&除了类似 fetch 这样的功能事件外，Service Worker 还提供了一组生命周期事件，包括安装、激活等等。比如，在 Service Worker 的「安装」事件中，我们可以把 web 应用所需要的资源统统预先下载并缓存到 Cache Storage 中去：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&// sw.js
self.oninstall = (e) =& {
e.waitUntil(
caches.open('installation')
.then(cache =&
cache.addAll([
'./styles.css',
'./script.js'
&/code&&/pre&&/div&&p&这样，当用户离线，网络无法访问时，我们就可以从缓存中启动我们的 web 应用：&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//sw.js&/span&
&span class=&nx&&self&/span&&span class=&p&&.&/span&&span class=&nx&&onfetch&/span& &span class=&o&&=&/span& &span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&fetched&/span& &span class=&o&&=&/span& &span class=&nx&&fetch&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&request&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&cached&/span& &span class=&o&&=&/span& &span class=&nx&&caches&/span&&span class=&p&&.&/span&&span class=&nx&&match&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&request&/span&&span class=&p&&)&/span&
&span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&respondWith&/span&&span class=&p&&(&/span&
&span class=&nx&&fetched&/span&&span class=&p&&.&/span&&span class=&k&&catch&/span&&span class=&p&&(&/span&&span class=&nx&&_&/span& &span class=&o&&=&&/span& &span class=&nx&&cached&/span&&span class=&p&&)&/span&
&span class=&p&&)&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&可以看出，Service Worker 被设计为一个相对底层（low-level）、高度可编程、子概念众多，也因此异常灵活且强大的 API，故本文只能展示它的冰山一角。出于安全考虑，注册 Service Worker 要求你的 web 应用部署于 HTTPS 协议下，以免利用 Service Worker 的中间人攻击。笔者在今年 GDG 北京的 DevFest 上分享了 &a href=&/?target=https%3A//huangxuan.me//sw-101-gdgdf/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Service Worker 101&i class=&icon-external&&&/i&&/a&，涵盖了 Service Worker 譬如「网络优先」、「缓存优先」、「网络与缓存比赛」这些更复杂的缓存策略、学习资料、以及&a href=&/?target=https%3A///Huxpro/sw-101-gdgdf& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&示例代码&i class=&icon-external&&&/i&&/a&，可以供大家参考。&/p&&p&&em&&img src=&/v2-236d17f6badc8c17dc501_b.png& data-rawwidth=&2240& data-rawheight=&1574& class=&origin_image zh-lightbox-thumb& width=&2240& data-original=&/v2-236d17f6badc8c17dc501_r.png&&Service Worker 的一种缓存策略：让网络请求与读取缓存比赛&/em&&/p&&p&你也可以尝试在支持 PWA 的浏览器中访问笔者的博客 &a href=&/?target=https%3A//huangxuan.me& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hux Blog&i class=&icon-external&&&/i&&/a&，感受 Service Worker 的实际效果：所有访问过的页面都会被缓存并允许在离线环境下继续访问，所有未访问过的页面则会在离线环境下展示一个自定义的离线页面。&/p&&p&在笔者看来，&strong&Service Worker 对 PWA 的重要性相当于 XMLHTTPRequest 之于 Ajax，媒体查询（Media Query）之于响应式设计，是支撑 PWA 作为「下一代 web 应用模型」的最核心技术。&/strong&由于 Service Worker 可以与包括 Indexed DB、Streams 在内的大部分 DOM 无关 API 进行交互，它的潜力简直无可限量。笔者几乎可以断言，Service Worker 将在未来十年里成为 web 客户端技术工程化的兵家必争之地，带来「离线优先（Offline-first）」的架构革命。&/p&&h3&Push Notification&/h3&&p&PWA 推送通知中的「推送」与「通知」，其实使用的是两个不同但又相得益彰的 API：&/p&&p&&a href=&/?target=https%3A//notifications.spec.whatwg.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Notification API&i class=&icon-external&&&/i&&/a& 相信大家并不陌生，它负责所有与通知本身相关的机制，比如通知的权限管理、向操作系统发起通知、通知的类型与音效，以及提供通知被点击或关闭时的回调等等，目前国内外的各大网站（尤其在桌面端）都有一定的使用。Notification API 最早应该是在 &a href=&/?target=https%3A///en/tutorials/notifications/quick/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2010&i class=&icon-external&&&/i&&/a& 年前后由 Chromium 提出&a href=&/?target=http%3A//www.chromium.org/developers/design-documents/desktop-notifications/api-specification& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&草案&i class=&icon-external&&&/i&&/a&以 webkitNotifications 前缀方式实现；随着 2011 年进入标准化；2012 年在 Safari 6（Mac OSX 10.8+）上获得支持；2015 年 Notification API 成为 &a href=&/?target=https%3A//www.w3.org/TR/notifications/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&W3C Recommendation&i class=&icon-external&&&/i&&/a&；2016 年 &a href=&/?target=https%3A///msedgedev//web-notifications-microsoft-edge/%232VBm890EjvAvUcgE.97& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Edge 的支持&i class=&icon-external&&&/i&&/a&；Web Notifications 已经在桌面浏览器中获得了全面支持（Chrome、Edge、Firefox、Opera、Safari）的成就。&/p&&p&&a href=&/?target=http%3A//w3c.github.io/push-api/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Push API&i class=&icon-external&&&/i&&/a& 的出现则让推送服务具备了向 web 应用推送消息的能力，它定义了 web 应用如何向推送服务发起订阅、如何响应推送消息，以及 web 应用、应用服务器与推送服务之间的鉴权与加密机制；由于 Push API 并不依赖 web 应用与浏览器 UI 存活，所以即使是在 web 应用与浏览器未被用户打开的时候，也可以通过后台进程接受推送消息并调用 Notification API 向用户发出通知。值得一提的是，Mac OSX 10.9 Mavericks 与 Safari 7 在 2013 年就发布了自己的私有推送支持，基于 APNS 的 &a href=&/?target=https%3A///notifications/safari-push-notifications/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Safari Push Notifications&i class=&icon-external&&&/i&&/a&。&/p&&p&在 PWA 中，我们利用 Service Worker 的后台计算能力结合 Push API 对推送事件进行响应，并通过 Notification API 实现通知的发出与处理：&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// sw.js&/span&
&span class=&nx&&self&/span&&span class=&p&&.&/span&&span class=&nx&&addEventListener&/span&&span class=&p&&(&/span&&span class=&s1&&'push'&/span&&span class=&p&&,&/span& &span class=&nx&&event&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&event&/span&&span class=&p&&.&/span&&span class=&nx&&waitUntil&/span&&span class=&p&&(&/span&
&span class=&c1&&// Process the event and display a notification.&/span&
&span class=&nx&&self&/span&&span class=&p&&.&/span&&span class=&nx&&registration&/span&&span class=&p&&.&/span&&span class=&nx&&showNotification&/span&&span class=&p&&(&/span&&span class=&s2&&&Hey!&&/span&&span class=&p&&)&/span&
&span class=&p&&);&/span&
&span class=&p&&});&/span&
&span class=&nx&&self&/span&&span class=&p&&.&/span&&span class=&nx&&addEventListener&/span&&span class=&p&&(&/span&&span class=&s1&&'notificationclick'&/span&&span class=&p&&,&/span& &span class=&nx&&event&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// Do something with the event
&span class=&nx&&event&/span&&span class=&p&&.&/span&&span class=&nx&&notification&/span&&span class=&p&&.&/span&&span class=&nx&&close&/span&&span class=&p&&();&/span&
&span class=&p&&});&/span&
&span class=&nx&&self&/span&&span class=&p&&.&/span&&span class=&nx&&addEventListener&/span&&span class=&p&&(&/span&&span class=&s1&&'notificationclose'&/span&&span class=&p&&,&/span& &span class=&nx&&event&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// Do something with the event
&span class=&p&&});&/span&
&/code&&/pre&&/div&&p&对于 Push Notification，笔者的几次分享中一直都提的稍微少一些，一是因为 Push API 还处于 Editor Draft 的状态，二是目前浏览器与推送服务间的协议支持还不够成熟：Chrome（与其它基于 Blink 的浏览器）在 Chromium 52 之前只支持基于 Google 私有的 GCM/FCM 服务进行通知推送。不过好消息是，继 Firefox 44 之后，Chrome 52 与 Opera 39 也紧追其后实现了正在由 IETF 进行标准化的 &a href=&/?target=https%3A//tools.ietf.org/html/draft-ietf-webpush-protocol-12& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web 推送协议（Web Push Protocol）&i class=&icon-external&&&/i&&/a&。&/p&&p&如果你已经在使用 Google 的云服务（比如 Firebase），并且主要面向的是海外用户，那么在 web 应用上支持基于 GCM/FCM 的推送通知并不是一件费力的事情，笔者推荐你阅读一下 Google Developers 的&a href=&/?target=https%3A///web/fundamentals/engage-and-retain/push-notifications/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&系列文章&i class=&icon-external&&&/i&&/a&，很多国外公司已经玩起来了。&/p&&h2&&b&从 Hybrid 到 PWA，从封闭到开放&/b&&/h2&&p&2008 年，当移动时代来临，&a href=&/?target=https%3A//huangxuan.me/pwa-qcon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&唱衰移动 Web 的声音&i class=&icon-external&&&/i&&/a&开始出现，而浏览器的进化并不能跟上时，来自 Nitobi 的 Brian Leroux 等人创造了 &a href=&/?target=https%3A//cordova.apache.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Phonegap&i class=&icon-external&&&/i&&/a&，希望它能以 Polyfill 的形式、弥补目前浏览器与移动设备间的「鸿沟」，从此开启了&a href=&/?target=https%3A//en.wikipedia.org/wiki/Progressive_web_app%23Hybrid_Apps& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&混合应用（Hybrid Apps）&i class=&icon-external&&&/i&&/a&的时代。&/p&&p&几年间，&a href=&/?target=http%3A///products/air.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Adobe AIR&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///en-us/library/windows/apps/br211385.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Windows Runtime Apps&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///extensions/apps& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chrome Apps&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A//developer.mozilla.org/en-US/docs/Archive/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Firefox OS&i class=&icon-external&&&/i&&/a&、&a href=&/?target=http%3A//www.openwebosproject.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebOS&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A//cordova.apache.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Cordova/Phonegap&i class=&icon-external&&&/i&&/a&、&a href=&/?target=http%3A//electron.atom.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Electron&i class=&icon-external&&&/i&&/a& 以及国内比如微信、淘宝，无数的 Hybrid 方案拔地而起，让 web 开发者可以在继续使用 web 客户端技术的同时，做到一些只有原生应用才能做到的事情，包括访问一些设备与操作系统 API，给用户带来更加 「Appy」 的体验，以及进入 App Store 等等。&/p&&p&&em&&img src=&/v2-f688b3fd10b239e6d4486b_b.png& data-rawwidth=&2342& data-rawheight=&1674& class=&origin_image zh-lightbox-thumb& width=&2342& data-original=&/v2-f688b3fd10b239e6d4486b_r.png&&众多的 Hybrid 方案&/em&&/p&&p&PWA 作为一个涵盖性术语，与过往的这些或多或少通过私有平台 API 增强 web 应用的尝试最大的不同，在于构成 PWA 的每一项基本技术，都已经或正在被 IETF、ECMA、W3C 或 WHATWG 标准化，不出意外的话，它们都将被纳入开放 web 标准，并在不远的将来得到所有浏览器与全平台的支持。我们终于可以逃出 App Store 封闭的秘密花园，重新回到属于 web 的那片开放自由的大地。&/p&&p&有趣的是，从上文中你也可以发现，组成 PWA 的各项技术的草案正是由上述各种私有方案背后的浏览器厂商或开发者直接贡献或间接影响的。可以说，PWA 的背后并不是某一家或两家公司，而是整个 web 社区与整个 web 规范。&strong&正是因为这种开放与去中心化的力量，使得万维网（World Wide Web）能够成为当今世界上跨平台能力最强、且几乎是唯一一个具备这种跨平台能力的应用平台。&/strong&&/p&&p&&a href=&/?target=http%3A///blog//phonegap-beliefs-goals-and-philosophy/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&「我们相信 Web，是因为相信它是解决设备差异化的终极方案；我们相信，当 Web 在今天做不到一件事的时候，是因为它还没来得及去实现，而不是因为他做不到。而 Phonegap，它的终极目的就是消失在 Web 标准的背后。」&i class=&icon-external&&&/i&&/a&&/p&&p&在不丢失 web 的开放灵魂，在不需要依靠 Hybrid 把应用放在 App Store 的前提下，让 web 应用能够渐进式地跳脱出浏览器的标签，变成用户眼中的 App。这是 Alex Russell 在 2015 年提出 PWA 概念的&a href=&/?target=https%3A//infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&原委&i class=&icon-external&&&/i&&/a&。&/p&&p&而又正因为 web 是一个整体，PWA 可以利用的技术远不止上述的几个而已：Ajax、响应式设计、JavaScript 框架、ECMAScript Next、CSS Next、Houdini、Indexed DB、Device APIs、Web Bluetooth、Web Socket、Web Payment、&a href=&/?target=https%3A//wicg.github.io/BackgroundSync/spec/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&孵化&i class=&icon-external&&&/i&&/a&中的 &a href=&/web/updates/2015/12/background-sync& data-editable=&true& data-title=&Background Sync API& class=&&&Background Sync API&/a&、&a href=&/?target=https%3A//streams.spec.whatwg.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Streams&i class=&icon-external&&&/i&&/a&、WebVR……开放 Web 世界 27 年来的发展以及未来的一切，都与 PWA 天作之合。&/p&&h2&&b&鱼与熊掌的兼得&/b&&/h2&&p&经过几年来的摸索，整个互联网行业仿佛在「Web 应用 vs. 原生应用」这个问题上达成了共识：&/p&&ul&&li&web 应用是鱼：迭代快，获取用户成本低；跨平台强体验弱，开发成本低。&strong&适合拉新&/strong&。&/li&&li&原生应用是熊掌：迭代慢，获取用户成本高；跨平台弱体验强，开发成本高。&strong&适合保活&/strong&。&/li&&/ul&&p&要知道，虽然用户花在原生应用上的时间要明显多于 web 应用，但其中&a href=&/?target=http%3A///report-mobile-users-spend-80-percent-time-just-five-apps-116858& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&有 80% 的时间是花在前五个应用中的&i class=&icon-external&&&/i&&/a&。&a href=&/?target=http%3A//www.recode.net///average-app-downloads-per-month-comscore& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&调查显示，美国有一半的智能手机用户平均每月新 App 安装量为零&i class=&icon-external&&&/i&&/a&，而月均网站访问量却有 100 个，更别提 Google Play 上&a href=&/?target=https%3A//youtu.be/EUthgV-U05w& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&有 60% 的应用从未被人下载过了&i class=&icon-external&&&/i&&/a&。于是，整个行业的产品策略清一色地&strong&「拿鱼换熊掌」&/strong&，比如笔者的老东家阿里旅行（飞猪旅行），web 应用布满阿里系各种渠道，提供「优秀的第一手体验」，等你用的开心了，再引诱你去下载安装原生应用。&/p&&p&&em&&img src=&/v2-af39ab8672aaf1234efca8acfa58d94d_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-af39ab8672aaf1234efca8acfa58d94d_r.jpg&&原生应用、当代 Web 与 PWA 图片来源: Hux & &a href=&/?target=https%3A///web/events/pwaroadshow/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Google&i class=&icon-external&&&/i&&/a&&/em&&/p&&p&但是，PWA 的出现，让鱼与熊掌兼得变成了可能 —— 它同时具备了 web 应用与原生应用的优点，有着自己独有的先进性：「浏览器 -& 添加至主屏/安装 -& 具备原生应用体验的 PWA -& 推送通知 -& 具备原生应用体验的 PWA」，PWA 自身就包含着从拉新到保活的闭环。&/p&&p&除此之外，PWA 还继承了 web 应用的另外两大优点：&strong&无需先付出几十兆的下载安装成本即可开始使用&/strong&，以及&strong&不需要经过应用超市审核就可以发布新版本&/strong&。所以，PWA 可以称得上是一种「流式应用（Streamable App）」与「常青应用（Evergreen App）」&/p&&h2&&b&未来到来了吗&/b&&/h2&&p&在笔者分享 PWA 的经历中，最不愿意回答的两个问题莫过于「PWA 已经被广泛支持了吗？」以及「PWA 与 ABCDEFG 这些技术方案相比有什么优劣？」，但是这确实是两个逃不开的问题。&/p&&h3&PWA 的支持情况？&/h3&&p&当我们说到 PWA 是否被支持时，其实我们在说的是 PWA 背后的几个关键技术都得到支持了没有。以浏览器内核来划分的话，Blink（Chrome、Oprea、Samsung Internet 等）与 Gecko（Firefox）都已经实现了 PWA 所需的所有关键技术（
），并已经开始探寻更多的可能性。EdgeHTML（Edge）&a href=&/?target=https%3A///msedgedev//the-progress-of-web-apps/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&简直积极得不能更积极了&i class=&icon-external&&&/i&&/a&，所有的特性都已经处于「正在开发中」的&a href=&/?target=https%3A///en-us/microsoft-edge/platform/status/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&状态&i class=&icon-external&&&/i&&/a&。最大的绊脚石仍然来自于 Webkit（Safari），尤其是在 iOS 上，上述的四个 API 都未得到支持，而且由于平台限制，第三方浏览器也无法在 iOS 上支持。（&a href=&/?target=https%3A///en-us/WindowsForBusiness/End-of-IE-support& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&什么你说 IE？&i class=&icon-external&&&/i&&/a&）&/p&&p&不过，也不要气馁，Webkit 不但在它 &a href=&/?target=https%3A//trac.webkit.org/wiki/FiveYearPlanFall2015& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2015 年发布的五年计划&i class=&icon-external&&&/i&&/a&里提到了 Service Worker，更是已经在最近实现了 Service Worker 所&a href=&/?target=https%3A//jakearchibald.github.io/isserviceworkerready/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&依赖&i class=&icon-external&&&/i&&/a&的 Request、Response 与 Fetch API，还把 Service Worker 与 Web App Manifest 纷纷&a href=&/?target=https%3A//webkit.org/status/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&列入了「正在考虑」&i class=&icon-external&&&/i&&/a&的 API 中；要知道，Webkit 可是把 Web Components 中的 HTML Imports 直接&a href=&/?target=https%3A//webkit.org/status/%23specification-web-components& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&列到「不考虑」里去了&i class=&icon-external&&&/i&&/a&……（其实 Firefox 也是）&/p&&p&更何况，由于 web 社区一直以来所追求的「渐进增强、优雅降级」，一个 PWA 当然可以在 iOS 环境正常执行。&a href=&/?target=https%3A///thinks/why-does-the-washington-posts-progressive-web-app-increase-engagement-on-ios/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&事实上，华盛顿邮报将网站迁移到 PWA 之后发现，不止是 Android，在 iOS 上也获得了 5 倍的活跃度增长&i class=&icon-external&&&/i&&/a&，（无论是不是它们之前的网站写得太烂吧），就算 iOS 现在还不支持 PWA 也&a href=&/?target=https%3A///thinks/ios-doesnt-support-progressive-web-apps-so-what/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&不会怎么样&i class=&icon-external&&&/i&&/a&，我们更是有理由相信 PWA 会很快在 iOS 上到来。&/p&&h3&PWA vs. Others&/h3&&p&贺老（贺师俊）曾说过：「从纯 Web 到纯 Native，之间有许多可能的点」。当考虑移动应用的技术选型时，除了 Web 与原生应用，我们还有各种不同程度的 Hybrid，还有今年爆发的诸多 JS-to-Native 方案。&/p&&p&虽然我在上文中用了「复仇」这样的字眼，不过无论从技术还是商业的角度，我们都没必要把 web 或是 PWA 放到 Native 的对立面去看。它们当然存在竞争关系，但是更多的时候，web-only 与 app-only 的策略都是不完美的，当公司资源足够的时候，我们通常会选择同时开发两者。&a href=&/?target=https%3A///thinks/progressive-web-apps-simply-make-sense/%3Futm_source%3Dmobilewebweekly%26utm_medium%3Demail%23fn-4857-1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&当然，无论与不与原生应用对比，PWA 让 web 应用变得体验更好这件事本身是毋庸置疑的。&i class=&icon-external&&&/i&&/a&「不谈场景聊技术都是扯淡」，&a href=&/?target=https%3A///%40owencm/the-surprising-tradeoff-at-the-center-of-question-whether-to-build-an-native-or-web-app-d2ad00c40fb2%23.ym83ct2ax& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我们仍然还是需要根据自己产品与团队的情况来决定对应的技术选型与平台策略，只是 PWA 让 web 应用在面对选型考验时更加强势了而已。&i class=&icon-external&&&/i&&/a&&/p&&p&&em&&img src=&/v2-2eddfe1f1ec_b.png& data-rawwidth=&2342& data-rawheight=&1674& class=&origin_image zh-lightbox-thumb& width=&2342& data-original=&/v2-2eddfe1f1ec_r.png&&众多的技术选型，以及笔者的一种猜测&/em&&/p&&p&笔者不负责任得做一些猜测：虽然&a href=&/question//answer/& class=&internal&&重量级的 Hybrid 架构与基础设施&/a&仍是目前不少场景下最优的解决方案；但是随着移动设备本身的硬件性能提升与新技术的成熟与普及，JS-to-Native 与以 PWA 为首的纯 web 应用，将分别从两个方向挤压 Hybrid 的生存空间，消化当前 Hybrid 架构主要解决的问题；前者将逐渐演化为类似 Xarmarin 这样针对跨平台原生应用开发的解决方案；后者将显著降低当前 Hybrid 架构的容器开发与部署成本，将 Hybrid 返璞归真为简单的 webview 调用。&/p&&p&这种猜测当然不是没有依据的瞎猜，比如前者可以参考阿里巴巴集团级别迁移 Weex 的战略与微信小程序的 roadmap；后者则可以参考当前 Cordova 与 Ionic 两大 Hybrid 社区对 PWA 的热烈反响。&/p&&h3&PWA in China&/h3&&p&看看 Google 官方宣传较多的 PWA &a href=&/?target=https%3A///web/showcase/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&案例&i class=&icon-external&&&/i&&/a&就会发现，FlipKart、 来自印度；Lyft、华盛顿邮报来自北美；唯一来自中国的 AliExpress 主要开展的则是海外业务。&/p&&p&由于中国的特殊性，笔者在&a href=&/question//answer/& class=&internal&&第一次&/a&聊到 PWA 时难免表现出了一定程度的悲观：&/p&&ul&&li&国内较重视 iOS，而 iOS 目前还不支持 PWA。&/li&&li&国内的 Android 实为「安卓」，不自带 Chrome 是一，可能还会有其他兼容问题。&/li&&li&国内厂商可能并不会像三星那样对推动自家浏览器支持 PWA 那么感兴趣。&/li&&li&依赖 GCM 推送的通知不可用，Web Push Protocol 还没有国内的推送服务实现。&/li&&li&国内 webview 环境较为复杂（比如微信），黑科技比较多。&/li&&/ul&&p&反观印度，由于 Google 服务健全、标配 Chrome 的 Android 手机市占率非常高，PWA 的用户达到率简直直逼 100%，也难免获得无数好评与支持了。&strong&笔者奢望着本文能对推动 PWA 的国内环境有一定的贡献。&/strong&不过无论如何，PWA 在国内的春天可能的确会来得稍微晚一点了。&/p&&h2&&b&结语&/b&&/h2&&p&「&a href=&/?target=https%3A//huangxuan.me/pwa-qcon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我们信仰 Web，不仅仅在于软件、软件平台与单纯的技术&i class=&icon-external&&&/i&&/a&，还在于&a href=&/?target=http%3A///blog//phonegap-beliefs-goals-and-philosophy/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&『任何人，在任何时间任何地点，都可以在万维网上发布任何信息，并被世界上的任何一个人所访问到。』而这才是 web 的最为革命之处，堪称我们人类，作为一个物种的一次进化。&i class=&icon-external&&&/i&&/a&」&/p&&p&请不要让 web 再&a href=&/p/& class=&internal&&继续离我们远去&/a&，浏览器厂商们已经重新走到了一起，而下一棒将是交到我们 web 应用开发者的手上。&a href=&youtu.be/y1B2c3ZD9fk?t=1h14m48s& data-editable=&true& data-title=&乔布斯曾相信 web 应用才移动应用的未来& class=&&&乔布斯曾相信 web 应用才移动应用的未来&/a&，那就让我们用代码证明给这个世界看吧。&/p&&p&&strong&让我们的用户，也像我们这般热爱 web 吧。&/strong&&/p&&p&黄玄，于 12 月的北京。&/p&&br&&br&&p&&em&注：在笔者撰文期间，Google 在 Google China Developers Days 上宣布了 &a href=&/?target=http%3A//& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 域名的启用，方便国内开发者访问。对于文中所有链向 &a href=&/?target=http%3A//& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 的参考文献，应该都可以在 cn 站点中找到。&/em&&/p&
今年 9 月份的时候，《程序员》杂志社就邀请我写一篇关于 PWA 的文章。后来花式拖稿，拖过了 10 月的 QCon，11 月的 GDG DevFest，终于在 12 月把这篇长文熬了出来。几次分享的不成熟，这次的结构算是比较满意了。「 可能是目前中文世界里对 PWA 最全面详细…
我觉得不是专业前端没有体会就不要强答了吧，外行凑热闹甩几句老掉牙的“装逼”有意思么……&br&&br&=========撕完逼的分割线===========&br&&br&0. 快&br&1. unix内核，搭环境方便方便最方便&br&2. alfred&br&3. retina屏&br&4. 可以联机iPhone的safari调试。&br&5. 可以用instruments很方便地测试网页在APP中的性能。&br&6. 可以装XCode开发React-Native。
我觉得不是专业前端没有体会就不要强答了吧，外行凑热闹甩几句老掉牙的“装逼”有意思么…… =========撕完逼的分割线=========== 0. 快 1. unix内核，搭环境方便方便最方便 2. alfred 3. retina屏 4. 可以联机iPhone的safari调试。 5. 可以用instruments很…
已有帐号？
无法登录？
社交帐号登录
1706 人关注
385 条内容
6688 人关注
1757 条内容
3406 人关注
209 条内容
7817 人关注
982 条内容
179 人关注
2095 条内容