Opsi untuk menguji pekerja layanan melalui HTTP

96

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.

javascript  google-chrome  service-worker  progressive-web-apps 
— Aman Satija
sumber

Jawaban:

140

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!

— Jeff Posnick
sumber
terima kasih jeff akan mencobanya segera. pasti saya menggunakan ini hanya untuk pengujian .. membutuhkan solusi putus asa untuk saat ini ... !! saya tahu bukan latihan yang ideal .. tetapi waktu yang menghina membutuhkan tindakan yang tidak menyenangkan ... !! bisakah Anda memberi saya kembali 4 poin yang saya peroleh dengan susah payah ... !! saya akan menghapus pertanyaan jika Anda merasa itu tidak sesuai dan itu akan mendorong perilaku yang salah
— Aman Satija
1
menggunakan pekerja layanan di localhost, tetapi ketika mencoba untuk mengambil file sw.js dari server itu menunjukkan net :: ERR_INSECURE_RESPONSE,
— sp1rs
1
Terima kasih! Saya telah memperbarui bagian utama untuk membaca devtools.serviceWorkers.testing.enabled.
— Jeff Posnick
5
Bagi siapa saja yang memiliki masalah untuk menemukan di atas - buka FF - alat dev - roda gigi pengaturan - pengaturan lanjutan - aktifkan sw melalui http. Kemudian Anda bisa pergi ke about: debugging # worker di url atau tools - web dev - service worker di toolbar. Mulailah pekerja!
— Sten Muchow
Jawaban @StenMuchow bekerja untuk saya di chrome mac dan windows
— Mohamed Hussain
51

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: Lihat tangkapan layar untuk beberapa port yang dikonfigurasi yang akan memanggil PC saat dipanggil di ponsel

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)

— Christopher Lörken
sumber
Tampak menjanjikan tetapi tidak berhasil untuk saya. Cukup ucapkan "Situs ini tidak dapat dijangkau" saat mencoba mengunjungi localhost di Android 5.0.2 setelah menyiapkan penerusan port.
— Jackson
Jadi Anda tidak perlu https di localhost? Akankah SW bekerja dengan baik?
— Machado
2
Itu seharusnya jawaban yang diterima, itu berfungsi dengan baik
— Miquel
Cepat dan mudah! Jangan lupa untuk mengaktifkan dan menerima USB Debugging di ponsel Anda dan hubungkan ke PC Anda melalui USB. Terima kasih sobat!
— Marcos R
Tetapi hanya untuk http, jika Anda meminta sumber daya melalui https, mereka tidak akan disimpan dalam cache.
— Legenda
24

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.
— Chris Ruppel
sumber
4
saya menghadapi masalah itu juga, terima kasih banyak. Untuk menguji seluler sama sekali tidak mungkin, tanpa proxy. posting ini membutuhkan lebih banyak suara.
— Phyo Arkar Lwin
1
@ chris-ruppel Sebenarnya, ada cara untuk melakukan ini tanpa perangkat lunak proxy tambahan menggunakan Chrome Dev Tools inbuild remote devices port forwarding. Saya telah menambahkan jawaban rinci di utas ini.
— Christopher Lörken
"Untuk menguji ponsel itu sama sekali tidak mungkin;" tapi itu pengawasan kecil. Mari bertepuk tangan pada orang-orang yang menentukan pekerja layanan ...
— Jackson
Chris dapatkah Anda menjelaskan lebih lanjut tentang "1. Jalankan Charles di laptop saya"? Seseorang dapat menginstal proxy Charles. Dia memiliki server yang berjalan di localhost: 8080 di komputernya. Lalu apa? Anda juga mengatakan "catat IP / port". Dimana?
— Jackson
1
@ChrisRuppel Saya beralih ke ngrok.com : Gratis, membuat situs HTTPS publik untuk aplikasi lokal saya, dan bekerja dengan sangat baik! Proses pertama membutuhkan waktu beberapa saat sampai terhubung. Satu-satunya hal yang saya rekomendasikan adalah untuk beralih region jika Anda tidak berada di AS ( ngrok.com/docs#config-options , parameter "region").
— Karsten Silz
11

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

— Alex
sumber
Bekerja seperti pesona! Terima kasih atas rekomendasi yang bagus!
— Karsten Silz
ini juga membantu, meskipun saya mengalami masalah dalam menghasilkan laporan menggunakan mercusuar
— Cj Oyales
3

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/

— Miguel Guardo
sumber
1
Pertanyaan tindak lanjutnya adalah untuk Rekomendasi Perangkat Lunak: Server web apa untuk iOS dan Android yang direkomendasikan untuk pengujian pada perangkat seluler menggunakan metode localhost?
— Damian Yerrick
Saya menggunakan Server HTTP Erlang tetapi server apa pun harus berfungsi. Saya menggunakan sebelum server HTTP 200 dari Chrome, yang dapat Anda akses dari Google Marketplace.
— Miguel Guardo
3

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.
— Damian Yerrick
sumber
1

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.

— Sushil
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.