渐进式 Web 应用（PWA）入门教程（上）

[powertoolsteam]

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

---

最近关于渐进式 Web 应用有好多讨论，有一些人还在质疑渐进式 Web 应用是否就是移动端未来。

但在这篇文章中我并不会将渐进式 APP 和原生的 APP 进行比较，但有一点是可以肯定的，这两种 APP 的目标都是使用户体验变得更好。

移动端 Web 应用有很多优秀的概念让人应接不暇，但好在编写一个渐进式 Web 应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式 Web 应用。你可以按照这篇文章一步一步地做，做完之后你的网站将可以实现离线访问，并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。

什么是渐进式 Web 应用？

渐进式 Web 应用是一种全新的 Web 技术，让 Web 应用和原生 APP 的体验相近或一致。

渐进式 Web 应用它可以横跨 Web 技术及 Native APP 开发的解决方案，对于开发者的优势如下：

1. 你只需要关心 W3C 的 Web 标准，不用关心各种 Native APP 的代码。
2. 用户可以在安装应用之前先试用。
3. 在渐进式 Web 应用中，你不需要使用各种应用商店来分发应用，也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外，应用程序更新是自动进行的，无需用户交互，所以整体的使用体验对于用户来讲更为的平滑。
4. 渐进式 Web 应用的“安装”过程很快，只需要在主屏幕上添加一个图标即可。
5. 渐进式 Web 应用启动时可以显示一个好看的启动画面。
6. 你可以在渐进式 Web 应用中提供具有全屏体验的应用。
7. 通过系统通知等形式提高用户的粘性。
8. 渐进式 Web 应用将会在本地缓存必要的文件，所以渐进式 Web 应用会比普通的 Web 应用的性能更好。

9. 轻量级安装——你只需要缓存几百 KB 的数据即可。
10. 所有的数据传输必须使用安全的 HTTPS 连接
11. 渐进式 Web 应用可以离线缓存数据，并且会在重新连接互联网时重新同步数据。

渐进式 Web 应用发展的现状

渐进式 Web 应用才刚刚开始发展，但实际上在国内，有些网站已经实际开始 PWA 的实践了，例如：微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问，那这个 PWA 不就是和微信小程序一样吗，对是这样，二者的目的是一致的，就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。

但就目前来讲，PWA 是 Google 主推的一项技术标准，FireFox，Chrome 以及一些基于 Blink 的浏览器已经支持渐进式 Web 应用了，Edge 上对渐进式 Web 应用的支持还在开发。Apple 公司也表示会考虑在自己 Safari 支持 PWA。然而这项功能已经进入了 WebKit 内核的五年计划中。长期来看，对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段，在不支持渐进式 Web 应用的浏览器中，你的应用也只是无法使用渐进式 Web 应用的离线功能而已，除此之外的功能均可以正常使用。

而在微信这边，凭借庞大的用户基数和体量能否与 PWA 分庭抗礼乃至笑到最后目前还不得而知。

示例代码

大多数教程都讲述的是如何在 Chrome 上从零开始制作一个类似原生界面的应用。然而在这篇教程中，我们并不打算做一个单页面应用程序，所以在这我们也不必了解诸如 Material Design 等知识。那么下面我们就直接看示例吧。

你可以从GitHub中获取本教程对应的示例代码。

本示例中提供了一个有四个网页的网站，一个 CSS 文件和一个 JavaScript 文件。这个网站可以在所有的现代浏览器上正常工作（ IE10+）。如果你的浏览器支持渐进式 Web 应用，用户可以在离线状态下将会直接访问缓存中的页面。

要想运行此示例，请确保你已经安装了 Node.js 。并请打开命令行，使用以下命令来运行该示例：

node ./server.js [port]

以上命令中，[port]是可选部分，默认为 8888。使用 Ctrl + C 即可停止 Web 服务器。

打开基于 Blink 内核的浏览器（ Opera，Vivaldi，Chrome ），然后在地址栏中输入 http://localhost:8888/（注意端口号是否正确），即可访问该示例。你可以打开开发者工具（ F12 或者 Cmd/Ctrl + Shift + I ）来查看控制台信息。

查看首页，也可以在页面上点击一下，然后使用以下方法进入离线模式：

选中 Network 标签或者 Application -> Service Workers 标签下的“离线”选项。重新访问之前访问过的网页，之前网页仍然会加载：

连接移动端安装

除了在 PC 浏览器访问外，你也可以在移动设备上访问该示例。使用 USB 线缆将你的移动设备连接到电脑上，然后从右上角三个点菜单中打开 More tools - Remote devices 标签

点击左侧的 Settings 菜单，然后添加一条端口映射（ Port Forwarding ）的规则，将 8888 映射为 localhost:8888，现在你可以直接在手机打开 Chrome 然后访问 http://localhost:8888。

你可以使用浏览器的“添加到主屏幕”功能将当前网页添加到主屏幕，在你访问了几个页面之后，浏览器会将这个 Web 应用“安装”到你的设备上。浏览几个页面，关闭 Chrome 并将设备与电脑断开连接，点击桌面上生成的图标，你会看到一个 Splash 页面，并且你可以继续浏览之前浏览过的页面。

小结

通过本节对渐进式 Web 应用的介绍，相信大家对 PWA 是什么已经有了基本的认识。PWA 有无需担心有无网络的特点，并具有独立入口与独立的保护机制。新标准的推出很可能会带着 Web 应用在移动设备上浴火重生。所以满足 PWA 模型的前端开发工具，将逐渐成为移动操作系统的一等公民，并将向 Native APP 发起挑战。

在下节中我们将带你一起去看看，PWA 的原理是什么，以及它究竟是如何工作的，敬请期待。