Dúvida sobre Service Workers

[kazzkiq]

Toda vez que eu tento implementar Service Workers em um projeto eu acabo caindo em um limbo de cache: minha aplicação registra o service worker, ativa o cache para os arquivos e eu nunca mais consigo atualizá-los.

Qual a melhor prática para conseguir forçar um Service Worker a atualizar os arquivos do cache mediante qualquer mudança nestes arquivos vindo do servidor?

Exemplo:

app.css (servidor) --> Service Worker faz cache --> mudança no app.css (servidor) --> Service Worker deleta cache antigo e faz novo cache

É possível atingir esse tipo de inteligência com os Service Workers? Alguém aqui familiarizado com essa tecnologia que possa dar um help?

Se alguem quiser dar uma olhada, o meu arquivo sw.js é este:

Expandir Código

// sw.js

var CACHE_NAME = 'app-v1';
var urlsToCache = [
  '/',
  '/index.html',
  '/app.css',
  '/app.js',
  '/img/sprite.svg',
  '/img/logo.svg'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

self.addEventListener('activate', function(event) {
  // Calling claim() to force a "controllerchange" event on navigator.serviceWorker
  event.waitUntil(self.clients.claim());
});

[gabrieldarezzo]

O simples fato de alterar o nome 'app-v1' para v2 e coloca e o CSS que você pretende já não resolve ?

Outra coisa que pode estar prejudicando talvez é o cache ' nativo da web.'

Os browser já utilizam técnicas de cacheamento independe de você solicitar. (Cabeçalho HTTP)

https://css-tricks.com/strategies-for-cache-busting-css/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires

[mikejavier]

@kazzkiq Se você ainda esta implementando seu app, aconselho que uma vez instalado o serviceworker deixe esta opção do devtool ativa.

Isso vai forçar seu browser ignorar o serviceworker.

Caso você já tenha seu projeto pronto e somente queira atualizar o cache quando houver mudanças nos assests você vai precisar colocar uma condição no evento activate

Exemplo

// Renovando os caches no evento "activate"
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
        	console.log(cacheName)
                // Verifica se o nome do cache mudou
        	if(cacheName !== CACHE_NAME){
            	return caches.delete(cacheName);
        	}
        })
      );
    })
  );
});

então sempre que houver alterações nos assestes você muda o nome do cache.

O google recentemente liberou algumas libs para tornar esse processo automático, junto ao FW e task runners mais "comuns", recomendo dar uma olhada.

• https://github.com/GoogleChrome/sw-precache
• https://github.com/GoogleChrome/sw-toolbox