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

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

2018-4-19 09:01

代码示例


现在,让我们继续看一些示例代码,以帮助你入门。我假设你已经安装了一个网络应用程序并准备好了。


Manifest(清单)


网络应用程序清单是你通常放在标记内的更为结构化的版本。这里,你可以定义应用程序的名称,图标,主题颜色以及浏览器用于定义用户体验的一些其他的提示。下面,你将会看到一个相当简单的清单示例。



毫无疑问,name是用于启动画面和主屏幕的应用程序名称。当应用程序的全名太长而无法全部显示时,可选的short_name将会显示在手机的主屏幕上。 background_color用于屏幕背景颜色设置。


start_url描述应用程序在打开时应该启动的URL。通常设置为.或/。这意味着用户可以进一步浏览路径,并且仍然将“主”页面添加到主屏幕。这与“普通”书签的工作方式不同,即你在书签上的任何页面URL都是你获得的URL。即使用户从一篇文章中添加它,也允许CNN PWA始终从根路经开始加载。例如,如果用户在安装PWA时访问https://cnn.com/article/all-is-well-with-the-world.html,它仍会加载https://cnn.com。小窍门是在URL的末尾添加?openedFromHomescreen来跟踪使用情况。


display用于描述应用程序在启动时的外观。将其设置为“standalone”可以将所有浏览器镶边剥离,并使它看起来更像本机应用程序。默认设置是“browser”,即它将在设备的默认浏览器中打开。


icons是用于应用程序的一组图标。操作系统会根据屏幕大小和像素大小来选择与用户设备最佳匹配的数据。


有关应用程序清单的更全面描述,请查看MDN的优秀文章MDN’s excellent article (https://developer.mozilla.org/en-US/docs/Web/Manifest)。


为了帮助你自动配置,我推荐该网站https://tomitm.github.io/appmanifest/。


Service Worker-服务工作线程


Service Worker是PWA的第二个重要部分。简而言之,服务工作线程是一个可编程的代理服务器和缓存。它存在于自己的线程中,独立于代码执行和运行时环境中的其他网络应用程序,甚至可以在网页未打开时运行代码。这是你编写缓存策略并设置推送通知的地方。


关于如何编写服务工作线程有很多的资源,所以在此我不会详细介绍它是如何工作的,或者如何编写。你可以在MDN更详细地阅读并参考学习。如果你不想自己编写,Google的Workbox工具箱是管理服务工作线程的一个很好的库。它具有高度的可配置性,并且可以消除很多自己从头开始创建时的疑难和令人头痛的问题。


为了让你的应用程序被Chrome分类为PWA,应用程序需要加载服务工作线程和某种脱机功能。至少,你必须能够在连接断开时提供服务。


文件处理


需要特别注意的一点是,服务工作线程文件的位置非常重要。服务工作线程只能缓存它所在的同一文件夹中的或者是子文件夹下的资源。为了获得最大的缓存能力,我建议尽可能地将其放置在根目录中。


务必注意,服务工作线程运行时生命周期与网络应用程序的其余部分完全分离。安装和更新生命周期也截然不同。通常,只要浏览器发现文件已更改,就会安装新的服务工作线程。然而,生活并不总是这么简单。已经有很多的“僵尸”服务工作线程无限期的存活在那里,并无限期地缓存陈旧过时的内容。如果你决定从头开始自己创建一个服务工作线程,请考虑在里面放入一个“终止-开关” – 即服务工作线程完全取消无效缓存并重新安装的一种方法。


另一点也非常重要-不要像对待其他资源一样,使用哈希策略来使其失效并进行替换。上面所提到的Workbox库已经建立了解决这个问题的方式,并确保在应用程序更改时重新生成有有效缓存。


推送通知


我也特别想提一提推送通知。尤其是对于WebRTC应用程序,推送通知是将人们吸引到对话中的强大方式,因此我建议你花时间来完善它们。Peter Beverloo已创建了一个用于测试推送通知功能的强大工具。我强烈推荐你试一试。该网站可以让你进行试验并找出哪些功能适用于哪种设备和哪种浏览器。


权限


为了能够将推送通知发送到用户的手机上,你首先必须申请权限。在页面打开时立即请求推送通知的权限通常被认为是不佳的形式。请确保用户知道为什么他们需要这些推送,并及时地向他们提供增值服务。另外值得注意的是,一旦用户停止使用你的应用程序,并且不与你的通知进行交互,则该权限最终将被撤销。使得通知与用户息息相关并且是具有价值的,才能获得最大利益。阻止通知也很容易,所以最好不要指望被应用程序准许的通知能够按预期设想一样有效。


技巧和窍门


相机的方向


在手机上使用WebRTC时,你需要特别注意相机的方向。台式电脑通常只提供单个相机流,只要使用getUserMedia,它就会理所当然地默认为内置摄像头或为操作系统中的任何默认设置。


完全不同的是,在开发WebRTC智能手机客户端时,你必须考虑大部分的手机都是具有两个摄像头的。getUserMedia API允许你请求一个首选摄像头,因此确保用户使用前置摄像头。如果不是,它就很可能会默认为后置摄像头。另开发者更伤脑筋的是,手机可能会快速翻转,故而你应该建立能够适时更改摄像头的功能。但是由于你需要为新数据流提供RTC连接,因此在传输过程中更改相机可能有点棘手。


如果你不想解决该问题,另一个方法是进入预呼叫设置页面,你可以在那里更改相机的方向。


“适用性”


内联关键事物


为了避免应用程序加载时出现闪烁的白框,你应该内联重要资产。如果你的应用具有背景颜色的设置,请考虑将其添加到或标记中,以使其能够立即加载。其次,你应该关注应用程序壳模模型。简而言之:定义应用程序加载到内部的核心外壳,且这个外壳应该尽可能的轻薄。第三,观察你是否可以识别一组最关键的样式表规则并将它们进行内联。你也可以使用rel =“preload”来获取关键资产。


想加载更快?查看离线缓存来获得即时加载时间以进行回访。


使用平台


为了进一步提高应用程序的适用性,一定要充分利用平台的功能。在一些浏览器上,你可以使用页面上的按钮生成本机共享对话框,通过它来邀请用户参加电话会议。


这样的API有很多,所以你可以花点时间了解正在开发的一些新的API,并考虑如何实现它们。并可使用功能检测来确保功能的实际可用。显然,千万不要依赖于你支持的平台上所没有的功能。


Chrome开发者工具


Chrome开发者工具将是你的新起点,它是一款值得学习的、功能非常强大的工具。“性能”选项卡将显示你的应用程序如何实时运行。请定期在你的开发者计算机和实际设备上查看此信息。我这里强调Chrome Developer Tools,但绝不是让你在其他浏览器中测试你的应用程序。


应用


应用程序选项卡是一个你可以在其中找到制作应用程序的部分概述的地方。它会读取你的应用程序清单,并为缺少的或不工作的部分提供提示和线索。

“Add to homescreen(添加到主屏幕)”是一个有用的按钮,它将触发代码的安装路径,并会在应用程序的某些部分不遵循PWA启发式时通知你。另外,这里也是测试和诊断服务工作线程的地方。


观察PWA应用程序清单


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


来自: LiveVideoStack
文章点评
相关文章