Opzioni per testare i lavoratori del servizio tramite HTTP

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.

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!

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:

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)

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.

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

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/

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.

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.