Opzioni per testare i lavoratori del servizio tramite HTTP


93

Voglio testare i lavoratori del servizio ma ho una configurazione host virtuale e non riesco ad abilitare https su localhost.

Come posso inserire nella whitelist l'URL del mio host virtuale locale per testare i service worker ogni volta che provo a registrarmi per il service worker sull'host locale? Chrome dice che https è necessario per abilitare il lavoratore dell'assistenza. Come posso superare questa restrizione almeno per i test locali.

Risposte:


137

In generale, devi servire sia la tua pagina che lo script di service worker tramite HTTPS per poter utilizzare i service worker. La logica è descritta in Preferire origini sicure per nuove potenti funzionalità .

C'è un'eccezione al requisito HTTPS in atto per facilitare lo sviluppo locale: se accedi alla tua pagina e allo script di service worker tramite http://localhost[:port]o tramite http://127.x.y.z[:port], i service worker dovrebbero essere abilitati senza ulteriori azioni.

Nelle versioni recenti di Chrome, puoi aggirare questo requisito durante lo sviluppo locale tramite chrome://flags/#unsafely-treat-insecure-origin-as-secure, come spiegato in questa risposta .

Firefox offre funzionalità simili , tramite l' devtools.serviceWorkers.testing.enabledimpostazione.

Tieni presente che questa funzionalità ha il solo scopo di facilitare i test che altrimenti non sarebbero in grado di svolgersi e dovresti sempre pianificare di utilizzare HTTPS quando fornisci la versione di produzione del tuo sito. Non chiedere a utenti reali di eseguire i passaggi per abilitare questi flag!


grazie jeff lo proverò subito. sicuramente lo sto usando solo per i test .. avevo bisogno di una soluzione alternativa disperata per il momento ... !! non conosco la pratica ideale .. ma tempi disperati richiedono misure disperate ... !! potresti per favore ridarmi i miei 4 punti duramente guadagnati ... !!
Eliminerò

1
utilizzando il service worker in localhost, ma quando ha provato a recuperare il file sw.js dal server mostra net :: ERR_INSECURE_RESPONSE,
sp1rs

1
Grazie! Ho aggiornato il corpo principale da leggere devtools.serviceWorkers.testing.enabled.
Jeff Posnick

5
Per chiunque abbia avuto problemi a trovare quanto sopra - apri FF - strumenti di sviluppo - ruota dentata delle impostazioni - impostazioni avanzate - abilita sw su http. Quindi puoi andare su: debug di # worker nell'URL o tools - web dev - service worker nella barra degli strumenti. Avvia l'operaio!
Sten Muchow

La risposta di @StenMuchow sta funzionando per me in chrome mac e windows
Mohamed Hussain

51

Se si desidera eseguire il debug di un addetto all'assistenza di un dispositivo mobile collegato per un test reale del comportamento di un'app Web progressiva, le opzioni di avvio di Chrome SSL non aiutano e sicuramente non è necessario acquistare certificati.

@ chris-ruppel ha menzionato l'installazione del software proxy, ma in realtà esiste un modo più semplice per utilizzare il port forwarding :

Supponendo che ti connetti ed esegui il debug del tuo dispositivo utilizzando Chrome:

  • In "Dispositivi remoti" di Chrome Dev Tools apri "Impostazioni" e aggiungi una regola "Port forwarding" .
  • Se la configurazione dell'host locale è in esecuzione su localhost: 80,
  • basta aggiungere una regola "Porta dispositivo 8080" (può essere qualsiasi porta non privilegiata> 1024)
  • e l'indirizzo locale "localhost: 80" (o mytestserver.sometestdomainwithoutssl.company:8181 o qualsiasi altra cosa)

Dopo averlo fatto, puoi chiamare l'URL " http: // localhost: 8080 " sul tuo dispositivo mobile e riceverà risposta "localhost: 80" sul tuo PC / server di test effettivo . Funziona perfettamente con gli addetti all'assistenza come se fosse la tua macchina locale in esecuzione sul tuo cellulare.

Funziona anche per più port forwarding e diversi domini di destinazione, purché ti ricordi di utilizzare porte non privilegiate sul tuo dispositivo mobile. Vedi screenshot: Vedi screenshot per alcune porte configurate che chiameranno il PC quando chiamate sul cellulare

