Opciones para probar los trabajadores del servicio a través de HTTP

Quiero probar a los trabajadores del servicio, pero tengo una configuración de host virtual y parece que no puedo habilitar https en localhost.

¿Cómo puedo incluir en la lista blanca la URL de mi host virtual local para probar los trabajadores del servicio cada vez que intento registrarme para el trabajador del servicio en el host local? Chrome dice que se requiere https para habilitar el trabajador de servicio. ¿Cómo puedo superar esta restricción al menos para las pruebas locales?

En general, necesita entregar tanto su página como el script de trabajador de servicio a través de HTTPS para poder utilizar trabajadores de servicio. El fundamento se describe en Preferir orígenes seguros para nuevas funciones potentes .

Existe una excepción al requisito de HTTPS para facilitar el desarrollo local: si accede a su página y al script del trabajador del servicio a través de http://localhost[:port], o mediante http://127.x.y.z[:port], los trabajadores del servicio deben habilitarse sin más acciones.

En versiones recientes de Chrome, puede solucionar este requisito durante el desarrollo local a través de chrome://flags/#unsafely-treat-insecure-origin-as-secure, como se explica en esta respuesta .

Firefox ofrece una funcionalidad similar a través de la devtools.serviceWorkers.testing.enabledconfiguración.

Tenga en cuenta que esta funcionalidad solo está destinada a facilitar las pruebas que de otro modo no podrían llevarse a cabo, y siempre debe planificar el uso de HTTPS cuando entregue la versión de producción de su sitio. ¡No pida a los usuarios reales que sigan los pasos para habilitar esas banderas!

Si desea depurar el trabajador de servicio de un dispositivo móvil conectado de un para una prueba de comportamiento real de una aplicación web progresiva, las opciones de inicio de ssl chrome no ayudan y definitivamente no necesita comprar certificados.

@ chris-ruppel mencionó la instalación de software proxy, pero en realidad hay una forma más fácil de usar el reenvío de puertos :

Suponiendo que conecte y depure su dispositivo usando Chrome:

• En Chrome Dev Tools, "Dispositivos remotos", abra "Configuración" y agregue un "Reenvío de puertos". regla de .
• Si su configuración de localhost se ejecuta en localhost: 80,
• simplemente agregue una regla "Puerto de dispositivo 8080" (puede ser cualquier puerto> 1024)
• y la dirección local "localhost: 80" (o mytestserver.sometestdomainwithoutssl.company:8181 o lo que sea)

Después de hacer eso, puede llamar a la URL " http: // localhost: 8080 " en su dispositivo móvil y será respondida por "localhost: 80" en su PC / servidor de prueba real . Funciona perfectamente con los trabajadores del servicio como si fuera su máquina local ejecutándose en su móvil.

Funciona también para múltiples reenvíos de puertos y diferentes dominios de destino, siempre que recuerde usar puertos sin privilegios en su dispositivo móvil. Ver captura de pantalla:

La fuente de esta información es la documentación de dispositivos remotos de Google: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (pero a abril de 2017 no es muy claro leer esto respuesta simple fuera de eso)

A menudo quiero depurar y probar en un dispositivo real. Un método que se me ocurrió implica enrutar el tráfico de red del teléfono a través de Charles Proxy durante el desarrollo local. A diferencia de todas las soluciones específicas de Chrome, esto funciona con cualquier navegador de su teléfono.

1. Ejecute Charles en mi computadora portátil (que también sirve a mi sitio web con Service Worker). Una vez que Charles se esté ejecutando, anote la IP / puerto para el Paso 2.
2. Configure el dispositivo móvil para usar mi computadora portátil como proxy.
   • Para Android, simplemente toque y mantenga presionado su WiFi en Configuración> Modificar red > Configuración avanzada > Proxy . Utilice Manual para configurar la IP / puerto.
   • Para iOS, haga clic en el icono (i)> sección Proxy HTTP . Seleccione Manual , luego configure la IP / puerto.
3. Visitar localhosten mi dispositivo móvil ahora permite registrar y probar al trabajador de servicio.

La forma más fácil de probar pwa, en mi caso, fue usando ngrok. https://ngrok.com/download inicie sesión, obtenga su token y configúrelo!

Cuando ejecute, ./ngrok http {your server port}asegúrese de usar https, que se mostrará en la terminal después de ejecutar este comando anterior.

Podrías usar https://surge.sh , es para alojar una página web estática, si visita aquí: https://surge.sh/help/securing-your-custom-domain-with-ssl podrá ver cómo configurar un certificado ssl

