ตัวเลือกสำหรับการทดสอบพนักงานบริการผ่าน HTTP

ฉันต้องการทดสอบพนักงานบริการ แต่ฉันมีการตั้งค่าโฮสต์เสมือนและดูเหมือนว่าฉันไม่สามารถเปิดใช้ https บน localhost ได้

ฉันจะอนุญาต URL โฮสต์เสมือนในพื้นที่ของฉันเพื่อทดสอบพนักงานบริการได้อย่างไรเมื่อใดก็ตามที่ฉันพยายามและลงทะเบียนสำหรับผู้ให้บริการบน localhost Chrome ระบุว่าต้องใช้ https เพื่อเปิดใช้งานผู้ปฏิบัติงานบริการ ฉันจะผ่านข้อ จำกัด นี้ได้อย่างไรอย่างน้อยสำหรับการทดสอบในพื้นที่

โดยทั่วไปคุณต้องให้บริการทั้งเพจและสคริปต์ผู้ปฏิบัติงานบริการของคุณผ่าน HTTPS เพื่อที่จะใช้พนักงานบริการ เหตุผลที่มีการอธิบายที่ชอบต้นกำเนิดการรักษาความปลอดภัยสำหรับคุณสมบัติใหม่ที่มีประสิทธิภาพ

มีข้อยกเว้นสำหรับข้อกำหนด HTTPS เพื่ออำนวยความสะดวกในการพัฒนาในพื้นที่: หากคุณเข้าถึงเพจและสคริปต์ผู้ปฏิบัติงานบริการผ่านhttp://localhost[:port]หรือผ่านทางhttp://127.x.y.z[:port]เจ้าหน้าที่บริการควรเปิดใช้งานโดยไม่ต้องดำเนินการใด ๆ เพิ่มเติม

ใน Chrome เวอร์ชันล่าสุดคุณสามารถหลีกเลี่ยงข้อกำหนดนี้เพื่อรอการพัฒนาในท้องถิ่นchrome://flags/#unsafely-treat-insecure-origin-as-secureได้ตามที่อธิบายไว้ในคำตอบนี้

Firefox มีฟังก์ชันการทำงานที่คล้ายกันผ่านทางไฟล์devtools.serviceWorkers.testing.enabledตั้งค่า

โปรดทราบว่าฟังก์ชันนี้มีไว้เพื่ออำนวยความสะดวกในการทดสอบที่ไม่สามารถเกิดขึ้นได้และคุณควรวางแผนที่จะใช้ HTTPS เสมอเมื่อให้บริการไซต์เวอร์ชันที่ใช้งานจริง อย่าขอให้ผู้ใช้จริงทำตามขั้นตอนในการเปิดใช้แฟล็กเหล่านั้น!

หากคุณต้องการดีบักผู้ให้บริการของอุปกรณ์พกพาที่เสียบปลั๊กสำหรับการทดสอบพฤติกรรมจริงของเว็บแอปโปรเกรสซีฟตัวเลือกการเริ่ม ssl chrome ไม่ได้ช่วยและคุณไม่จำเป็นต้องซื้อใบรับรองอย่างแน่นอน

@ chris-ruppel กล่าวถึงการติดตั้งซอฟต์แวร์พร็อกซี แต่มีวิธีที่ง่ายกว่าโดยใช้การส่งต่อพอร์ต :

สมมติว่าคุณเชื่อมต่อและแก้ไขข้อบกพร่องของอุปกรณ์โดยใช้ Chrome:

• ในเครื่องมือ Chrome Dev "อุปกรณ์ระยะไกล"ให้เปิด"การตั้งค่า"และเพิ่มกฎ"การส่งต่อพอร์ต"
• หากการตั้งค่า localhost ของคุณทำงานบน localhost: 80,
• เพียงเพิ่มกฎ"พอร์ตอุปกรณ์ 8080" (อาจเป็นพอร์ตที่ไม่มีสิทธิใด ๆ > 1024)
• และที่อยู่ในท้องถิ่น "localhost: 80" (หรือ mytestserver.sometestdomainwithoutssl.company:8181 หรืออะไรก็ได้)

