Opsi untuk menguji pekerja layanan melalui HTTP

Saya ingin menguji pekerja layanan tetapi saya memiliki pengaturan host virtual dan sepertinya saya tidak dapat mengaktifkan https di localhost.

Bagaimana cara memasukkan url host virtual lokal saya ke daftar putih untuk menguji service worker setiap kali saya mencoba dan mendaftar ke service worker di localhost? Chrome mengatakan https diperlukan untuk mengaktifkan pekerja layanan. Bagaimana saya bisa melewati batasan ini setidaknya untuk pengujian lokal.

Secara umum, Anda perlu menayangkan halaman dan skrip service worker Anda melalui HTTPS untuk menggunakan service worker. Alasannya dijelaskan di Pilih Asal yang Aman Untuk Fitur Baru yang Kuat .

Ada pengecualian untuk persyaratan HTTPS untuk memfasilitasi pengembangan lokal: jika Anda mengakses laman dan skrip pekerja layanan melalui http://localhost[:port], atau melalui http://127.x.y.z[:port], pekerja layanan harus diaktifkan tanpa tindakan lebih lanjut.

Di versi Chrome terbaru, Anda dapat mengatasi persyaratan ini selama pengembangan lokal melalui chrome://flags/#unsafely-treat-insecure-origin-as-secure, seperti yang dijelaskan dalam jawaban ini .

Firefox menawarkan fungsionalitas serupa , melalui devtools.serviceWorkers.testing.enabledpengaturan.

Perhatikan bahwa fungsi ini hanya dimaksudkan untuk memfasilitasi pengujian yang tidak dapat dilakukan, dan Anda harus selalu berencana menggunakan HTTPS saat menyajikan versi produksi situs Anda. Jangan meminta pengguna sungguhan untuk melakukan langkah-langkah mengaktifkan bendera tersebut!

Jika Anda ingin men-debug pekerja layanan perangkat seluler yang terpasang untuk pengujian perilaku nyata dari aplikasi web progresif, opsi mulai ssl chrome tidak membantu dan Anda pasti tidak perlu membeli sertifikat.

@ chris-ruppel menyebutkan menginstal perangkat lunak proxy, tetapi sebenarnya ada cara yang lebih mudah menggunakan penerusan porta :

Dengan asumsi Anda menghubungkan dan men-debug perangkat Anda menggunakan Chrome:

• Di "Perangkat jarak jauh" Alat Pengembang Chrome, buka "Setelan" dan tambahkan aturan "Penerusan porta" .
• Jika penyiapan localhost Anda berjalan di localhost: 80,
• cukup tambahkan aturan "Port perangkat 8080" (dapat berupa port apa pun yang tidak memiliki hak istimewa> 1024)
• dan alamat lokal "localhost: 80" (atau mytestserver.sometestdomainwithoutssl.company:8181 atau apa pun)

Setelah Anda melakukannya, Anda dapat memanggil URL " http: // localhost: 8080 " di perangkat seluler Anda dan itu akan dijawab oleh "localhost: 80" di PC / server pengujian Anda yang sebenarnya . Bekerja sempurna dengan service worker seolah-olah itu adalah mesin lokal Anda yang berjalan di ponsel Anda.

Berfungsi juga untuk beberapa penerusan port dan domain target yang berbeda selama Anda ingat untuk menggunakan port yang tidak memiliki hak istimewa pada perangkat seluler Anda. Lihat tangkapan layar:

Sumber info ini adalah dokumentasi perangkat jarak jauh google: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (tetapi mulai Apr 2017 tidak terlalu jelas untuk membaca ini jawaban sederhana dari itu)

Saya sering ingin men-debug dan menguji di perangkat nyata. Salah satu metode yang saya temukan melibatkan perutean lalu lintas jaringan telepon melalui Charles Proxy selama pengembangan lokal. Tidak seperti semua solusi khusus Chrome, ini berfungsi dengan browser apa pun di ponsel Anda.

1. Jalankan Charles di laptop saya (yang juga melayani situs web saya dengan Service Worker). Setelah Charles berjalan, catat IP / port untuk Langkah 2.
2. Konfigurasikan perangkat seluler untuk menggunakan laptop saya sebagai proxy.
   • Untuk Android cukup ketuk dan tahan WiFi Anda di pengaturan> Ubah jaringan > Pengaturan Lanjutan > Proksi . Gunakan Manual untuk mengatur IP / port.
   • Untuk iOS, klik ikon (i)> bagian HTTP Proxy . Pilih Manual , lalu atur IP / port.
3. Mengunjungi localhostdi perangkat seluler saya sekarang memungkinkan Service Worker untuk didaftarkan dan diuji.

Cara termudah untuk menguji pwa, dalam kasus saya, menggunakan ngrok. https://ngrok.com/download log in, dapatkan token Anda dan atur!

Saat Anda menjalankan, ./ngrok http {your server port}pastikan Anda menggunakan https yang akan ditampilkan di terminal setelah Anda menjalankan perintah di atas.

