HTTP를 통한 서비스 워커 테스트 옵션


93

서비스 워커를 테스트하고 싶지만 가상 호스트 설정이 있고 localhost에서 https를 활성화 할 수없는 것 같습니다.

로컬 호스트에서 서비스 워커를 등록하려고 할 때마다 서비스 워커를 테스트하기 위해 로컬 가상 호스트 URL을 허용 목록에 추가하려면 어떻게해야합니까? Chrome은 서비스 워커를 사용하려면 https가 필요하다고 말합니다. 최소한 로컬 테스트를 위해이 제한을 어떻게 극복 할 수 있습니까?

답변:


137

일반적으로 서비스 워커를 사용하려면 HTTPS를 통해 페이지와 서비스 워커 스크립트를 모두 제공해야합니다. 그 이유는 강력한 새 기능을 위해 안전한 출처 선호에 설명되어 있습니다.

로컬 개발을 용이하게하기위한 HTTPS 요구 사항에는 예외가 있습니다.를 통해 http://localhost[:port]또는을 통해 페이지 및 서비스 워커 스크립트에 액세스하는 경우 http://127.x.y.z[:port]추가 작업없이 서비스 워커를 사용 설정해야합니다.

크롬의 최신 버전, 당신은을 통해 지역 발전을 duriing이 요구 사항을 해결할 수 있습니다 chrome://flags/#unsafely-treat-insecure-origin-as-secure, 이 답변에 설명 된대로 .

Firefox devtools.serviceWorkers.testing.enabled 설정을 통해 유사한 기능을 제공 합니다.

이 기능은 다른 방법으로는 수행 할 수없는 테스트를 용이하게하기위한 것일 뿐이며 사이트의 프로덕션 버전을 제공 할 때 항상 HTTPS 사용을 계획해야합니다. 실제 사용자에게 해당 플래그를 활성화하는 단계를 거치도록 요청하지 마십시오!


고마워 제프가 바로 시도 할 것입니다. 확실히 나는 이것을 테스트 용으로 만 사용하고있다 .. 당분간 필사적 인 해결 방법이 필요했다 ... !! 이상적인 연습은 모르겠지만 .. 절망적 일 때 절망 대책이 필요해 ... !! 힘들게 벌어 들인 4 점을 돌려 주시면 ... !! 당신이 적절하지 그 느낌이 경우 내가 질문을 삭제하고 잘못된 행동을 격려 할 것이다
아만 Satija에게

1
localhost에서 서비스 워커를 사용하고 있지만 서버에서 sw.js 파일을 가져 오려고하면 net :: ERR_INSECURE_RESPONSE,
sp1rs

1
감사! 본문을 읽을 수 있도록 업데이트했습니다 devtools.serviceWorkers.testing.enabled.
Jeff Posnick

5
위의 내용을 찾는 데 어려움이있는 사람은 FF 열기-개발 도구-설정 톱니 바퀴-고급 설정-http를 통해 sw를 활성화합니다. 그런 다음 about : debugging # workers in the url or tools-web dev-service workers in the toolbar. 일꾼을 시작하십시오!
Sten Muchow

@StenMuchow의 대답은 크롬 Mac과 Windows에서 저를 위해 노력하고 있습니다
모하메드 후세인

51

프로그레시브 웹 앱의 실제 동작 테스트를 위해 플러그인 된 모바일 장치의 서비스 워커디버깅 하려는 경우 SSL 크롬 시작 옵션이 도움이되지 않으며 인증서를 구매할 필요가 없습니다.

@ chris-ruppel은 프록시 소프트웨어 설치를 언급했지만 실제로 포트 포워딩을 사용 하는 더 쉬운 방법이 있습니다 .

Chrome을 사용하여 기기를 연결하고 디버그한다고 가정합니다.

  • 에서 크롬 개발 도구 "원격 장치" 개방 "설정" 및 추가 "포트 포워딩" 규칙을.
  • localhost 설정이 localhost : 80에서 실행중인 경우
  • "Device port 8080" 규칙을 추가하기 만하면됩니다 (1024보다 큰 권한이없는 포트 일 수 있음).
  • 및 로컬 주소 "localhost : 80"(또는 mytestserver.sometestdomainwithoutssl.company:8181 또는 기타)

그런 다음 모바일 장치 에서 URL " http : // localhost : 8080 "을 호출 할 수 있으며 실제 PC / 테스트 서버 의 "localhost : 80"에 의해 응답됩니다 . 마치 모바일에서 실행되는 로컬 컴퓨터 인 것처럼 서비스 작업자와 완벽하게 작동합니다.

모바일 장치에서 권한이없는 포트를 사용하는 것을 기억하는 한 여러 포트 전달 및 다른 대상 도메인에서도 작동합니다. 스크린 샷보기 : 모바일에서 호출 될 때 PC를 호출하는 일부 구성된 포트는 스크린 샷을 참조하십시오.

