找回密码
 立即注册
LiveVideoStack 首页 资讯 查看内容
  • QQ空间
  • 回复
  • 收藏

在“小程序”PWA上开发WebRTC(1)

2018-4-19 09:00

严格的说,PWA与微信小程序不同,前者更加开放,功能比Web更强(接近原生应用),而微信小程序更封闭,是Web的子集。随着Mozilla、微软和苹果陆续在PWA上投入,当然还有Google不遗余力的推动,PWA的生态越来越成熟,距离一个应用打通所有浏览器的目标越来越近。不过在当下,腾讯天然的流量和生态让微信小程序更具价值。本文来自appear.in的工程师Trond Kjetil Bremnes,介绍了在appear.in的PWA开发经验。LiveVideoStack对原文进行了摘译。


文 / Trond Kjetil Bremnes

译 / 王月美

审校 / 包研


WebRTC面临的最大挑战之一是跨平台提供一致、可靠的支持。对于大多数应用程序,尤其是那些在网络上启动的应用程序,这通常意味着除了支持网络应用程序之外,还需要开发原生或混合移动应用程序。渐进式网络应用程序(PWA)是一种新概念,它能够通过允许基于网络的应用程序在不引入中间混合框架的情况下,看起来并像本地移动应用那样运作,从而将实现应用程序在网络上统一。正如将要讨论的那样,这种方法优点颇多,但它对WebRTC应用程序确实是有意义的吗?


使你的WebRTC应用程序像PWA一样


什么是PWA


简而言之,渐进式网络应用程序(简称PWA)是一种带有一些额外功能的Web应用程序,是一种编写Web应用程序的新方式,它为你提供了一些操作系统通常不具备的“抓手”。WPA本身不是一个产品,至少它跟你口中所说的“安卓应用程序”不一样。这些技术集合使得网页看起来,在体验和操作方面更像是本机安装的应用程序。


“P”代表“渐进式增强”。首先,它初听起来感觉很奇怪,这意味着应用程序的功能集随着用户的使用而逐渐得以扩展。其次,这也意味着你不能真正依赖于应用程序正常运行的功能。相反,你需要逐步增强基于用户手机和操作系统功能的应用程序。由于它们使用的是幕后渐进式增强的方式,所以很可能你已经在使用PWA却不得知。


什么让PWA如此强大?


首先,就WebRTC而言,PWA可通过浏览器在任何地方工作,毕竟它们只是网页,用户无需下载任何东西。


其次,PWA可以大大减少应用程序的大小。由于你不需要嵌入浏览器,大多数运行时代码已经安装在客户端上。这意味着最小的WebRTC应用程序的大小可以用KB来衡量,甚至包括UI库。appear.in的PWA版本大小就只有200KB。而React和相关的库就占用了3/4的文件大小,接下来我们可能会做更多工作来进一步减少这类文件的大小。


Twitter的本地应用程序与PWA大小比较。来源:

https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY


第三,PWA让你依赖于浏览器的安全性。对网络浏览器安全性的看法——我仍然相信谷歌、Mozilla、微软和苹果这样的大型团队能够快速解决安全问题,也不愿意相信其他应用程序开发人员也会做的同样出色。


PWA安装


只要智能手机具有网页浏览器,就可以将网页添加到手机的主屏幕,这是用户在第一台iPhone上向手机添加新应用程序的唯一方法。自那时以来,这种很少使用的功能得以不断发展,现已变得不再只是一个简单的书签。


当一个网络应用程序满足一定数量的启发式算法时,浏览器会注意到,并开始推荐用户将该网络应用程序“安装”为PWA。这种安装增销与浏览器到浏览器的差别很大-例如Chrome会显示一个弹出窗口,三星互联网会有一个用户可以点击的明显标志。这就为用户提供了一个提示,即这不仅仅只是个文档,而是一个完整的网络应用程序。



Google的示例PWA显示了向主屏幕添加链接的选项 –https://github.com/googlearchive/voice-memos


常见的误解


关于PWA的一些讨论我已经一次又一次地驳回,但仍然值得在这里重申一下。


1.不仅仅应用于Android系统

虽然目前可能在Android上效果最好,但它们也可以在其他操作系统上工作。Chrome操作系统就是一个二者良好集成的地方。PWA都只是一些“普通”的网络应用程序,且一些额外的装饰的东西。只要有浏览器能够查看它们,它们就应该可以工作。


2.不仅仅事关谷歌

Mozilla、三星互联网和微软都对PWA API的开发投入了大量资金。此外,微软已宣布,他们将开始在Windows Store中列出PWA应用程序。iOS的支持也在进行之中,尽管它还没有完全完成,但每个发行版都会越来越好。


3.不仅仅应用智能手机终端

虽然目前手机的支持情况更好,但Chrome团队已宣布2018年是他们将PWA带入桌面的一年。


入门


开发PWA非常简单,最难的部分是让WebRTC启动并运行。我接下里将继续介绍并假设你已经完成了该任务的网络部分并准备好了一个正在运行的应用程序。如果没有,那么在这个网站上有很多其他的指南可以指导你实现这个目标。本指南是如何将你的WebRTC 网络应用程序转换为PWA。


先决条件


要构建渐进式网络应用程序,你需要了解两个关键概念:

  • Web App Manifest网络应用程序清单

  • Service Worker(服务工作线程)

以上是PWA之所以是PWA的两项关键技术。此外,该页面需要通过HTTPS提供服务(请注意,对于本地主机,这一要求是宽松的)。理想情况下,它也应该是高性能的,并能够在各种屏幕尺寸和设备上良好地响应并工作。


性能


在为智能手机编写网络应用程序时,你必须特别注意性能要求。尽管现在很多流行的设备比以往的笔记本电脑都要好,但这些设备会受到热量的限制,并且任何性能瓶颈都会对你造成10倍的打击。这就要求你在真实设备上进行测试 - 不要被设备仿真器和模拟器所迷惑。Chrome开发工具确实有很多旋钮和拨号盘来模拟调节,但是它永远都不像现实的手机那么真实。


WebRTC是一项资源密集型技术,对用户的硬件要求很高,因此你需要特别注意这一点。了解Chrome开发工具中的性能面板,并尽量减少不必要的重绘。


使用Chrome的开发工具来优化帧率


对于那些使用React来创建PWA的开发者的一句忠告:虚拟DOM算法非常热衷于在UI更新中删除和重新添加视频帧,从而造成巨大的性能瓶颈。所以要格外的小心,并避免此类情况的发生。幸运的是,这些重绘十分扎眼,特别是在测试真实设备上的站点时。


连接性差


由于PWA的使用主要是移动设备,因此你应该考虑到网络覆盖范围的变化。尽管WebRTC实际上不能脱机工作,但可能需要添加基本的离线支持。你的目标是提供类似于本地的体验,因此你应该尽量获取一些离线用户的体验。通过这种方式,你可以更好的向用户提供提示和信息,并向他们说明可以采取哪些措施来解决相应的问题。例如,当你的手机没有可用的网络连接时,本地Skype应用程序不显示过时落后的信息。如果你可以从设备的缓存中加载该应用程序,则加载时间会快得多。请注意,如若要根据Chrome将你的应用归类为PWA,你需要提供一些基本的离线功能。

在“小程序”PWA上开发WebRTC(二)

文章点评
相关文章