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

Program / 글쓴이

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

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

답변

일반적으로 서비스 워커를 사용하려면 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 사용을 계획해야합니다. 실제 사용자에게 해당 플래그를 활성화하는 단계를 거치도록 요청하지 마십시오!

답변

프로그레시브 웹 앱의 실제 동작 테스트를 위해 플러그인 된 모바일 장치의 서비스 워커 를 디버깅 하려는 경우 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 월 현재이 내용을 읽는 것이 명확하지 않습니다. 간단한 대답)

답변

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

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

답변

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

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

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

답변

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. 모든 장치에서이 이름에 액세스합니다.

답변

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

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