이 정보의 출처는 Google 원격 장치 문서입니다 : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (그러나 2017 년 4 월 현재이 내용을 읽는 것이 명확하지 않습니다. 간단한 대답)


유망 해 보이지만 나를 위해 일하지 않았습니다. 포트 포워딩을 설정 한 후 Android 5.0.2에서 localhost를 방문하려고 할 때 "이 사이트에 연결할 수 없습니다"라고만 말합니다.
Jackson

따라서 localhost에서 https가 필요하지 않습니까? SW가 잘 작동할까요?
Machado

2
즉, 허용 대답을해야한다, 그것은 작동하고 잘
미켈

빠르고 쉽습니다! 휴대폰에서 USB 디버깅을 활성화하고 수락하고 USB를 통해 PC에 연결하는 것을 잊지 마십시오. 감사합니다!
Marcos R

그러나 http의 경우에만 https를 통해 리소스를 요청하면 캐시되지 않습니다.
Legends

24

저는 종종 실제 장치에서 디버그하고 테스트하고 싶습니다. 내가 생각 해낸 한 가지 방법은 로컬 개발 중에 Charles Proxy를 통해 전화의 네트워크 트래픽을 라우팅하는 것 입니다. 모든 Chrome 전용 솔루션과 달리 이것은 휴대 전화의 모든 브라우저에서 작동합니다.

  1. 내 노트북에서 Charles를 실행합니다 (서비스 워커와 함께 내 웹 사이트를 제공함). Charles가 실행되면 2 단계의 IP / 포트를 기록해 둡니다.
  2. 내 랩톱을 프록시로 사용하도록 모바일 장치를 구성합니다.
    • 안드로이드는 누르고 설정에서 무선>에 보류를 들어 수정 네트워크 > 고급 설정 > 프록시 . 사용 설명서 는 IP / 포트를 설정할 수 있습니다.
    • iOS의 경우 (i) 아이콘> HTTP 프록시 섹션을 클릭 하십시오. 선택 수동 , 다음, IP / 포트를 설정합니다.
  3. localhost이제 내 모바일 장치에서 방문 하면 서비스 워커를 등록하고 테스트 할 수 있습니다.

4
나도 그 문제에 직면하고 있습니다. 감사합니다. 모바일 테스트는 프록시 없이는 완전히 불가능합니다. 이 게시물은 더 많은 투표가 필요합니다.
Phyo Arkar Lwin

1
@ chris-ruppel 실제로 Chrome Dev Tools inbuild 원격 장치 포트 포워딩을 사용하여 추가 프록시 소프트웨어없이이 작업을 수행 할 수있는 방법이 있습니다. 이 스레드에 자세한 답변을 추가했습니다.
Christopher Lörken

"모바일을 테스트하는 것은 완전히 불가능합니다." 그러나 그것은 사소한 감독입니다. 하자가 ... 서비스 노동자를 spec'd 사람들이 박수를
잭슨

Chris "1. 내 노트북에서 Charles 실행"에 대해 자세히 설명해 주시겠습니까? Charles 프록시를 설치할 수 있습니다. 그는 자신의 컴퓨터에서 localhost : 8080에서 실행되는 서버를 가지고 있습니다. 그리고 뭐? "IP / 포트 메모"라고도합니다. 어디?
Jackson

