사이트를 설치할 수 없습니다. 일치하는 서비스 작업자가 검색되지 않았습니다.
첫 번째 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
'source' 카테고리의 다른 글
리액트 및 레일로 양식을 작성하는 방법 (0) | 2023.03.20 |
---|---|
타이프스크립트 이미지 Import (0) | 2023.03.20 |
경고:목록의 각 아이는 고유한 "키" 소품을 가지고 있어야 합니다. (0) | 2023.03.20 |
Safari 11.1: ajax/X입력[type=file]이(가) 비어 있으면 HR 양식 제출이 실패함 (0) | 2023.03.20 |
React.useMemo를 사용한 비동기 호출 (0) | 2023.03.20 |