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

最近关于渐进式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 模型的前端控件，如纯前端表格控件SpreadJS，将逐渐成为移动操做系统的一等公民，并将向Native APP发起挑战。

在下节中咱们将带你一块儿去看看，PWA的原理是什么，以及它到底是如何工做的，敬请期待。

原文连接：https://www.sitepoint.com/ret...