>source

서비스 워커를 사용하여 PWA를 수행했습니다. 아래와 같이 html 파일로 스크립트 파일을 가져옵니다.

HTML이나 스크립트 파일의 변경 사항을 업데이트하면 해당 업데이트가 서비스 워커에 반영되지 않고 항상 크롬이 메모리 캐시에서 파일을 제공하지만 firfox는 서비스 워커에서 업데이트된 파일을 제공합니다.

이 문제가 발생하는 이유를 알고 싶습니다 ...이 문제를 해결할 수 있는 솔루션

아래는 html 파일

<html>    <body>        <div><h1>Staic,Hello All! </h1></div>        <script src="2.js"></script>    </body></html>

아래는 스크립트 파일(2.js)입니다.

const text= '<h1>Dynamic Hello All!</h1>'
const div= document.createElement('div')
div.innerHTML= text
document.body.appendChild(div)
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/sw2.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function(err) {
        console.log('ServiceWorker registration failed: ', err);
      });
    });
}

아래는 서비스 워커 파일입니다.

var cacheName= 'b7';
//var cacheAssets= [
//'/1.html',
//'/1.js',
//]
self.addEventListener('install', e=> {
    //e.waitUntil(
    //caches.open(cacheName)
    //.then(cache=> {
    // console.log(`Service Worker: Caching Files: ${cache}`);
    // cache.addAll(cacheAssets)
    //     .then(()=> self.skipWaiting())
    //})
    //);
})
self.addEventListener('activate', e=> {
    console.log('Service Worker: Activated');
    e.waitUntil(
        caches.keys().then(cacheNames=> {
            return Promise.all(
                cacheNames.map(
                    cache=> {
                        if (cache !== cacheName) {
                            console.log('Service Worker: Clearing Old Cache');
                            return caches.delete(cache);
                        }
                    }
                )
            )
        })
    );
})
//self.addEventListener('fetch', e=> {
//console.log('Service Worker: Fetching');
//e.respondWith(
// fetch(e.request).catch(()=> caches.match(e.request))
//);
//});
self.addEventListener('fetch', e=> {
    console.log('Service Worker: Fetching');
    e.respondWith(
        fetch(e.request)
        .then(res=> {
            const resClone= res.clone();
            caches.open(cacheName)
                .then(cache=> {
                    cache.put(e.request, resClone);
                });
            return res;
        }).catch(
            err=> caches.match(e.request)
            .then(res=> res)
        )
    );
});

  • 답변 # 1

    이것은 Chrome에서 예상되는 동작이지만 모든 요청이술책서비스 워커가 클라이언트를 제어할 때 발생하는 이벤트입니다.

    이 오래된 질문에는 더 많은 맥락이 있습니다. Chrome 서비스 작업자가 캐시된 요청을 가로채지 않음

    제 조언은 명시적으로 설정캐시 제어:헤더HTTP 캐시에서 응답을 사용하기 전에 항상 재검증 단계가 필요한지 확인하십시오. 재검증이 명시적으로 필요한 경우 메모리 캐시가 사용되지 않고 재검증 요청이술책서비스 워커의 이벤트.

  • 이전 Angular-testing-library -잘못된 값을 예상해도 테스트가 실패하지 않습니다.
  • 다음 dplyr, group_by 및 축소 또는 요약을 사용하여 문자열/행 연결, 그러나 NA 값 유지