文档章节

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

葡萄城技术团队
 葡萄城技术团队
发布于 2018/05/18 09:26
字数 1818
阅读 1819
收藏 38

最近关于渐进式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/retrofit-your-website-as-a-progressive-web-app/

 

本文是由葡萄城技术团队发布,转载请注明出处:葡萄城控件

© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 417
博文 599
码字总数 933111
作品 20
西安
高级程序员
私信 提问
加载中

评论(2)

葡萄城技术团队
葡萄城技术团队 博主

引用来自“窗外有个蓝蓝天”的评论

Nonde.js打错了吧

回复@窗外有个蓝蓝天 : 是的,睿智如你,感谢勘误,邀请您在http://gcdn.grapecity.com.cn/showtopic.aspx?topicid=12244&postid=62979#62979,赠送您300金币
窗外有个蓝蓝天
窗外有个蓝蓝天
Nonde.js打错了吧
[译]基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

渐进式web应用是大势所趋。越来越多的大公司开始使用这些技术(比如推特:https://mobile.twitter.com/)。 想象你可以在地铁中浏览一个web应用,这个应用能够向用户推送通知并且提供实时的数...

neal
2017/05/11
0
0
PWA(Progressive Web App)入门系列:(一)PWA简介

前言 PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习。 什么是PWA PWA全称Progressive W...

lecepin
2017/03/22
0
0
渐进式Web应用程序的深入概述

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://www.grapecity.com.cn/blogs/wijmo-depth-overview-progressive-web-app...

葡萄城技术团队
2018/09/28
29
0
是的,Safari 支持 Service Worker 了

12月 20日,Apple 发布的 Safari 46 技术预览版里,Mac 端的 Safari 将默认打开 Service Worker, 是的,Safari 支持 Service Worker 了,PWA 时代不远了。 其实回顾一下, 2017 年 7 月 14...

2017/12/21
0
0
Google Chrome将很快允许用户通过地址栏安装PWA应用

谷歌一直致力于将“渐进式 Web 应用”(简称 PWA)直接整合到 Chrome 浏览器上,在此前发布的更新中,其已经极大地改善了在该浏览器中的 PWA 体验。不过最新消息是,谷歌将更进一步 —— 允许...

稿源:
2019/03/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Numpy处理图片方法

在进行图像领域的深度学习的时候经常需要对图片进行处理,包括图像的翻转,压缩,截取等,一般都是用Numpy来处理。处理起来也很方便。 In[3] # 导入需要的包 import numpy as np import matp...

北方的郎
20分钟前
7
0
AMD集中擢升高管:从Intel挖了个高手

  1 月 17 日,AMD 官方宣布多项人事升迁、新人任命,擢升了四位高级副总裁:   AMD 同时还宣布, 聘请行业资深人士 Daniel McNamara 出任高级副总裁兼服务器业务部总经理,负责在第二代...

水果黄瓜
25分钟前
6
0
什么是泛型?

一、泛型的概念 泛型是 Java SE5 出现的新特性,泛型的本质是类型参数化或参数化类型,在不创建新的类型的情况下,通过泛型指定的不同类型来控制形参具体限制的类型。 二、泛型的意义 一般的...

hncboy
59分钟前
7
0
dynamic-connectivity 动态连通性问题之 quick-union 算法

quick-union 的思想是:若对象 p 的 root_id 和对象 q 的 root_id 相等,则认为 p 和 q 连通。 若要将对象 p 和对象 q 连通(已知两对象未连通),则将 p 的 root_id 的值设为 q 的 root_id ...

Phpythoner_Alei
今天
51
0
OSChina 周六乱弹 —— 实在选不出来就唱国歌

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享阿冗的单曲《你的答案》。--祝大家在2020年都找到自己答案。 《你的答案》- 阿冗 手机党少年们想听歌,请使劲...

小小编辑
今天
291
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部