手機屏幕關閉時運行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/

服務工作者是您的瀏覽器在后台運行的腳本，與網頁分開，為不需要網頁或用戶交互的功能打開了大門。 今天，它們已經包含推送通知和后台同步等功能。 將來，服務工作者可能會支持其他內容，例如定期同步或地理圍欄。

確切地說，應用程序可以注冊服務工作者，如下所示：

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);
    });
  });
}

一旦服務工作者注冊成功，sw.js中實現的任何應用程序邏輯將在后台執行; 即使禁用了應用程序選項卡。