渐进式Web应用(PWA)入门教程(上)
最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。
但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。
移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。你可以按照这篇文章一步一步地做,做完之后你的网站将可以实现离线访问,并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。
什么是渐进式Web应用?
渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致。
渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下:
- 你只需要关心W3C的Web标准,不用关心各种Native APP的代码。
- 用户可以在安装应用之前先试用。
- 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用户来讲更为的平滑。
- 渐进式Web应用的“安装”过程很快,只需要在主屏幕上添加一个图标即可。
- 渐进式Web应用启动时可以显示一个好看的启动画面。
- 你可以在渐进式Web应用中提供具有全屏体验的应用。
- 通过系统通知等形式提高用户的粘性。
- 渐进式Web应用将会在本地缓存必要的文件,所以渐进式Web应用会比普通的Web应用的性能更好。
- 轻量级安装——你只需要缓存几百KB的数据即可。
- 所有的数据传输必须使用安全的HTTPS连接
- 渐进式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/
渐进式Web应用(PWA)入门教程(上)相关推荐
- 迁移Hexo博客到Google渐进式Web应用(PWA)
如果说通过TravisCI实现博客的自动化部署,是持续集成这个概念在工作以外的一种延伸,那么今天这篇文章想要和大家分享的,则是我自身寻求技术转型和突破的一种挣扎.前段时间Paul同我聊到Web技术 ...
- 零基础 Amazon Web Services (AWS) 入门教程图文版(三)
原则上WDCP安装好了,就可以直接使用了,FTP.MySQL什么的应有尽有.但是本站Amazon AWS -- 免费的午餐不好吃一文中说到过这个问题,直接用WDCP的MySQL会导致EBS的I/O急剧 ...
- 零基础 Amazon Web Services (AWS) 入门教程图文版(四)
自上一篇之后,5天过去了,这篇文章总算是挤出来了... 其实看不看无所谓啦,都说了WDCP非常适合小白,随便折腾.要是折腾的时候遇到什么问题,欢迎留言探讨~ 五.新建站点 登录WDCP后台,首次登录会 ...
- 零基础 Amazon Web Services (AWS) 入门教程图文版(二)
上一篇讲到,主机正常运转了.但是此时如果直接访问公网IP是打不开网页的,因为主机上没有搭建Web服务器环境,防火墙也没有开放80端口,并且我们没有上传任何网页文件.所以这一篇主要介绍服务器环境的搭建. ...
- 零基础 Amazon Web Services (AWS) 入门教程 (列表)
在 Amazon Web Services 上托管 Web 应用程序 Web 应用程序 是指用户通过 Web 浏览器或专门的 Web 客户端访问的任何软件.Web 应用程序通常具有逻辑层级结构.例如, ...
- 零基础 Amazon Web Services (AWS) 入门教程图文版(一)
现在小站唯一的流量都靠AWS这个关键词了,刚好要用AWS重新建站,所以从头开始记录一遍吧. 所谓零基础,就是你可以没有任何AWS使用经历,仍然能够按照教程操作下去.所谓图文版,就是建议手机用户在没有连 ...
- Web 3.0入门教程
Web 3.0入门教程 课程英文名:What Is Web3? 此视频教程共5.5小时,中英双语字幕,画质清晰无水印,源码附件全 下载地址 百度网盘地址:https://pan.baid ...
- QEMU 虚拟机管理软件Web版,入门教程
当代的计算机系统中,虚拟化技术的应用,大大提升计算机的性能效率,减少计算机性能浪费. 在现代的计算机软件中,已经诞生出众多基于虚拟化技术应用的虚拟机软件.vmware.VirtualBox.QEMU. ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端开发入门教程,HTML5+CSS3+JS教程,达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
最新文章
- ajax data参数没有值,ajax $.get的data参数无法传递
- 理解java中的两种接口
- shell实例第3讲:获取随机8位数字
- Day6 Pyhton基础之文件操作(五)
- Laravel 查询某天数据 whereDate
- Linux系统挂载NTFS文件系统
- C语言学习:snprintf()函数
- Spring安全示例教程
- CTS(14)---Android O CTS 测试之Media相关测试小结(二)
- 模板之家php mysql_PHP+APACHE+MYSQL安装方法
- java实现录屏_java录屏截屏: 用java代码实现的录屏和截图截屏,并在springboot上实现...
- 不同数据量下主键类型的选择
- java quic kcptun_Server-网络加速Kcptun
- Http的会话跟踪和跨站攻击(xss)
- StringBuffer去掉最后一个字符
- bat批处理静默自动安装证书
- 子集构造法NFA转换成DFA
- Activiti 从入门到精通
- Android 编译 Jack简介
- Windows 如何配置 scratch 3.0 GUI