Как заменить событие жизненного цикла appcache жизненным циклом ServiceWorker - PullRequest
Новая
       9

Как заменить событие жизненного цикла appcache жизненным циклом ServiceWorker

0 голосов
/ 08 апреля 2020

Я пытаюсь изменить appcache на serviceworker в моем приложении для автономной работы. Я удалил тег манифеста со страницы html и создал serviceworker. js для событий жизненного цикла. Но события appcache используются следующим образом: 

function framework(){
    this.appCache = window.applicationCache;
  //more other codes
}
  var fw = new framework();

Теперь события жизненного цикла проверяются следующим образом: 

if (fw.appCache) {
/* Checking for an update. Always the first event fired in the sequence.*/ fw.appCache.addEventListener('checking',    handleCacheEvent, false);
/* An update was found. The browser is fetching resources.*/               fw.appCache.addEventListener('downloading', handleCacheEvent, false);
/* Fired if the manifest file returns a 404 or 410.
   This results in the application cache being deleted. */                 fw.appCache.addEventListener('obsolete',    handleCacheEvent, false);
/* The manifest returns 404 or 410, the download failed,
   or the manifest changed while the download was in progress.*/           fw.appCache.addEventListener('error',       handleCacheError, false);
/* Fired for each resource listed in the manifest as it is being fetched.*/fw.appCache.addEventListener('progress',    handleProgressEvent, false);
/*Fired after the first cache of the manifest. */                          fw.appCache.addEventListener('cached',  function(event){handleCacheEvent(event);removeProcessing();$("#processingTextId").html("");}, false);
/* Fired after the first download of the manifest.*/                       fw.appCache.addEventListener('noupdate', function(event){handleCacheEvent(event);removeProcessing(); $("#processingTextId").html("");}, false);
/* Fired when the manifest resources have been newly redownloaded. */      fw.appCache.addEventListener('updateready', function(e) {if (fw.appCache.status == fw.appCache.UPDATEREADY) {alert('Successful'); try{fw.appCache.swapCache();window.location.reload();} catch(err){}}}, false);

} 

function handleCacheEvent(event) {$("#processingTextId").html(event.type);}
function handleProgressEvent(event) {$("#processingTextId").html("(" + event.loaded + " of "+ event.total +")");}
function handleCacheError(event) {$("#processingTextId").html("Cache failed to update!")

Итак, Мой вопрос заключается в том, как заменить эти события на служебные события. Мой сервисный работник зарегистрирован и правильно кэширует активы. Теперь я делаю так в индексе. html

Registartion 

<script type="text/javascript">
       if('serviceWorker' in navigator){
            navigator.serviceWorker.register('serviceworker.js')
            .then(registration =>{
                console.log('registration successful:',registration.scope);
            })
            .catch(err=>{
                console.log('registration failed:',err);
            });
    }


    </script>

Я создал отдельную рабочую станцию. js.

Как заменить эти события appcache на serviceworker?

1 Ответ

1 голос
/ 09 апреля 2020

Вы не получите автоматически ни одно из этих событий при использовании сервисного работника. Кроме того, модель, когда работник службы заполняет и обновляет кэш, является гораздо более «открытой», чем с помощью AppCache, поэтому преобразование кэширования работника службы в эквивалентные события AppCache не всегда возможно.

В целом, однако, Вот две вещи, которые могут помочь:

Читайте о Service Worker Lifecycle . Некоторые события, которые могут вас заинтересовать, могут быть аппроксимированы путем прослушивания эквивалентных изменений в жизненном цикле работника сервиса. Например, если вы предварительно кэшируете некоторые URL-адреса во время установки работника службы , то вновь зарегистрированный работник службы, выходящий из состояния installing, будет приблизительно эквивалентен тому, когда манифест AppCache завершит кэширование. Аналогичным образом, если вы обнаружите, когда происходит обновление ранее зарегистрированного работника службы (и это обновление связано с изменением в списке URL-адресов для предварительного кэширования), то это примерно соответствует обновлению манифеста AppCache.

Если ваш сервисный работник использует кэширование во время выполнения, когда URL-адреса добавляются в кэш внутри обработчика fetch, вы можете использовать следующую технику, чтобы сообщать страницам вашего клиента, когда новые элементы были кэшированы, используя postMessage() для связи.

Часть вашего работника службы JavaScript: 

const cacheAddAndNotify = async (cacheName, url) => {
  const cache = await caches.open(cacheName);
  await cache.add(url);
  const clients = await self.clients.matchAll();
  for (const client of clients) {
    client.postMessage({cacheName, url});
  }
};

self.addEventListener('fetch', (event) => {
  // Use cacheAddAndNotify() to add to your cache and notify all clients.
});

Часть веб-приложения JavaScript: 

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', (event) => {
    const {cacheName, url} = event.data;
    // cacheName and url represent the entry that was just cached.
  });
}

Опять же, специфика того, что вы слушаете и как вы реагируете на него, действительно будет зависеть от того, какие именно логики c есть у вашего работника службы. Не ожидайте, что между всеми событиями будет отображение 1: 1. Вместо этого используйте эту миграцию как возможность подумать о том, какие изменения, связанные с кэшем, вас действительно волнуют, и сосредоточиться на их прослушивании (через события жизненного цикла работника службы или postMessage() связь).

...