새로 고침 후 Vue PWA가 새 콘텐츠를 가져오지 않음

새로 고침 후 Vue PWA가 새 콘텐츠를 가져오지 않음

나는 Vue를 처음 접하고 PWA Service-worker 플러그인으로 프로젝트를 만들었다.내 앱의 새 버전을 배포한 후 콘솔에 다음 메시지가 표시됨:

페이지(F5)를 새로 고친 후에도 이러한 메시지는 여전히 같은 방식으로 나타나고 앱은 이전 상태로 유지된다.캐시를 지우기 위해 모든 것을 시도했지만 여전히 새로운 내용이 로드되지 않는다.

프로젝트를 만든 후 기본 구성에서 아무것도 변경하지 않았고 서비스 작업자와 상호 작용하는 코드를 추가하지 않았다.뭐가 잘못됐어?내가 뭘 빼놓았나요?

내가 알아낸 바와 같이, 이 질문은 PWA의 초보자들과만 관련이 있다. PWA는 이것을 달성하기 위해 PWA를 구성할 수 있고, 또 필요한지 모른다.지금 (및 VueJS 사용) 해결되었다고 생각되는 경우 다음을 기억하십시오.

새로운 콘텐츠를 자동으로 다운로드하려면 PWA를 구성해야 한다.내 경우(VueJS) 이 작업은 파일을 생성하여 수행되며vue.config.js내 프로젝트의 루트 디렉터리(과 동일한 수준)package.json).

이 파일 내에서 필요한 사항:

module.exports = {
    pwa: {
        workboxOptions: {
            skipWaiting: true
        }
    }
}

탐지될 경우 자동으로 새 콘텐츠를 다운로드하는 기능그러나 콘텐츠를 다운로드한 후 새로 고쳐야 하기 때문에 콘텐츠는 아직 클라이언트에 표시되지 않을 것이다.덧붙여서 이렇게 했다.window.location.reload(true)로registerServiceWorker.js나의src/디렉토리:

updated () {
    console.log('New content is available: Please refresh.')
    window.location.reload(true)
},

이제 서비스 작업자가 새로운 콘텐츠를 감지하면 자동으로 다운로드하고 이후 페이지를 새로 고친다.

나는 이것에 대한 다른 접근법을 알아냈고 내가 지금까지 본 것과는 다르게 그것은 잘 작동한다.

updated() {
      console.log('New content is available; please refresh.');
      caches.keys().then(function(names) {
        for (let name of names) caches.delete(name);
      });
    },

여기서 일어나는 일은 업데이트된 기능이 서비스 작업자에게 호출되면 모든 캐시를 통과하여 삭제한다는 것이다.즉, 업데이트가 있을 경우 앱이 더 느리게 시작되지만 그렇지 않을 경우 캐시된 자산이 제공된다는 것을 의미한다.나는 서비스 직원들이 이해하기 복잡할 수 있고 내가 읽은 것을 스킵웨이트링()으로 읽으면 그것이 어떤 역할을 하는지, 어떤 부작용이 있는지 모르는 한 추천하지 않기 때문에 이 접근법을 더 좋아한다.이것은 또한 주입매니페스트 모드에서도 작동하는데, 이것이 내가 현재 사용하고 있는 방법이다.

통과하다registration논쟁은 그 다음에 사용하다.update()그것과 함께인수는 ServiceWorkerRegistration API를 사용한다.

updated (registration) {
  console.log('New content is available; please refresh.')
  registration.update()
},

참조URL: https://stackoverflow.com/questions/54145735/vue-pwa-not-getting-new-content-after-refresh