1
@ChrisRuppel 나는로 전환 ngrok.com 무료, 내 로컬 앱의 공공 HTTPS 사이트를 생성하고, 마법처럼 작동합니다! 첫 번째 실행은 연결될 때까지 시간이 걸렸습니다. 내가 권장하는 유일한 방법은 미국에 있지 않은 경우 지역을 전환하는 것입니다 ( ngrok.com/docs#config-options , "regions"매개 변수).
Karsten Silz

10

제 경우에는 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 인증서 설정 방법보기


매력처럼 일했다! 큰 추천에 감사드립니다!
Karsten Silz

등대를 사용하여 보고서를 생성하는 데 문제가 있지만 이것은 도움이됩니다.
Cj Oyales

3

Jeff가 첫 번째 응답에서 언급했듯이 Service Worker를 테스트하기 위해 localhost 수준에서 https가 필요하지 않습니다. 서비스 워커는 HTTPS없이 localhost 도메인에 액세스하는 한 정상적으로 등록하고 작동합니다.

localhost에서 애플리케이션을 테스트하고 실제 https에서 어떻게 작동하는지 확인하려면 가장 간단한 방법은 앱을 GitHub에 업로드하는 것입니다. 무료로 (그리고 HTTPS로!) 퍼블릭 도메인을 만들 수 있습니다.

지침은 다음과 같습니다 : https://pages.github.com/


1
후속 질문은 소프트웨어 권장 사항에 대한 질문입니다. localhost 메서드를 사용하여 모바일 장치에서 테스트 할 때 권장되는 iOS 및 Android 용 웹 서버는 무엇입니까?
Damian Yerrick

Erlang HTTP Server를 사용하고 있지만 모든 서버가 작동합니다. Chrome에서 200 HTTP 서버를 사용하기 전에 Google Marketplace에서 액세스 할 수 있습니다.
Miguel Guardo

3

localhost에서 웹 서버를 실행할 수없는 클라이언트 장치에서 서비스 워커를 테스트하려는 경우 일반적인 기술은 다음과 같습니다.

  1. 서버에 호스트 이름을 지정하십시오.
  2. 이 호스트 이름에 인증서를 제공하십시오.
  3. IP가이 인증서를 발급 한 CA를 신뢰하도록합니다.

그러나 이것은 말처럼 쉬운 일입니다. 2016 년 11 월 Reddit의 AMA에서 Let 's Encrypt 담당자 사설 LAN의 HTTPS가 "정말 어려운 질문이며 지금까지 만족스러운 답변을 제시 한 사람은 아무도 없다고 생각합니다."라고 인정했습니다.

컴퓨터에 호스트 이름을 지정하는 일반적인 방법은 매일 또는 인터넷 게이트웨이 어플라이언스의 전원을 껐다 켤 때마다 변경되는 것이 아니라 안정적인 내부 IP 주소를 제공하는 것입니다. 특정 개인 주소 (일반적으로 10/8또는 내부 192.168/16)를 개발 워크 스테이션 이더넷 카드의 MAC 주소와 연결하는 "예약"을 설정하려면 일반적으로 게이트웨이에있는 네트워크에서 DHCP 서버를 구성해야합니다 . 이를 위해 게이트웨이 설명서를 읽으십시오.

이제 개발 워크 스테이션에 안정적인 IP 주소가 있으므로 시간 / 돈의 균형이 맞습니다. 고급 DNS 및 OpenSSL 사용법을 배우고 테스트하려는 모든 장치에 루트 인증서를 설치하려는 경우 :

  1. 네트워크에서 내부 DNS 서버를 실행합니다. 이것은 게이트웨이 또는 개발 워크 스테이션에있을 수 있습니다.
  2. 일부 구성 TLD에 대해 권한을 부여하고 다른 TLD에 대해 재귀하도록 DNS 서버를 구성합니다.
  3. 개발 워크 스테이션의 개인 IP 주소에 안정적인 이름을 지정하십시오. 이것은 내부 이름을 제공합니다.
  4. 임대를받는 다른 장치에이 DNS 서버의 주소를 제공하도록 DHCP 서버를 구성하십시오.
  5. 개발 워크 스테이션에서 OpenSSL을 사용하여 사설 인증 기관 및 웹 서버에 대한 키 쌍을 생성 하십시오.
  6. OpenSSL을 사용하여 CA에 대한 루트 인증서와 웹 서버의 내부 이름에 대한 인증서를 발급합니다.
  7. 이 인증서를 사용하여 개발 워크 스테이션의 웹 서버에서 HTTPS를 구성합니다.
  8. 모든 장치에 CA의 루트 인증서를 신뢰할 수있는 루트 인증서로 설치합니다.
  9. 모든 장치에서이 내부 이름에 액세스합니다.

다른 사람이 소유 한 장치 (BYOD) 또는 사용자가 신뢰할 수있는 루트 인증서를 추가하는 것을 허용하지 않는 더 잠긴 브라우저로 테스트하려는 경우와 같이 루트 인증서를 추가하거나 로컬 DNS를 제어 할 수없는 경우 비디오 게임 콘솔을 사용하려면 정규화 된 도메인 이름 (FQDN)이 필요합니다.

  1. API와 함께 DNS를 제공 하는 등록 기관 에서 도메인을 구입합니다 . 이는 TLD 내에서 직접 또는 공용 접미사 목록에 올린 동적 DNS 공급자 중 하나에서 올 수 있습니다. (비 PSL 동적 DNS 공급자는 Let 's Encrypt에 의해 부과 된 속도 제한으로 인해 허용되지 않습니다 .)
  2. 이 도메인의 영역 파일 A에서 개발 워크 스테이션의 개인 IP 주소에 있는 레코드를 가리 킵니다 . 이렇게하면 개발 워크 스테이션에 FQDN이 제공됩니다.
  3. 챌린지 를 지원하는 ACME 클라이언트 인 Dehydrated를 사용 dns-01하여 Let 's Encrypt 인증 기관에서이 FQDN에 대한 인증서를 얻습니다.
  4. 이 인증서를 사용하여 개발 워크 스테이션의 웹 서버에서 HTTPS를 구성합니다.
  5. 모든 장치에서이 이름에 액세스합니다.

1

서비스 워커를 테스트하는 가장 쉬운 방법은 무료 호스팅 제공 업체를 찾는 것입니다. 요즘에는 무료 호스팅을 제공하는 사이트가 많이 있습니다. 이 무료 서버에서 앱을 쉽게 호스팅 할 수 있습니다.

나는 주로 herokunetlify를 사용 합니다. 이것은 무료이며 사용하기 쉽습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.