加载中 ...
首页 > 新闻资讯 > 经验心得 正文

进一步阅读:微信小程序和Google PWA

2019-07-13 09:45:32 来源:沈阳小程序开发 作者:沈阳软件开发

作者:Snow Wolf,来自Angular华人社区

我今天要和你谈谈一个比微信小程序更宏观的概念。——谷歌的PWA。

223253fuahlqzrtd2tg0ja.jpg

PWA是什么?

PWA的全称是“Progressive Web Apps”,它转化为中文是一种渐进的应用程序。这是Google于2015年6月15日提出的概念,见Alex Russell的https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/。

什么是渐进式应用?

亚历克斯写道:

在昨天的晚宴上,法国和弗朗西斯列出了新申请的几个特点:

响应:适应任何形式因素

不依赖网络:可以在Service Worker的支持下离线使用(H5中的新技术,appcache的升级版本)

像本地应用程序一样进行交互:用于浏览的“shell + content”模式和本机应用程序等交互式体验

保持最新:由于Service Worker提供的升级机制

,始终透明地升级到最新版本

安全性:防止通过TLS窥探通信(这是服务工作者需要的)

可发现:由于W3C的Manifest文件格式在“服务工作者”中注册,允许搜索引擎发现这些应用程序,因此具有“应用程序”等唯一标识。

“可重新触摸”:访问操作系统的“可重新触摸”界面,例如推送通知

可安装:通过浏览器提供的提示,您可以将其添加到主屏幕,允许用户“保留”有用的应用程序,而不是去应用程序商店进行安装,这太麻烦了。

可链接:这意味着它们是零电阻,零安装且易于共享。 URL对社交沟通更加节能。

PWA怎么用?

使用PWA的过程可能是这样的:

这货开始就是一个普通网页:

223253p8z89iq8e2ip2332.jpg

然后,这鬼是什么?

223254hbkwuhz7bmvqi8ob.jpg

这个网站看起来不错,然后接受它!

223254tahhrpohe9iof3a6.jpg

它出现在手机的第一个屏幕上,很快就会上市!

223254riiqirrbpkgipv1f.jpg

把它指向像汇海这样的本地应用程序:

223255zp6va6dp49bss9tb.jpg

看,汇海与本地应用程序没什么不同:

223255mpeyqysjyvcgsegi.jpg

PWA的好处

Web应用程序(网页)和本地应用程序(Apps)各有优势,例如:

不需要安装Web应用程序,因此减少了用户流失(想想安装应用程序的犹豫不决)

Web应用程序很容易传播,只要你在微信或QQ中发送一个URL,很多人就会去看它(比如这篇文章^ _ ^)

Web应用程序集合,转发和返回非常有用

保留本地应用程序的比例相对较高。您看到URL然后返回的概率大约是本地应用程序的1/3。

本地应用可以推送通知,而网络应用仅在浏览器打开时才能正常工作

本地应用程序可以脱机使用,只要它们设计得不受网络环境的影响

本地应用可以访问更丰富的功能,例如更大的本地存储空间

那么,它们可以组合成一个吗?这就是PWA所做的!

通过上述步骤,PWA允许用户获得两种好处。这对应用程序的用户和开发人员都有意义。

如何实现PWA?

事实上,我们可以从Alex的描述中看到,我们与技术中的PWA的实现并不遥远:

Web应用开发技术

已经可用。

特别是,由于Angular等SPA应用程序的普及,SPA不仅响应速度更快,而且更接近本机应用程序体验,并且使我们能够完全独立于服务器而工作。

离线存储技术

有人可能还记得一种名为AppCache的技术,该技术已被弃用,现在已由Service Worker取代。这是一个功能更强大的AppCache,它不仅可以存储HTML/JS等静态文件,而且还允许您在客户端设备上运行模拟的超轻量级Web服务器,您可以在其中编写节点程序。

这是新H5标准的一部分,而不是PWA特定的标准。

推送通知

H5标准中已经有了用来推送通知的API(用过Web Gmail的话应该见过),现在只要把它和操作系统的API对接就行了。当然,这最好由操作系统提供支持,这已经实现了,那就是新推出的Android 7。

App壳程序

这个壳程序其实自己来实现也没问题,技术上没啥难度,不过不用重复造轮子了,因为官方已经出了一个,参见https://github.com/GoogleChrome/application-shell。如果用Angular 2就更幸福了,因为Angular 2还制作了一个Angular 2专用的壳:https://github.com/angular/mobile-toolkit。不过,它现在还软件定制

ad.jpg

处于未发布状态,早鸟可以开始提前尝试了。

Angular 2与PWA

从Angular 2发行之前,在Google开发技术专家(GDE)的社区中就已经有很多位GDE在做PWA的技术实验并发表了很多文章(抱歉,由于这是私密社区,我还不能翻译了发出来)。

相信在不就的将来,基于Angular 2的PWA就会实现完美的整合,并公开发表更多面向公众的文章。届时我会找一些优秀文章翻译到中文社区来,敬请期待。

微信小程序与PWA

xxxx 虽然微信小程序概念的提出比PWA晚了半年,不过相信张小龙这个级别的产品经理不会是简单的抄袭PWA概念,而是会发挥微信生态圈的优势,提供更广阔的应用场景。或许我们应该把微信小程序看做PWA的一种优质实现。

XX

“沈阳软件公司”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服QQ:55506560,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。