सेवा श्रमिक

Question

अपडेट नहीं कर रहे हैं मेरे पास मेरी वेबसाइट में एक सेवा कर्मचारी स्थापित है, सबकुछ ठीक काम करता है, सिवाय इसके कि जब मैं कैश की गई फ़ाइलों को अपडेट करता हूं, वास्तव में; वे हमेशा के लिए catched रहने और मैं कैश रद्द करने के लिए जब तक कि मैं `क्रोम से कार्यकर्ता सदस्यता समाप्त असमर्थ होने लगते हैं: // ServiceWorker-internals/

const STATIC_CACHE_NAME = 'static-cache-v1'; 
const APP_CACHE_NAME = 'app-cache-#VERSION'; 

const CACHE_APP = [ 
    '/', 
    '/app/app.js' 
] 
const CACHE_STATIC = [ 
    'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700', 
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' 
] 

self.addEventListener('install',function(e){ 
    e.waitUntil(
     Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){ 
      var static_cache = storage[0]; 
      var app_cache = storage[1]; 
      return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    e.waitUntil(
     caches.keys().then(function(cacheNames) { 
      return Promise.all(
       cacheNames.map(function(cacheName) { 
        if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { 
         console.log('deleting',cacheName); 
         return caches.delete(cacheName); 
        } 
       }) 
      ); 
     }) 
    ); 
}); 

self.addEventListener('fetch',function(e){ 
    const url = new URL(e.request.url); 
    if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){ 
     e.respondWith(
      caches.match(e.request).then(function(response){ 
       if (response) { 
        return response; 
       } 
       var fetchRequest = e.request.clone(); 

       return fetch(fetchRequest).then(function(response) { 
        if (!response || response.status !== 200 || response.type !== 'basic') { 
         return response; 
        } 
        var responseToCache = response.clone(); 
        caches.open(STATIC_CACHE_NAME).then(function(cache) { 
         cache.put(e.request, responseToCache); 
        }); 
        return response; 
       }); 
      }) 
     ); 
    } else if (CACHE_APP.indexOf(url.pathname) !== -1){ 
     e.respondWith(caches.match(e.request)); 
    } 
}); 

जहां #VERSION एक संस्करण है कि कैश नाम के साथ जोड़ दिया जाता है संकलन समय पर; ध्यान दें कि STATIC_CACHE_NAME कभी भी नहीं बदलता है, क्योंकि फ़ाइलों को हमेशा के लिए स्थैतिक माना जाता है।

इसके अलावा व्यवहार अनियमित है, मैं हटाए गए फ़ंक्शन (वह भाग जहां यह लॉग करता है) की जांच कर रहा है और यह हटाए गए कैशों के बारे में लॉग इन करता है जो पहले ही हटा दिए गए हैं (माना जाता है)। जब मैं caches.keys().then(function(k){console.log(k)}) चलाता हूं तो मुझे पुराने कैश का पूरा समूह मिल जाता है जिसे हटा दिया जाना चाहिए था।

Answer 1

गुडलिंग और उदारता पर कुछ वीडियो देखने के बाद, मैंने पाया कि कार्यकर्ता का इच्छित व्यवहार तब तक रहना है जब तक कि यह नियंत्रित नहीं होता है और जब नया सेवा कर्मचारी नियंत्रण ले सकता है तो फिर से फिर से खोल दिया जाता है।

समाधान https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting पर आधारित नियंत्रण लेने के लिए मजबूर करना था, इस मुद्दे को हल करने के लिए, नए कार्यकर्ता को परिवर्तनों को प्रतिबिंबित करने के लिए 2 रीलोड होने पर भी (यह समझ में आता है कि ऐप नए से पहले लोड हो गया है कार्यकर्ता पिछले की जगह लेता है)।

self.addEventListener('install',function(e){ 
    e.waitUntil(
     Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME),self.skipWaiting()]).then(function(storage){ 
      var static_cache = storage[0]; 
      var app_cache = storage[1]; 
      return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    e.waitUntil(
     Promise.all([ 
      self.clients.claim(), 
      caches.keys().then(function(cacheNames) { 
       return Promise.all(
        cacheNames.map(function(cacheName) { 
         if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { 
          console.log('deleting',cacheName); 
          return caches.delete(cacheName); 
         } 
        }) 
       ); 
      }) 
     ]) 
    ); 
});