Options pour tester les employés de service via HTTP
Je souhaite tester les opérateurs mais j'ai une configuration d'hôte virtuel et je n'arrive pas à activer le protocole https sur localhost.
Comment puis-je ajouter à la liste blanche l'URL de l'hôte virtuel local afin de tester les agents de service chaque fois que j'essaie de m'inscrire pour cet agent sur l'hôte local? Chrome indique que https est requis pour permettre à un agent de service. Comment passer outre cette restriction, au moins pour les tests locaux.
En règle générale, vous devez utiliser à la fois votre page et votre script de prestataire de services via HTTPS pour pouvoir utiliser les prestataires de services. La justification est décrite à la section Préférez Secure Origins pour de nouvelles fonctionnalités puissantes .
Une exception à l'exigence HTTPS est en place pour faciliter le développement local: si vous accédez à votre page et à votre script de service worker via http://localhost[:port] ou via http://127.x.y.z[:port], les agents de service doivent être activés sans autre action.
Si, pour une raison quelconque, vous devez accéder à votre serveur Web local via un nom d’hôte autre que localhost ou 127.x.y.z, ou si vous besoin pour tester des éléments sur un serveur Web distant qui ne prend pas en charge le protocole HTTPS, vous pouvez utiliser une solution de contournement manuelle. Cela implique de démarrer Chrome via la ligne de commande et d’utiliser le --user-data-dir et --unsafely-treat-insecure-Origin-as-secure drapeaux.
Ce bogue a plus de détails, y compris un exemple complet sur la façon de lancer Chrome.
Firefox offre des fonctionnalités similaires , via le devtools.serviceWorkers.testing.enabled réglage.
Veuillez noter que cette fonctionnalité est seulement afin de faciliter les tests qui ne pourraient autrement pas avoir lieu, et vous devez toujours prévoir d'utiliser le protocole HTTPS lors de la diffusion. la version de production de votre site. Ne demandez pas aux vrais utilisateurs de suivre ces étapes pour activer ces drapeaux!
Si vous souhaitez déboguer le service worker d'un périphérique mobile branché pour un test de comportement réel d'une application Web progressive, le code ssl chrome ne vous aident pas et vous n'avez absolument pas besoin d'acheter de certificats.
@ chris-ruppel a mentionné l'installation d'un logiciel proxy, mais il existe un moyen plus simple d'utiliser la redirection de port :
En supposant que vous connectiez et déboguiez votre appareil à l'aide de Chrome:
- Dans l'outil de développement Chrome , "Périphériques distants" , ouvrez "Paramètres" et ajoutez une règle "Redirection de port" .
- Si votre configuration localhost s'exécute sur localhost: 80,
- il suffit d'ajouter une règle "Port du périphérique 8080" (peut être n'importe quel port sans privilège> 1024)
- et adresse locale "localhost: 80" (ou mytestserver.sometestdomainwithoutssl.company:8181 ou autre)
Une fois que vous avez fait cela, vous pouvez appeler l'URL " http: // localhost: 808 " sur votre mobile et le "localhost: 80" vous répondra sur votre PC actuel/serveur de test. Fonctionne parfaitement avec les techniciens de maintenance comme s'il s'agissait de votre machine locale fonctionnant sur votre mobile.
Fonctionne également pour les redirections de ports multiples et les différents domaines cibles tant que vous vous rappelez d'utiliser des ports sans privilège sur votre appareil mobile. Voir capture d'écran: 
La source de cette information est la documentation des périphériques distants de Google: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (à partir d'avril 2017, il n'est pas très clair de lire cette réponse simple)
Je veux souvent déboguer et tester sur un vrai périphérique. Une méthode que j'ai proposée consiste à acheminer le trafic réseau du téléphone à travers Charles Proxy au cours du développement local. Contrairement à toutes les solutions spécifiques à Chrome, cela fonctionne avec tous les navigateurs de votre téléphone.
- Exécutez Charles sur mon ordinateur portable (qui dessert également mon site Web avec le technicien de service). Une fois que Charles est en cours d'exécution, notez l'adresse IP/le port pour l'étape 2.
- Configurez le périphérique mobile pour utiliser mon ordinateur portable comme proxy.
- Pour Android maintenez votre doigt sur votre WiFi dans les paramètres> Modifiez le réseau > Paramètres avancés > ( Proxy . Utilisez Manuel pour définir l'IP/le port.
- Pour iOS, cliquez sur l'icône (i)> proxy HTTP . Sélectionnez Manuel , puis définissez l'adresse IP/le port.
- Le fait de visiter
localhostsur mon appareil mobile permet désormais d’enregistrer et de tester le technicien.
Comme Jeff l'a mentionné dans la première réponse, vous n'avez pas besoin de https au niveau localhost pour tester les agents de service. Les employés du service d’enregistrement s’enregistrent et travaillent parfaitement tant que vous accédez au domaine localhost - sans HTTPS.
Une fois que votre application est testée sur localhost et que vous souhaitez voir comment elle fonctionne avec https, l'approche la plus simple consiste à télécharger votre application sur GitHub. Vous pouvez créer un domaine public gratuitement (et avec HTTPS!).
Voici les instructions: https://pages.github.com/
Si vous souhaitez tester les opérateurs de service sur une machine cliente ne pouvant pas exécuter un serveur Web sur localhost, la technique générale est la suivante:
- Donnez un nom d'hôte à votre serveur.
- Donnez un certificat à ce nom d'hôte.
- Assurez-vous que les adresses IP approuvent l'autorité de certification qui a émis ce certificat.
Mais c'est plus facile à dire qu'à faire. Dans une AMA de novembre 2016 sur Reddit, un représentant de Let's Encrypt reconn que le protocole HTTPS sur un réseau local privé "est une question très difficile, et je pense que personne n'a apporté de réponse satisfaisante à ce jour".
Les méthodes courantes pour attribuer un nom d’hôte à votre ordinateur impliquent de lui attribuer une adresse IP interne stable, et non une adresse IP changeant tous les jours ou à chaque fois que vous allumez votre appliance de passerelle Internet. Vous devez configurer le serveur DHCP sur votre réseau, généralement celui de votre passerelle, pour configurer une "réservation" associant une adresse privée particulière (généralement dans 10/8 ou 192.168/16) avec l'adresse MAC de la carte Ethernet de votre poste de travail de développement. Pour cela, lisez le manuel de votre passerelle.
Maintenant que votre poste de travail de développement a une adresse IP stable, il existe un compromis temps/argent. Si vous souhaitez apprendre à utiliser DNS et OpenSSL de manière avancée et installer un certificat racine sur tous les périphériques avec lesquels vous prévoyez de tester:
- Exécutez un serveur DNS interne sur votre réseau. Cela pourrait être sur votre passerelle ou sur votre poste de travail de développement.
- Configurez votre serveur DNS pour qu'il fasse autorité pour certains TLD constitués et récursif pour d'autres TLD.
- Donnez un nom stable à l'adresse IP privée de votre poste de travail de développement. Cela lui donne un nom interne.
- Configurez votre serveur DHCP pour attribuer l'adresse de ce serveur DNS à d'autres appareils obtenant des baux.
- Sur votre poste de travail de développement, utilisez OpenSSL pour générer des paires de clés pour une autorité de certification privée et le serveur Web.
- À l'aide d'OpenSSL, émettez un certificat racine pour l'autorité de certification et un certificat pour le nom interne du serveur Web.
- Configurez HTTPS sur le serveur Web sur votre poste de travail de développement à l'aide de ce certificat.
- Installez le certificat racine de l'autorité de certification en tant que certificat racine approuvé sur tous les périphériques.
- Sur tous les appareils, accédez à ce nom interne.
Si vous ne pouvez pas ajouter de certificat racine ou contrôler le DNS local, par exemple si vous envisagez de tester avec des périphériques appartenant à d'autres (BYOD) ou avec davantage de navigateurs verrouillés qui n'autorisent pas les utilisateurs à ajouter des certificats racine approuvés, tels que ceux en majeur. consoles de jeux vidéo, vous aurez besoin d’un nom de domaine pleinement qualifié (FQDN):
- Achetez un domaine auprès d'un registraire qui propose DNS avec une API . Cela peut se faire directement au sein d'un TLD ou de l'un des fournisseurs DNS dynamiques qui l'ont intégré à la liste des suffixes publics. (Les fournisseurs DNS dynamiques non-PSL sont inacceptables à cause de limites de débit imposées par Let's Encrypt .)
- Dans le fichier de zone de ce domaine, pointez un enregistrement
Asur l'adresse IP privée de votre poste de travail de développement. Cela donne à votre poste de travail de développement un nom de domaine complet. - Utilisez déshydraté , un client ACME prenant en charge le
dns-01challenge, pour obtenir un certificat pour ce nom de domaine complet auprès de l'autorité de certification Let's Encrypt. - Configurez HTTPS sur le serveur Web sur votre poste de travail de développement à l'aide de ce certificat.
- Sur tous les appareils, accédez à ce nom.
La meilleure façon de tester pwa, dans mon cas, était d'utiliser ngrok. https://ngrok.com/download connectez-vous, récupérez votre jeton et configurez-le!
Quand vous courez ./ngrok http {your server port} _ assurez-vous que vous utilisez https qui sera affiché dans le terminal après avoir exécuté cette commande ci-dessus.
Vous pouvez aussi utiliser https://surge.sh , il s'agit pour l'hôte d'une page Web statique, si vous visitez ici: https://surge.sh/help/securing-your- custom-domain-with-ssl sera capable de voir comment configurer un certificat ssl
Je pense que le moyen le plus simple de tester Service Worker consiste à trouver un fournisseur d'hébergement gratuit. De nos jours, de nombreux sites proposent un hébergement gratuit. vous pouvez facilement héberger votre application sur ces serveurs gratuits.
J'utilise principalement herok et netlify . c'est gratuit et facile à utiliser.