หลังจากทำเช่นนั้นคุณสามารถเรียก URL " http: // localhost: 8080 " บนอุปกรณ์มือถือของคุณและ "localhost: 80" จะได้รับคำตอบจากเซิร์ฟเวอร์ / เซิร์ฟเวอร์ทดสอบจริงของคุณเครื่องคอมพิวเตอร์เซิร์ฟเวอร์ที่เกิดขึ้นจริงทำงานร่วมกับพนักงานบริการได้อย่างสมบูรณ์แบบราวกับว่าเป็นเครื่องในพื้นที่ของคุณที่ทำงานบนมือถือของคุณ

ใช้งานได้กับการส่งต่อหลายพอร์ตและโดเมนเป้าหมายที่แตกต่างกันตราบเท่าที่คุณจำไว้ว่าใช้พอร์ตที่ไม่มีสิทธิพิเศษบนอุปกรณ์มือถือ ดูภาพหน้าจอ:

แหล่งที่มาของข้อมูลนี้คือเอกสารเกี่ยวกับอุปกรณ์ระยะไกลของ Google: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (แต่เมื่อเมษายน 2017 ยังไม่ชัดเจนในการอ่านสิ่งนี้ คำตอบง่ายๆจากมัน)

ฉันมักต้องการแก้ไขข้อบกพร่องและทดสอบบนอุปกรณ์จริง วิธีหนึ่งที่ฉันคิดขึ้นมาเกี่ยวข้องกับการกำหนดเส้นทางการรับส่งข้อมูลเครือข่ายของโทรศัพท์ผ่านCharles Proxyในระหว่างการพัฒนาท้องถิ่น ซึ่งแตกต่างจากโซลูชันเฉพาะของ Chrome ทั้งหมดนี้ใช้ได้กับเบราว์เซอร์ใด ๆ บนโทรศัพท์ของคุณ

1. เรียกใช้ Charles บนแล็ปท็อปของฉัน (ซึ่งให้บริการเว็บไซต์ของฉันกับ Service Worker ด้วย) เมื่อ Charles กำลังทำงานให้สังเกต IP / พอร์ตสำหรับขั้นตอนที่ 2
2. กำหนดค่าอุปกรณ์เคลื่อนที่เพื่อใช้แล็ปท็อปของฉันเป็นพร็อกซี
   • สำหรับ Android เพียงแค่แตะค้างไว้บนอินเตอร์เน็ตไร้สายในการตั้งค่า> เครือข่ายปรับเปลี่ยน > ตั้งค่าขั้นสูง > พร็อกซี่ ใช้Manualเพื่อตั้งค่า IP / พอร์ต
   • สำหรับ iOS ให้คลิกไอคอน (i)> ส่วนHTTP Proxy เลือกด้วยตนเองจากนั้นตั้งค่า IP / พอร์ต
3. การเยี่ยมชมlocalhostบนอุปกรณ์มือถือของฉันในขณะนี้ทำให้พนักงานบริการสามารถลงทะเบียนและทดสอบได้

วิธีที่ง่ายที่สุดในการทดสอบ pwa ในกรณีของฉันคือการใช้ ngrok https://ngrok.com/downloadเข้าสู่ระบบรับโทเค็นของคุณและตั้งค่า!

เมื่อคุณเรียกใช้./ngrok http {your server port}ตรวจสอบให้แน่ใจว่าคุณใช้ https ซึ่งจะแสดงในเทอร์มินัลหลังจากที่คุณรันคำสั่งนี้ด้านบน

คุณสามารถใช้https://surge.sh ได้เช่นกันสำหรับโฮสต์หน้าเว็บแบบคงที่หากคุณไปที่นี่: https://surge.sh/help/securing-your-custom-domain-with-ssl จะสามารถทำได้ ดูวิธีตั้งค่าใบรับรอง ssl

