Hizmet çalışanlarını test etmek istiyorum ancak sanal bir ana bilgisayar kurulumum var ve localhost'ta https'yi etkinleştiremiyorum.
Yerel ana bilgisayardaki hizmet işçisine kaydolmaya çalıştığımda hizmet çalışanlarını test etmek için yerel sanal ana makine url'mi nasıl beyaz listeye alabilirim? Chrome, hizmet çalışanını etkinleştirmek için https gerektiğini söylüyor. En azından yerel testler için bu kısıtlamayı nasıl aşabilirim.
Yanıtlar:
Genel olarak, servis çalışanlarını kullanmak için hem sayfanıza hem de servis çalışanı komut dosyanızı HTTPS aracılığıyla sunmanız gerekir. Gerekçe, Güçlü Yeni Özellikler İçin Güvenli Kökenleri Tercih Et bölümünde açıklanmaktadır .
Yerel geliştirmeyi kolaylaştırmak için yürürlükte olan HTTPS gereksiniminin bir istisnası vardır: sayfanıza ve hizmet çalışanı betiğinize aracılığıyla http://localhost[:port]veya aracılığıyla erişirseniz http://127.x.y.z[:port], hizmet çalışanları başka bir işlem yapılmadan etkinleştirilmelidir.
Chrome'un son sürümlerinde, bu yanıtta açıklandığı gibichrome://flags/#unsafely-treat-insecure-origin-as-secure , yerel geliştirme yoluyla bu gereksinimi aşabilirsiniz .
Firefox , ayar aracılığıyla benzer işlevler sunardevtools.serviceWorkers.testing.enabled .
Bu işlevselliği olduğuna dikkat edin sadece o aksi gerçekleşmesi mümkün olmaz test olanağı yaratan ve her zaman sitenizin üretim versiyonunu sunarken HTTPS kullanarak planlamalısınız. Gerçek kullanıcılardan bu bayrakları etkinleştirme adımlarından geçmelerini istemeyin!
devtools.serviceWorkers.testing.enabled.
Aşamalı bir web uygulamasının gerçek bir davranış testi için fişe takılı bir mobil cihazın servis çalışanında hata ayıklamak istiyorsanız , ssl krom başlatma seçenekleri yardımcı olmaz ve kesinlikle sertifika satın almanıza gerek yoktur.
@ chris-ruppel, proxy yazılımı yüklemekten bahsetti, ancak aslında bağlantı noktası yönlendirmeyi kullanmanın daha kolay bir yolu var :
Cihazınızı Chrome kullanarak bağladığınızı ve hatalarını ayıkladığınızı varsayarsak:
Bunu yaptıktan sonra , mobil cihazınızda " http: // localhost: 8080 " URL'sini çağırabilirsiniz ve gerçek PC'nizdeki / test sunucunuzdaki "localhost: 80" tarafından yanıtlanacaktır . Servis çalışanları ile, sanki cep telefonunuzda çalışan yerel makinenizmiş gibi mükemmel çalışır.
Mobil cihazınızda ayrıcalıksız bağlantı noktalarını kullanmayı unutmadığınız sürece, birden çok bağlantı noktası iletimi ve farklı hedef etki alanları için de çalışır. Ekran görüntüsüne bakın:
Bu bilgilerin kaynağı, google uzak cihaz belgeleridir: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (ancak Nisan 2017 itibarıyla bunu okumak çok açık değil basit cevap)
Genellikle gerçek bir cihazda hata ayıklamak ve test etmek istiyorum. Bulduğum bir yöntem, yerel geliştirme sırasında telefonun ağ trafiğini Charles Proxy üzerinden yönlendirmeyi içeriyor . Chrome'a özgü tüm çözümlerin aksine, bu telefonunuzdaki herhangi bir tarayıcıyla çalışır.
localhostMobil cihazımda ziyaret etmek artık Hizmet Görevlisinin kaydolmasına ve test edilmesine izin veriyor.Benim durumumda pwa'yı test etmenin en kolay yolu ngrok kullanmaktı. https://ngrok.com/download oturum açın, ur belirteci alın ve ayarlayın!
Çalıştırdığınızda ./ngrok http {your server port}, yukarıdaki bu komutu çalıştırdıktan sonra terminalde gösterilecek olan https'yi kullandığınızdan emin olun.
Sen kullanabilirsiniz https://surge.sh burada ziyaret ederseniz, bu ana bilgisayar için statik bir web sayfasıdır de: https://surge.sh/help/securing-your-custom-domain-with-ssl mümkün olacak ssl sertifikasının nasıl ayarlanacağını görün
Localhost'ta bir web sunucusu çalıştıramayan bir istemci cihazda hizmet çalışanlarını test etmek istiyorsanız, genel teknik aşağıdaki gibidir:
Ancak bunu söylemek yapmaktan daha kolay. Kasım 2016'da Reddit'te AMA'da bir Let's Encrypt temsilcisi kabul edildi "Gerçekten zor bir soru ve ben bugüne kadar hiç kimse tatmin edici bir cevap ile gelip sahip olduğunu düşünüyorum." HTTPS özel LAN üzerinde olduğu
Bilgisayarınıza bir ana bilgisayar adı vermenin yaygın yolları, ona sabit bir dahili IP adresi vermeyi içerir, her gün veya İnternet ağ geçidi cihazınızı her açtığınızda değişen bir adres değil. Geliştirme iş istasyonunuzun Ethernet kartının MAC adresi ile belirli bir özel adresi (genellikle içinde 10/8veya içinde 192.168/16) ilişkilendiren bir "rezervasyon" oluşturmak için ağınızdaki, genellikle ağ geçidinizdeki DHCP sunucusunu yapılandırmanız gerekir . Bunun için ağ geçidinizin kılavuzunu okuyun.
Artık geliştirme iş istasyonunuzun kararlı bir IP adresi olduğuna göre, zaman / para değiş tokuşu var. Gelişmiş DNS ve OpenSSL kullanımını öğrenmek ve test etmeyi planladığınız tüm cihazlara bir kök sertifika yüklemek istiyorsanız:
Bir kök sertifika ekleyemiyorsanız veya yerel DNS'yi kontrol edemiyorsanız, örneğin başkalarının sahip olduğu cihazlarla (BYOD) veya kullanıcıların ana bilgisayarlarda olduğu gibi güvenilir kök sertifikaları eklemesine izin vermeyen daha kilitli tarayıcılarla test etmeyi planlıyorsanız video oyun konsolları için tam nitelikli bir alan adına (FQDN) ihtiyacınız olacak:
A geliştirme iş istasyonunuzun özel IP adresine kaydı edin. Bu, geliştirme iş istasyonunuza bir FQDN sağlar.dns-01.Jeff'in ilk yanıtta bahsettiği gibi, Service Workers'ı test etmek için localhost düzeyinde https'ye ihtiyacınız yoktur. Hizmet çalışanları, HTTPS olmadan localhost etki alanına eriştiğiniz sürece kayıt olacak ve sorunsuz çalışacaktır.
Uygulamanızı localhost'ta test ettirdikten ve gerçek olarak https ile nasıl çalıştığını görmek istediğinizde, en basit yaklaşım uygulamanızı GitHub'a yüklemek olacaktır. Ücretsiz (ve HTTPS ile!) Bir genel alan adı oluşturabilirsiniz.
Talimatlar şu şekildedir: https://pages.github.com/
Hizmet çalışanını test etmenin en kolay yolu, ücretsiz bir barındırma sağlayıcısı bulmaktır. günümüzde ücretsiz barındırma sağlayan birçok site var. Uygulamanızı bu ücretsiz sunucularda kolayca barındırabilirsiniz.
Çoğunlukla heroku ve netlify kullanıyorum . bu ücretsiz ve kullanımı kolaydır.
Yerel IP'yi (Google Colab'da olduğu için gerçekten öyle değil) halka açık bir IP'ye tünellemek için ngrok kullandım.
Ngrok konsoluna giderken, oluşturulan tüm tünelleri görebiliyorum. Localhost için sadece bir tünel oluşturdum: port ama burada 2 tane var, biri HTTP için diğeri HTTPS için (o kadar hoş değil mi?).
Web Uygulamamın https adresine gidersem, konsolda görüyorum
Ancak http adresine gidersem, konsolda
S: Tünellerden uzaktaki bir makineye HTTP'ye ihtiyaç duyan hizmet çalışanları ile çalışabilir misiniz?
A: Görünüşe göre evet!
Bu kaydın arkasındaki kod (nerede başarısız olduğunu bilmek önemlidir):
// Here we register the SERVICE WORKER
IndexController.prototype._registerServiceWorker = function() {
console.log("1.Starting SW function.");
if (!navigator.serviceWorker) {
console.log("2.Browser is NOT compatible with SW or something is not working.");
return; }
console.log("2.Browser is compatible with SW.");
navigator.serviceWorker.register('/sw.js').then(function() {
console.log('3.Registration worked!');
}).catch(function() {
console.log('3.Registration failed!');
});
};
Daha karmaşık hale getirmek için Service Workers kullanan web uygulamam Colab içinde çalışıyor ( Google Colab ) . Web Uygulaması, Colab içindeki Node.js üzerinde çalışıyor.
Localhost'tan çalışıyorsanız, sizin için daha kolay olacaktır, çünkü localhost'a bağlanırken https gereksinimi uygulanmaz (teoriye göre). [A] ve [B]
Bu, tarayıcının Uygulamanızda iyi olmasının aynısı değildir, çünkü localhost üzerinde çalışır.
Not: Yukarıdaki deneyim ..
Sahip olduğum https web uygulamasına gidiyorum:
IndexController.js:49 Mixed Content: The page at 'https://0a4e1e0095b0.ngrok.io/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://0a4e1e0095b0.ngrok.io/updates?since=1602934673264&'. This request has been blocked; this endpoint must be available over WSS.
IndexController._openSocket @ IndexController.js:49
IndexController @ IndexController.js:10
(anonymous) @ index.js:16
loadScripts @ loadScripts.js:5
46.../utils/loadScripts @ index.js:15
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1
IndexController.js:49 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
at IndexController._openSocket (https://0a4e1e0095b0.ngrok.io/js/main.js:2251:12)
Sahip olduğum http web uygulamasına gidiyorum:
Navigated to http://0a4e1e0095b0.ngrok.io/
IndexController.js:17 1.Starting SW function.
IndexController.js:19 2.Browser is NOT compatible with SW or something is not working.
Localhost'ta değilseniz VE https kullanamıyorsanız, tarayıcınızda bu ayarları değiştirmeniz gerekebilir.
Bazıları bunu zaten açıkladı ama işte yine başlıyor.
Krom:
Bunun tüm Chrome pencerelerini yeniden başlatacağını unutmayın . Bu benim için bir çözüm değil çünkü tünellerim her oluşturulduğunda adını değiştiriyor ve her seferinde bir grup pencereyi yeniden başlatamıyorum.
Firefox / Waterfox
Firefox / Waterfox Muhtemelen aşağıdaki değişiklikleri yapmanız gerekmiyor, ama yaptım (tarayıcım biraz eski olabilir). Daha fazla bilgi burada .
Hakkında: config
Etkinleştirdim
dom.serviceWorkers.testing.enabled
dom.serviceWorkers.enabled
Bu https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers ve aynı sitedeki ilgili sayfalara bakmanızı şiddetle tavsiye ederim .
Birisi ngrok kurulumuyla ilgileniyorsa, bu çok basittir (python sürümü).
# Install pyngrok python package on your Google Colab Session
!pip install pyngrok
# Set up your ngrok Authtoken (requires free registration)
!ngrok authtoken YOUR_TOKEN_HERE
# Invoke ngrok from Python and start tunneling/connecting
from pyngrok import ngrok
# Open a HTTP tunnel on the default port 80 if not specified
ngrok_tunnel = ngrok.connect('8888')
# You can print it, or go to the ngrok console on https://dashboard.ngrok.com/status/tunnels
print (ngrok_tunnel.public_url)