Ajustes em cache.addAll() e importScripts() serão lançados no Chrome 71

Jeff Posnick

Os desenvolvedores que usam service workers e a API Cache Storage devem procurar dois estão sendo lançadas no Chrome 71. Ambas as mudanças deixam a implementação do Chrome mais alinhada com os specifications e outros navegadores.

Proibição de importScripts() assíncrono

importScripts() instrui o script do service worker principal a pausar a execução atual, faz o download de código adicional determinado URL e executá-lo até a conclusão no escopo global atual. Depois de fazer isso, o script do service worker principal retoma a execução. importScripts() é útil quando você quer dividir o script do service worker principal em partes menores por motivos organizacionais, ou extrair código de terceiros para adicionar funcionalidade ao seu service worker.

Os navegadores tentam reduzir os possíveis problemas de desempenho de "baixar e executar ” armazenando automaticamente em cache qualquer coisa extraída por meio de importScripts(), o que significa que após o download inicial, há muito pouca sobrecarga envolvida na execução do código importado.

Para que isso funcione, no entanto, o navegador precisa saber que não haverá nenhuma "surpresa" código importado para o service worker após o instalação. De acordo com a especificação do service worker, importScripts() deve funcionar apenas durante a execução síncrona do script do service worker ou, se necessário, de forma assíncrona dentro do gerenciador install.

Antes do Chrome 71, chamar importScripts() de forma assíncrona fora do gerenciador install funcionam. A partir do Chrome 71, essas chamadas gerar uma exceção de execução (a menos que o mesmo URL tenha sido importado anteriormente em um gerenciador install), correspondendo ao comportamento em outros navegadores.

Em vez de um código assim:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

O código do seu service worker será semelhante a este:

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

Suspensão do uso de URLs repetidos transmitidos para cache.addAll()

Se você estiver usando a API Cache Storage junto com um service worker, há outra pequena mudança Chrome 71 para se alinhar à especificação relevante. Quando o mesmo URL é passados várias vezes para uma única chamada para cache.addAll(), o especifica que a promessa retornada pela chamada deve ser rejeitada.

Antes do Chrome 71, isso não era detectado, e os URLs duplicados eram ignorados.

Essa geração de registros é uma introdução ao Chrome 72, em que, em vez de apenas um aviso registrado, URLs duplicados levar à rejeição de cache.addAll(). Se você estiver chamando cache.addAll() como parte de uma cadeia de promessas passado para InstallEvent.waitUntil(), como é prática comum, essa rejeição pode fazer com que o service worker falhe.

Veja como você pode ter problemas:

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

Essa restrição se aplica apenas aos URLs reais que estão sendo transmitidos para o cache.addAll() e armazenados em cache acabar sendo duas respostas equivalentes com URLs diferentes, como '/' e '/index.html', uma rejeição.

Testar amplamente a implementação do service worker

Os service workers são amplamente implementados em todas as principais ferramentas "permanentes" navegadores em a este ponto. Se você testa regularmente seu App Web Progressivo em vários navegadores ou se tiver um número significativo de usuários que não usam o Chrome, é provável que você já tenha detectado a inconsistência e atualizou seu código. Mas, caso você não tenha notado isso, em outros navegadores, queríamos chamar a atenção para a mudança antes de mudar o comportamento do Chrome.