หากคุณต้องการทดสอบผู้ให้บริการบนอุปกรณ์ไคลเอนต์ที่ไม่สามารถรันเว็บเซิร์ฟเวอร์บน localhost ได้เทคนิคทั่วไปมีดังนี้:

1. ตั้งชื่อโฮสต์ให้เซิร์ฟเวอร์ของคุณ
2. ให้ใบรับรองชื่อโฮสต์นี้
3. ทำให้ IP เชื่อถือ CA ที่ออกใบรับรองนี้

แต่พูดง่ายกว่าทำ ในเดือนพฤศจิกายน 2016 AMA บน Reddit ตัวแทนของ Let's Encrypt ยอมรับว่า HTTPS บน LAN ส่วนตัว "เป็นคำถามที่ยากมากและฉันคิดว่ายังไม่มีใครให้คำตอบที่น่าพอใจได้จนถึงตอนนี้"

วิธีทั่วไปในการตั้งชื่อโฮสต์ให้กับคอมพิวเตอร์ของคุณเกี่ยวข้องกับการกำหนดที่อยู่ IP ภายในที่เสถียรไม่ใช่การเปลี่ยนแปลงทุกวันหรือทุกครั้งที่คุณเปิดเครื่องอุปกรณ์เกตเวย์อินเทอร์เน็ต คุณจะต้องกำหนดค่าเซิร์ฟเวอร์ DHCP บนเครือข่ายของคุณซึ่งโดยปกติจะอยู่ในเกตเวย์ของคุณเพื่อตั้งค่า "การจอง" ที่เชื่อมโยงที่อยู่ส่วนตัวเฉพาะ (ตามปกติภายใน10/8หรือ192.168/16) กับที่อยู่ MAC ของการ์ดอีเธอร์เน็ตของเวิร์กสเตชันการพัฒนาของคุณ สำหรับสิ่งนี้โปรดอ่านคู่มือเกตเวย์ของคุณ

ตอนนี้เวิร์กสเตชันการพัฒนาของคุณมีที่อยู่ IP ที่เสถียรแล้วก็มีการแลกเปลี่ยนเวลา / เงิน หากคุณต้องการเรียนรู้การใช้ DNS และ OpenSSL ขั้นสูงและติดตั้งใบรับรองหลักบนอุปกรณ์ทั้งหมดที่คุณวางแผนจะทดสอบ:

1. เรียกใช้เซิร์ฟเวอร์ DNS ภายในบนเครือข่ายของคุณ ซึ่งอาจเกิดจากเกตเวย์ของคุณหรือบนเวิร์กสเตชันการพัฒนาของคุณ
2. กำหนดค่าเซิร์ฟเวอร์ DNS ของคุณให้เชื่อถือได้สำหรับ TLD ที่สร้างขึ้นและเรียกซ้ำสำหรับ TLD อื่น ๆ
3. ตั้งชื่อที่มั่นคงให้กับที่อยู่ IP ส่วนตัวของเวิร์กสเตชันการพัฒนาของคุณ สิ่งนี้ทำให้เป็นชื่อภายใน
4. กำหนดค่าเซิร์ฟเวอร์ DHCP ของคุณเพื่อให้ที่อยู่ของเซิร์ฟเวอร์ DNS นี้กับอุปกรณ์อื่น ๆ ที่ได้รับสัญญาเช่า
5. บนเวิร์กสเตชันการพัฒนาของคุณใช้ OpenSSL เพื่อสร้างคีย์คู่สำหรับผู้ออกใบรับรองส่วนตัวและเว็บเซิร์ฟเวอร์
6. ใช้ OpenSSL ออกใบรับรองรูทสำหรับ CA และใบรับรองสำหรับชื่อภายในของเว็บเซิร์ฟเวอร์
7. กำหนดค่า HTTPS ในเว็บเซิร์ฟเวอร์บนเวิร์กสเตชันการพัฒนาของคุณโดยใช้ใบรับรองนี้
8. ติดตั้งใบรับรองหลักของ CA เป็นใบรับรองหลักที่เชื่อถือได้บนอุปกรณ์ทั้งหมด
9. ในอุปกรณ์ทั้งหมดให้เข้าถึงชื่อภายในนี้

