source

사이트를 설치할 수 없습니다. 일치하는 서비스 작업자가 검색되지 않았습니다.

nicesource 2023. 3. 20. 23:21
반응형

사이트를 설치할 수 없습니다. 일치하는 서비스 작업자가 검색되지 않았습니다.

첫 번째 pwa를 프로그래밍하려고 하는데 다음과 같은 문제가 발생했습니다.

웹 앱을 시작할 때 다음과 같은 오류가 발생합니다.

사이트를 설치할 수 없습니다. 일치하는 서비스 작업자가 없습니다.페이지를 새로고침하거나 현재 페이지의 서비스 워커가 매니페스트에서 시작 URL을 제어하는지 확인해야 할 수 있습니다.

링크로 인해 매니페스트 URL이 맞는 것 같습니다.

manifest.json

"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#29BDBB",
"background_color": "#29BDBB"

이렇게 SW를 등록합니다.

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(reg) {
    console.log('Successfully registered service worker', reg);
}).catch(function(err) {
    console.warn('Error whilst registering service worker', err);
});
}

내가 여기서 내 SW를 가져왔어

그래서 파이어베이스로 호스트 할 수 있는 간단한 웹 앱을 만들려고 합니다.

뭐가 문제죠?도와주셔서 고마워요.

웹 사이트의 루트에 서비스 워커의 스크립트파일을 배치하여start_url로./또는 원하는 장소에 배치하여scope프로퍼티Service-Worker-Allowed다른 답변과 마찬가지로 HTTP 헤더입니다.

Angular8+를 사용하는 다른 사람에게 이런 일이 생길 경우를 대비해서.등록 전략을 다음과 같이 변경해야 할 수 있습니다.

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }),

디폴트로는 다음과 같이 설정되어 있습니다.registerWhenStable즉, 보류 중인 태스크가 없는 경우,like setTimeout()기타로 변경함으로써registerImmediately가능한 한 빨리 서비스 워커를 등록합니다.

이걸 공유해서 여기에 추가해야겠다고 생각했어요. 이걸 해결하느라 며칠을 허비했으니까요.

리액트 앱 서비스 작성 작업자는 운영 환경에서만 유효하므로 서비스 작업자가 제대로 작동하는지 테스트하기 위해 작성 및 로컬로 제공하십시오.

먼저 serv npm을 설치합니다(아직 설치되어 있지 않은 경우).npm i serve -g

그러면...

npm run build

serve -s build

또한 서비스 직원이 정상적으로 등록하면 다음과 같은 문제가 발생할 수 있습니다.beforeinstallprompt전화가 안 올 수도 있어요.그런 경우, 파이어베이스와 같은 호스트를 사용하여 앱을 게시합니다. 이 호스트는 사이트에 서비스를 제공합니다.https, 그 다음에,beforeinstallprompt거기.

다음과 같이 변경해 보십시오.

  • manifest.json에서는 start_url 스코프가 다음과 같이 설정됩니다(또는 사용자의 설정에 따라).

      "start_url": "/",
      "scope": "."  
    
  • sw.js 파일은 start_url을 참조로 하여 프로젝트 루트에 있습니다.

라이브러리 "@disc/service-worker":^7.2.15를 버전 "@disc/service-worker":^8.2.3으로 잘 업데이트 하고 있습니다.

배치:ServiceWorkerModule.register ('ngsw-worker.js', {enabled: environment.production, registrationStrategy: 'registerImmediately'}),

이 문제를 해결하는 한 가지 방법은 서비스 워커를 포함시킨 후에 쿼리 파라미터를 추가하는 것입니다.보통 html은 이렇게 됩니다.

<script src="https://example.com"></script> 

이렇게 수정할 수 있습니다.

<script src="https://example.com?v=1.1"></script>

언급URL : https://stackoverflow.com/questions/45534076/site-cannot-be-installed-no-matching-service-worker-detected

반응형