渐进式Web应用(PWA)入门教程(上)

综合技术 2018-05-18 阅读原文

最近关于渐进式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应用,用户可以在离线状态下将会直接访问缓存中的页面。

要想运行此示例,请确保你已经安装了 Nonde.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/retrofit-your-website-as-a-progressive-web-app/

博客园精华区

责编内容by:博客园精华区阅读原文】。感谢您的支持!

您可能感兴趣的

Apply These 5 Secrets to Magically Transform Brows... Enticing customers into your store is only the first part of the challenge for r...
What is the Tor Browser? How it works and how it c... The Tor Browser is a web broswer that anonymizes your web traffic using the Tor ...
vue-router 源码:路由模式 前端的路由模式包括了 Hash 模式和 History 模式。 vue-router 在初始化的时候,会根据 mode 来判断使用不同的路由模式,从...
数据太少 Firefox 考虑采用可选择退出的遥测数据收集... Firefox 的遥测数据收集是在询问用户同意后才进行的,也就是收集默认不启用。 Mozilla 工程师抱怨现有的数据收集方式没有提供可用的数据,无...
Solution to an ugly cookie law European Union has a law that addressed privacy issues of the Internet users. T...