หากคุณไม่สามารถเพิ่มใบรับรองรูทหรือควบคุม DNS ในเครื่องได้เช่นหากคุณวางแผนที่จะทดสอบกับอุปกรณ์ที่เป็นของผู้อื่น (BYOD) หรือด้วยเบราว์เซอร์ที่ถูกล็อกมากขึ้นซึ่งไม่อนุญาตให้ผู้ใช้เพิ่มใบรับรองหลักที่เชื่อถือได้เช่นในรายการหลัก เครื่องเล่นวิดีโอเกมคุณจะต้องมีชื่อโดเมนที่มีคุณสมบัติครบถ้วน (FQDN):

1. ซื้อโดเมนจากนายทะเบียนว่าข้อเสนอ DNS กับ API สิ่งนี้อาจเกิดขึ้นโดยตรงภายใน TLD หรือจากผู้ให้บริการ DNS แบบไดนามิกรายใดรายหนึ่งที่สร้างไว้ในรายการคำต่อท้ายสาธารณะ (ผู้ให้บริการ DNS แบบไดนามิกที่ไม่ใช่ PSL ไม่สามารถยอมรับได้เนื่องจากการ จำกัด อัตราที่กำหนดโดย Let's Encrypt )
2. ในไฟล์โซนของโดเมนนี้ชี้Aระเบียนไปที่ที่อยู่ IP ส่วนตัวของเวิร์กสเตชันการพัฒนาของคุณ สิ่งนี้ทำให้เวิร์กสเตชันการพัฒนาของคุณมี FQDN
3. ใช้Dehydratedซึ่งเป็นไคลเอนต์ ACME ที่รองรับการdns-01ท้าทายเพื่อขอรับใบรับรองสำหรับ FQDN นี้จากผู้ออกใบรับรอง Let's Encrypt
4. กำหนดค่า HTTPS ในเว็บเซิร์ฟเวอร์บนเวิร์กสเตชันการพัฒนาของคุณโดยใช้ใบรับรองนี้
5. เข้าถึงชื่อนี้ในทุกอุปกรณ์

ดังที่ Jeff กล่าวไว้ในการตอบกลับครั้งแรกคุณไม่จำเป็นต้องใช้ https ที่ระดับ localhost เพื่อทดสอบ Service Workers พนักงานบริการจะลงทะเบียนและทำงานได้ดีตราบเท่าที่คุณเข้าถึงโดเมน localhost โดยไม่ต้องใช้ HTTPS

เมื่อคุณทดสอบแอปพลิเคชันบน localhost แล้วและต้องการดูว่ามันทำงานกับ https ได้อย่างไรแนวทางที่ง่ายที่สุดคืออัปโหลดแอปของคุณไปยัง GitHub คุณสามารถสร้างโดเมนสาธารณะได้ฟรี (และด้วย HTTPS!)

คำแนะนำมีดังนี้https://pages.github.com/

ฉันคิดว่าวิธีที่ง่ายที่สุดในการทดสอบพนักงานบริการคือค้นหาผู้ให้บริการโฮสติ้งฟรี ปัจจุบันมีเว็บไซต์มากมายที่ให้บริการโฮสติ้งฟรี คุณสามารถโฮสต์แอปของคุณบนเซิร์ฟเวอร์ฟรีนี้ได้อย่างง่ายดาย

ผมส่วนใหญ่ใช้Herokuและnetlify ฟรีและใช้งานง่าย

ฉันใช้ ngrok เพื่ออุโมงค์ IP ในเครื่อง (ไม่ใช่อย่างนั้นจริง ๆ เพราะอยู่ใน Google Colab) เป็นสาธารณะ

ไปที่คอนโซล ngrokฉันเห็นอุโมงค์ทั้งหมดที่สร้างขึ้น ฉันสร้างอุโมงค์เดียวสำหรับ localhost: พอร์ต แต่ที่นี่มี 2 ช่องสำหรับ HTTP และอื่น ๆ สำหรับ HTTPS (ไม่ดีเหรอ?)

ถ้าฉันไปที่ที่อยู่ https ของ Web App บนคอนโซลฉันจะเห็น

แต่ถ้าฉันไปที่ที่อยู่ http บนคอนโซลฉันจะได้รับ

ถาม:คุณสามารถทำงานกับพนักงานบริการที่ต้องการ HTTP ผ่านอุโมงค์ไปยังเครื่องระยะไกลได้หรือไม่

A:เห็นได้ชัดว่าใช่!

รหัสที่อยู่เบื้องหลังการลงทะเบียนนั้นคือ (สิ่งสำคัญที่ต้องรู้ว่าล้มเหลวตรงไหน)

// 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!');
    });
};