La fonte di queste informazioni è la documentazione dei dispositivi remoti di Google: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (ma ad aprile 2017 non è molto chiaro leggere questo risposta semplice fuori da esso)


Sembra promettente ma non ha funzionato per me. Dice solo "Questo sito non può essere raggiunto" quando si tenta di visitare localhost su Android 5.0.2 dopo aver impostato il port forwarding.
Jackson il

Quindi non hai bisogno di https su localhost? SW funzionerà bene?
Machado

2
Questa dovrebbe essere la risposta accettata, funziona bene
Miquel

Facile e veloce! Non dimenticare di abilitare e accettare il debug USB sul telefono e di collegarlo al PC tramite USB. Grazie uomo!
Marcos R

Ma solo per http, se richiedi risorse su https, non verranno memorizzate nella cache.
Legends

24

Spesso desidero eseguire il debug e il test su un dispositivo reale. Un metodo che ho escogitato prevede l'instradamento del traffico di rete del telefono tramite Charles Proxy durante lo sviluppo locale. A differenza di tutte le soluzioni specifiche di Chrome, funziona con qualsiasi browser del telefono.

  1. Esegui Charles sul mio laptop (che serve anche il mio sito web con il Service Worker). Una volta che Charles è in esecuzione, annota l'IP / porta per il passaggio 2.
  2. Configura il dispositivo mobile per utilizzare il mio laptop come proxy.
    • Per Android, tocca e tieni premuto il tuo WiFi nelle impostazioni> Modifica rete > Impostazioni avanzate > Proxy . Utilizzare Manuale per impostare l'IP / la porta.
    • Per iOS fare clic sull'icona (i)> sezione Proxy HTTP . Seleziona Manuale , quindi imposta l'IP / la porta.
  3. La visita localhostsul mio dispositivo mobile ora consente di registrare e testare il Service Worker.

4
Anch'io sto affrontando questo problema, grazie mille. Testare il cellulare è totalmente impossibile, senza un proxy. questo post ha bisogno di più voti.
Phyo Arkar Lwin,

1
@ chris-ruppel In realtà, c'è un modo per farlo senza software proxy aggiuntivo utilizzando Chrome Dev Tools integrato nel port forwarding dei dispositivi remoti. Ho aggiunto una risposta dettagliata in questo thread.
Christopher Lörken

"Testare il cellulare è totalmente impossibile;" ma questa è una piccola svista. Applaudiamo le persone che hanno specificato i lavoratori dei servizi ...
Jackson il

Chris puoi approfondire "1. Esegui Charles sul mio laptop"? Si può installare il proxy Charles. Ha un server in esecuzione su localhost: 8080 sul suo computer. Allora cosa? Dici anche "nota l'IP / porta". Dove?
Jackson il

1
@ChrisRuppel Sono passato a ngrok.com : gratuito, crea un sito HTTPS pubblico per la mia app locale e funziona a meraviglia ! La prima esecuzione ha richiesto un po 'di tempo prima che si collegasse. L'unica cosa che consiglio è di cambiare regione se non sei negli Stati Uniti ( ngrok.com/docs#config-options , parametro " region ").
Karsten Silz

10

Il modo più semplice per testare pwa, nel mio caso, era usare ngrok. https://ngrok.com/download accedi, ottieni il tuo token e impostalo!

Quando esegui ./ngrok http {your server port}assicurati di utilizzare https che verrà mostrato nel terminale dopo aver eseguito questo comando sopra.


Puoi usare anche https://surge.sh , è per ospitare una pagina web statica, se visiti qui: https://surge.sh/help/securing-your-custom-domain-with-ssl sarà in grado di vedere come impostare un certificato SSL


Ha funzionato come un fascino! Grazie per l'ottimo consiglio!
Karsten Silz

anche questo aiuta, anche se
ho

3

Come ha affermato Jeff nella prima risposta, non è necessario https a livello di host locale per testare i Service Worker. Gli addetti all'assistenza si registreranno e lavoreranno perfettamente finché accedi al dominio localhost, senza HTTPS.

Dopo aver testato la tua applicazione su localhost e vuoi vedere come funziona con https per davvero, l'approccio più semplice sarebbe caricare la tua app su GitHub. Puoi creare un dominio pubblico gratuitamente (e con HTTPS!).

Ecco le istruzioni: https://pages.github.com/


1
La domanda di follow-up sarebbe una per Raccomandazioni software: quali server Web per iOS e Android sono consigliati per il test su un dispositivo mobile utilizzando il metodo localhost?
Damian Yerrick

Sto usando Erlang HTTP Server ma qualsiasi server dovrebbe funzionare. Prima usavo il server HTTP 200 di Chrome, a cui puoi accedere da Google Marketplace.
Miguel Guardo

3

Se si desidera testare i service worker su un dispositivo client che non può eseguire un server Web su localhost, la tecnica generale è la seguente:

  1. Dai al tuo server un nome host.
  2. Assegna un certificato a questo nome host.
  3. Fai in modo che gli IP si fidino della CA che ha emesso questo certificato.

È piu facile a dirsi che a farsi. In un AMA del novembre 2016 su Reddit, un rappresentante di Let's Encrypt ha riconosciuto che HTTPS su una LAN privata "è una domanda davvero difficile e penso che nessuno abbia trovato una risposta soddisfacente finora".

I metodi comuni per assegnare un nome host al computer prevedono l'assegnazione di un indirizzo IP interno stabile, non uno che cambia quotidianamente o ogni volta che si spegne e riaccende il dispositivo gateway Internet. Dovrai configurare il server DHCP sulla tua rete, solitamente quello nel tuo gateway, per impostare una "prenotazione" che associ un particolare indirizzo privato (di solito all'interno di 10/8o 192.168/16) con l'indirizzo MAC della scheda Ethernet della tua workstation di sviluppo. Per questo, leggi il manuale del tuo gateway.