Como Jeff mencionó en la primera respuesta, no necesita https en el nivel de localhost para probar Service Workers. Los trabajadores del servicio se registrarán y trabajarán perfectamente siempre que acceda al dominio localhost, sin HTTPS.

Una vez que haya probado su aplicación en localhost y quiera ver cómo funciona con https de verdad, el enfoque más simple sería cargar su aplicación en GitHub. Puede crear un dominio público de forma gratuita (¡y con HTTPS!).

Aquí están las instrucciones: https://pages.github.com/

Si desea probar los trabajadores del servicio en un dispositivo cliente que no puede ejecutar un servidor web en localhost, la técnica general es la siguiente:

1. Dale a tu servidor un nombre de host.
2. Dale un certificado a este nombre de host.
3. Haga que las IP confíen en la CA que emitió este certificado.

Pero esto es más fácil decirlo que hacerlo. En una AMA de noviembre de 2016 en Reddit, un representante de Let's Encrypt reconoció que HTTPS en una LAN privada "es una pregunta realmente difícil, y creo que nadie ha encontrado una respuesta satisfactoria hasta ahora".

Las formas comunes de asignar un nombre de host a su computadora implican darle una dirección IP interna estable, no una que cambie diariamente o cada vez que apague y encienda su dispositivo de puerta de enlace a Internet. Deberá configurar el servidor DHCP en su red, generalmente el de su puerta de enlace, para configurar una "reserva" que asocie una dirección privada en particular (generalmente dentro 10/8o192.168/16 ) con la dirección MAC de la tarjeta Ethernet de su estación de trabajo de desarrollo. Para ello, lea el manual de su pasarela.

Ahora que su estación de trabajo de desarrollo tiene una dirección IP estable, existe una compensación de tiempo / dinero. Si está dispuesto a aprender el uso avanzado de DNS y OpenSSL e instalar un certificado raíz en todos los dispositivos con los que planea probar:

1. Ejecute un servidor DNS interno en su red. Esto podría estar en su puerta de enlace o en su estación de trabajo de desarrollo.
2. Configure su servidor DNS para que sea autorizado para algunos TLD inventados y recursivo para otros TLD.
3. Dé un nombre estable a la dirección IP privada de su estación de trabajo de desarrollo. Esto le da un nombre interno.
4. Configure su servidor DHCP para dar la dirección de este servidor DNS a otros dispositivos que obtengan concesiones.
5. En su estación de trabajo de desarrollo, utilice OpenSSL para generar pares de claves para una autoridad de certificación privada y el servidor web.
6. Con OpenSSL, emita un certificado raíz para la CA y un certificado para el nombre interno del servidor web.
7. Configure HTTPS en el servidor web de su estación de trabajo de desarrollo con este certificado.
8. Instale el certificado raíz de la CA como un certificado raíz confiable en todos los dispositivos.
9. En todos los dispositivos, acceda a este nombre interno.

Si no puede agregar un certificado raíz o controlar el DNS local, por ejemplo, si planea probar con dispositivos que son propiedad de otros (BYOD) o con navegadores más bloqueados que no permiten a los usuarios agregar certificados raíz confiables, como los de los principales consolas de videojuegos, necesitará un nombre de dominio completo (FQDN):

1. Compre un dominio de un registrador que ofrezca DNS con una API . Esto podría ser directamente dentro de un TLD o de uno de los proveedores de DNS dinámicos que se haya incluido en la lista de sufijos públicos. (Los proveedores de DNS dinámicos que no son PSL son inaceptables debido a los límites de velocidad impuestos por Let's Encrypt ).
2. En el archivo de zona de este dominio, apunte un A registro a la dirección IP privada de su estación de trabajo de desarrollo. Esto le da a su estación de trabajo de desarrollo un FQDN.
3. Utilice Dehydrated , un cliente ACME que admite el dns-01desafío, para obtener un certificado para este FQDN de la autoridad de certificación Let's Encrypt.
4. Configure HTTPS en el servidor web de su estación de trabajo de desarrollo con este certificado.
5. En todos los dispositivos, acceda a este nombre.

Creo que la forma más fácil de probar al trabajador del servicio es encontrar un proveedor de alojamiento gratuito. hoy en día, existen muchos sitios que ofrecen alojamiento gratuito. puede alojar fácilmente su aplicación en estos servidores gratuitos.

Sobre todo uso heroku y netlify . esto es gratis y fácil de usar.