javascript - reproducir - youtube con pantalla bloqueada iphone

¿La aplicación móvil HTML5 se ejecuta mientras la pantalla del teléfono está apagada?

Question

Estoy interesado en crear una aplicación web basada en geolocalización HTML5 que aún podría estar funcionando cuando la pantalla del teléfono está apagada (por ejemplo, hacer un seguimiento de lo que está corriendo cuando su teléfono está en su bolsillo).

¿Hay alguna forma de mantener la aplicación en funcionamiento pero tener la pantalla apagada o hacer que la aplicación se ejecute en segundo plano mientras se utilizan otras aplicaciones? ¿Es esto posible al menos en algunos de los dispositivos móviles más populares (en particular, los dispositivos iOS y Android más nuevos)?

Answer 1

Mi aplicación de música es HTML5 y también necesita ejecutarse en segundo plano. El soporte para eso varía según el navegador móvil.

• Safari en iOS: continuará reproduciendo una o dos canciones en segundo plano
• Navegador nativo en Android: reproducirá una canción y luego se detendrá
• Firefox en Android: se detendrá cuando la pantalla se bloquee o el navegador pierda el foco o la canción termine
• Dolphin en Android: juega en el fondo! pero finalmente se detiene
• Opera en Android: mejor soporte de fondo, Javascript continúa ejecutándose y la música continúa reproduciéndose incluso cuando la pantalla está apagada o Opera se envía al fondo, pero finalmente se detiene después de un par de canciones.

Como pueden ver, es impredecible. La mitad de las veces termino tratando de poner mi teléfono en el bolsillo hacia atrás, tratando de mantener la pantalla encendida, hasta que accidentalmente la presiono, apesta totalmente. Anhelo el día en que el usuario tenga más control sobre la ejecución de aplicaciones HTML5 en segundo plano. Si tuviera que adivinar, diría que el soporte universal para eso está muy lejos, si es que alguna vez recibe tracción. Estoy siendo forzado a buscar una solución de aplicación nativa, aunque estoy casi seguro de que Apple nunca lo aprobará. Mientras tanto, mantendré la esperanza y seguiré probando los últimos navegadores móviles. Porque si realmente sucede, será increíble. :-)

También debo señalar que, según mi experiencia, para casi todas las combinaciones anteriores, usar HTML5 para ejecutar simultáneamente javascript, extraer datos de la red y reproducir música normalmente convertirá su teléfono en un horno y eliminará su batería con bastante rapidez. Ugg.

Además, si está utilizando jQuery Mobile (que en su mayoría es fantástico), verá un manejo táctil diferente en los diferentes navegadores. Por ejemplo, Firefox touch funciona muy bien, Dolphin es terrible y requiere un toque preciso de presionar y soltar para hacerlo bien. Eso no es culpa de HTML5 directamente, sino otro problema con el que estoy tratando.

Aquí hay otras ideas interesantes de otro desarrollador sobre HTML5 móvil.

ACTUALIZACIÓN: Acabo de (22 de mayo de 2013) descargué Opera en mi Samsung Galaxy S3 y tiene el mejor soporte HTML5 hasta el momento. Para mi aplicación, continúa ejecutando javascript en segundo plano, ya sea que la pantalla esté apagada, o si Opera está en segundo plano, al menos para un par de canciones.

Answer 2

Puedes usar Service Workers:

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

Un trabajador de servicios es un script que su navegador ejecuta en segundo plano, separado de una página web, abriendo la puerta a funciones que no necesitan una página web o la interacción del usuario. Hoy en día, ya incluyen características como notificaciones push y sincronización de fondo. En el futuro, los trabajadores del servicio podrían admitir otras cosas, como sincronización periódica o geoperfil.

Para ser precisos, las aplicaciones pueden registrar a un trabajador de servicio de la siguiente manera:

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

Una vez que el registro del trabajador de servicio sea exitoso, cualquier lógica de aplicación implementada en sw.js se ejecutará en segundo plano; incluso si la pestaña de aplicación está deshabilitada.