Anda dapat menggunakan https://surge.sh juga, ini untuk menghosting halaman web statis, jika Anda mengunjungi di sini: https://surge.sh/help/securing-your-custom-domain-with-ssl akan dapat lihat cara mengatur sertifikat ssl

Seperti yang disebutkan Jeff di respons pertama, Anda tidak perlu https di level localhost untuk menguji Service Worker. Pekerja layanan akan mendaftar dan bekerja dengan baik selama Anda mengakses domain localhost - tanpa HTTPS.

Setelah aplikasi Anda diuji di localhost dan Anda ingin melihat cara kerjanya dengan https secara nyata, pendekatan paling sederhana adalah mengunggah aplikasi Anda ke GitHub. Anda dapat membuat domain publik secara gratis (dan dengan HTTPS!).

Berikut instruksinya: https://pages.github.com/

Jika Anda ingin menguji service worker di perangkat klien yang tidak dapat menjalankan server web di localhost, teknik umumnya adalah sebagai berikut:

1. Berikan nama host pada server Anda.
2. Beri nama host ini sertifikat.
3. Buat IP mempercayai CA yang menerbitkan sertifikat ini.

Tapi ini lebih mudah diucapkan daripada dilakukan. Dalam AMA November 2016 di Reddit, perwakilan Let's Encrypt mengakui bahwa HTTPS di LAN pribadi "adalah pertanyaan yang sangat sulit, dan saya pikir belum ada yang memberikan jawaban yang memuaskan sejauh ini."

Cara umum untuk memberikan nama host pada komputer Anda melibatkan pemberian alamat IP internal yang stabil, bukan alamat yang berubah setiap hari atau setiap kali Anda melakukan siklus daya alat gateway Internet Anda. Anda harus mengkonfigurasi server DHCP di jaringan Anda, biasanya di gateway Anda, untuk menyiapkan "reservasi" yang mengaitkan alamat pribadi tertentu (biasanya di dalam 10/8atau 192.168/16) dengan alamat MAC kartu Ethernet stasiun kerja pengembangan Anda. Untuk ini, baca manual gateway Anda.

Sekarang setelah stasiun kerja pengembangan Anda memiliki alamat IP yang stabil, ada pertukaran waktu / uang. Jika Anda ingin mempelajari penggunaan DNS dan OpenSSL tingkat lanjut dan memasang sertifikat root pada semua perangkat yang ingin Anda uji:

1. Jalankan server DNS internal di jaringan Anda. Ini bisa berada di gateway Anda atau di workstation pengembangan Anda.
2. Konfigurasikan server DNS Anda agar berwibawa untuk beberapa TLD yang dibuat-buat dan rekursif untuk TLD lainnya.
3. Berikan nama yang stabil untuk alamat IP pribadi stasiun kerja pengembangan Anda. Ini memberinya nama internal.
4. Konfigurasikan server DHCP Anda untuk memberikan alamat server DNS ini ke perangkat lain yang mendapatkan sewa.
5. Di stasiun kerja pengembangan Anda, gunakan OpenSSL untuk membuat pasangan kunci untuk otoritas sertifikat privat dan server web.
6. Menggunakan OpenSSL, terbitkan sertifikat akar untuk CA dan sertifikat untuk nama internal server web.
7. Konfigurasikan HTTPS di server web pada workstation pengembangan Anda menggunakan sertifikat ini.
8. Instal sertifikat root CA sebagai sertifikat root tepercaya di semua perangkat.
9. Di semua perangkat, akses nama internal ini.

Jika Anda tidak dapat menambahkan sertifikat akar atau mengontrol DNS lokal, seperti jika Anda berencana untuk menguji dengan perangkat milik orang lain (BYOD) atau dengan browser yang lebih terkunci yang tidak mengizinkan pengguna untuk menambahkan sertifikat dasar tepercaya, seperti yang di perangkat utama konsol video game, Anda memerlukan nama domain yang memenuhi syarat (FQDN):

1. Beli domain dari registrar yang menawarkan DNS dengan API . Ini bisa langsung dalam TLD atau dari salah satu penyedia DNS dinamis yang berhasil masuk ke Daftar Sufiks Publik. (Penyedia DNS dinamis non-PSL tidak dapat diterima karena batas kecepatan yang diberlakukan oleh Let's Encrypt .)
2. Dalam file zona domain ini, arahkan Acatatan ke alamat IP pribadi stasiun kerja pengembangan Anda. Ini memberi stasiun kerja pengembangan Anda FQDN.
3. Gunakan Dehydrated , klien ACME yang mendukung dns-01tantangan, untuk mendapatkan sertifikat untuk FQDN ini dari otoritas sertifikat Let's Encrypt.
4. Konfigurasikan HTTPS di server web pada workstation pengembangan Anda menggunakan sertifikat ini.
5. Di semua perangkat, akses nama ini.

Menurut saya, cara termudah untuk menguji pekerja layanan adalah dengan menemukan penyedia hosting gratis. Saat ini banyak sekali situs yang menyediakan hosting gratis. Anda dapat dengan mudah menghosting aplikasi Anda di server gratis ini.

Saya kebanyakan menggunakan heroku dan netlify . ini gratis dan mudah digunakan.