และเพื่อให้ซับซ้อนยิ่งขึ้นเว็บแอปของฉันที่ใช้ Service Workers กำลังทำงานใน Colab ( Google Colab ) เว็บแอปทำงานบน Node.js ภายใน Colab

หากคุณกำลังทำงานจาก localhost มันน่าจะง่ายกว่าสำหรับคุณเนื่องจากข้อกำหนด https ไม่ได้บังคับใช้เมื่อเชื่อมต่อกับ localhost (ตามทฤษฎี) [A] และ[B]

ไม่เหมือนกันที่เบราว์เซอร์จะเข้ากันได้ดีกับแอพของคุณเพียงเพราะมันทำงานบน localhost

หมายเหตุ:การทดลองของฉันด้านบน ..

• Firefox: ใช้งานได้กับและไม่มีการตั้งค่าด้านล่าง
• Chrome: โดยไม่ต้องเพิ่ม URL ในรายการที่อนุญาตพิเศษและเริ่มต้นใหม่ฉันได้รับ

ไปที่แอปเว็บ https ฉันได้รับ:

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)

ไปที่เว็บแอป http ฉันได้รับ:

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 และไม่สามารถใช้ https ได้คุณอาจต้องเปลี่ยนการตั้งค่าเหล่านี้ในเบราว์เซอร์ของคุณ

บางคนอธิบายเรื่องนี้ไปแล้ว แต่นี่จะกลับมาอีกครั้ง

โครเมียม:

1. ไปที่ chrome: // flags / # unsafely-treat-insecure-origin-as-secure
2. เพิ่ม URL ที่คุณต้องการอนุญาตพิเศษ
3. รีสตาร์ท Chrome

โปรดทราบว่าการดำเนินการนี้จะรีสตาร์ทหน้าต่าง Chrome ทั้งหมด นี่ไม่ใช่วิธีแก้ปัญหาสำหรับฉันเพราะอุโมงค์ของฉันเปลี่ยนชื่อทุกครั้งที่สร้างและฉันไม่สามารถรีสตาร์ทหน้าต่างจำนวนมากได้ทุกครั้ง

Firefox / Waterfox

1. เปิดเครื่องมือสำหรับนักพัฒนา
2. เปิดการตั้งค่า
3. ทำเครื่องหมาย "เปิดใช้งานพนักงานบริการผ่าน HTTP (เมื่อเปิดกล่องเครื่องมือ)"

Firefox / Waterfox คุณอาจไม่จำเป็นต้องทำการเปลี่ยนแปลงด้านล่าง แต่ฉันทำไปแล้ว (เบราว์เซอร์ของฉันอาจเก่าไปหน่อย) ข้อมูลเพิ่มเติมที่นี่

ใน about: config

ฉันเปิดใช้งาน

dom.serviceWorkers.testing.enabled
dom.serviceWorkers.enabled

ขอแนะนำเป็นอย่างยิ่งให้ดูที่https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workersและหน้าที่เกี่ยวข้องในไซต์เดียวกัน

หากมีคนสนใจการตั้งค่า ngrok มันง่ายมาก (เวอร์ชั่น python)

#   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)