手机屏幕关闭时运行HTML5移动应用程序？

Question

我有兴趣创建一个基于HTML5地理位置的网络应用程序,当手机屏幕关闭时,该应用程序仍然可以运行(例如,跟踪手机放在口袋里时的运行距离).

有没有办法让应用程序继续运行,但屏幕关闭,或者在使用其他应用程序时让应用程序在后台运行？至少在某些流行的移动设备上是否可行(特别是较新的iOS和Android设备？)

Answer 1

我的音乐应用是HTML5,还需要在后台运行.对此的支持因手机浏览器而异.

• iOS上的Safari:将继续在后台播放一首或两首歌曲
• Android上的原生浏览器:播放一首歌然后停止播放
• Android上的Firefox:当屏幕锁定或浏览器失去焦点或歌曲结束时将停止
• 安卓上的海豚:在后台播放!但最终停止了
• Android上的Opera:更好的后台支持,Javascript继续运行,音乐继续播放,即使屏幕关闭或Opera发送到后台,但最终在几首歌后停止.

正如你所看到它的命中或错过.有一半时间我最终试图将手机放在我的口袋里,试图让屏幕保持开启,直到我不小心按下它 - 完全糟透了.我渴望用户能够更好地控制在后台运行HTML5应用程序.如果我不得不猜测我会说,对它的普遍支持是非常遥远的,如果它甚至有牵引力.即使我几乎是积极的,苹果也永远不会批准它.与此同时,我仍然充满希望并继续测试最新的移动浏览器.因为如果真的发生它会很棒.:-)

我还应该指出,根据我的经验,对于几乎所有上述组合,使用HTML5同时运行javascript,提取网络数据和播放音乐通常会将手机变成烤箱并快速杀死电池.UGG.

此外,如果您使用的是jQuery Mobile(这非常棒),您将在不同的浏览器上看到不同的触摸处理.例如,Firefox touch效果很好,Dolphin非常糟糕,需要精确的触摸和保持 - 释放才能正确使用.这不是HTML5的直接错误,而是我正在处理的另一个问题.

以下是另一位开发人员对移动HTML5 的有趣想法.

更新:我刚刚(2013年5月22日)在我的三星Galaxy S3上下载了Opera,到目前为止它拥有最好的HTML5支持.对于我的应用程序,它继续在后台运行javascript,无论屏幕是关闭,还是Opera被推到后台,至少有几首歌曲.

Answer 2

您可以使用服务工作者：

https://developers.google.com/web/fundamentals/primers/service-workers/

Service Worker 是浏​​览器在后台运行的脚本，与网页分开，为不需要网页或用户交互的功能打开大门。今天，它们已经包含推送通知和后台同步等功能。将来，Service Worker 可能会支持其他功能，例如定期同步或地理围栏。

准确地说，应用程序可以按如下方式注册 Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

service worker注册成功后，sw.js中实现的任何应用逻辑都会在后台执行；即使应用程序选项卡被禁用。