Ora che la tua workstation di sviluppo ha un indirizzo IP stabile, c'è un compromesso tra tempo e denaro. Se desideri apprendere l'utilizzo avanzato di DNS e OpenSSL e installare un certificato radice su tutti i dispositivi con cui intendi eseguire il test:

  1. Esegui un server DNS interno sulla tua rete. Potrebbe essere sul gateway o sulla workstation di sviluppo.
  2. Configura il tuo server DNS in modo che sia autorevole per alcuni TLD inventati e ricorsivo per altri TLD.
  3. Assegna un nome stabile all'indirizzo IP privato della tua workstation di sviluppo. Questo gli dà un nome interno.
  4. Configura il tuo server DHCP per fornire l'indirizzo di questo server DNS ad altri dispositivi che ottengono i lease.
  5. Sulla tua workstation di sviluppo, usa OpenSSL per generare coppie di chiavi per un'autorità di certificazione privata e il server web.
  6. Utilizzando OpenSSL, emetti un certificato radice per la CA e un certificato per il nome interno del server web.
  7. Configurare HTTPS nel server Web sulla stazione di lavoro di sviluppo utilizzando questo certificato.
  8. Installa il certificato radice della CA come certificato radice attendibile su tutti i dispositivi.
  9. Su tutti i dispositivi, accedi a questo nome interno.

Se non è possibile aggiungere un certificato radice o controllare il DNS locale, ad esempio se si prevede di eseguire il test con dispositivi di proprietà di altri (BYOD) o con browser più bloccati che non consentono agli utenti di aggiungere certificati radice attendibili, come quelli principali console per videogiochi, avrai bisogno di un nome di dominio completo (FQDN):

  1. Acquista un dominio da un registrar che offre DNS con un'API . Questo potrebbe essere direttamente all'interno di un TLD o da uno dei provider DNS dinamici che è stato inserito nell'elenco dei suffissi pubblici. (I provider di DNS dinamico non PSL sono inaccettabili a causa dei limiti di velocità imposti da Let's Encrypt .)
  2. Nel file di zona di questo dominio, punta un Arecord all'indirizzo IP privato della tua workstation di sviluppo. Ciò fornisce alla stazione di lavoro di sviluppo un FQDN.
  3. Utilizzare Disidratato , un client ACME che supporta la dns-01sfida, per ottenere un certificato per questo FQDN dall'autorità di certificazione Let's Encrypt.
  4. Configurare HTTPS nel server Web sulla stazione di lavoro di sviluppo utilizzando questo certificato.
  5. Su tutti i dispositivi, accedi a questo nome.

1

Penso che il modo più semplice per testare un service worker sia trovare un provider di hosting gratuito. al giorno d'oggi, ci sono molti siti che forniscono hosting gratuito. puoi facilmente ospitare la tua app su questi server gratuiti.

Uso principalmente heroku e netlify . sono gratuiti e facili da usare.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.