Как получить доступ к сценариям в автономном режиме в веб-работнике? - PullRequest
Новая
       55

Как получить доступ к сценариям в автономном режиме в веб-работнике?

0 голосов
/ 26 марта 2019

Я пытаюсь улучшить производительность нашего веб-приложения с помощью веб-работников. Мне нужно включить некоторые сценарии, которые я использовал importScripts (). Но загадка заключается в том, что importScripts терпит неудачу при попытке доступа в автономном режиме. Как получить доступ к этим файлам в автономном режиме с помощью Cache API? Нужно ли реализовывать пользовательский ридер для чтения ReadableStream? Есть ли лучший стандарт для реализации автономного доступа к кешу внутри веб-работников?

Детали

Эти файлы представляют собой сценарии javascript, которые имеют некоторые пользовательские js и внешние библиотеки, такие как CryptoJS и LocalForage. Я хотел бы реализовать - Сеть возвращается к парадигме Cache с использованием CacheAPI / Service Workers.

Первоначально я внедрил стандартного Service Worker с прослушивателями событий установки и извлечения, но я считаю, что область между работником службы и веб-работником была неодинаковой. После некоторого исследования MDN и исследования я вижу, что Cache API доступен в WebWorkerScope, поэтому я переместил вызов кэша в область действия веб-работника.

Я пробовал различные способы доступа к этим файлам, используя события извлечения и просто получая файлы из кэша. Я получаю ответ после того, как мои обещания разрешены, но тело ответа является читаемым потоком, и я не уверен, как решить это.

Любая помощь или указатели будут очень признательны.

Мой вызов веб-работника 

var worker = new Worker('Path');

Я пытался следовать описанию в качестве руководства - https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

// Web Worker
self.addEventListener('fetch', function(event){
    event.respondWith(
        fetch(event.request).catch(function(){
            return caches.match(event.request);
        })
    )
});

caches.open('mcaseworker').then(function(cache){
    var urlList = ['/resources/scripts/custom/globalConfig.js',
                    '/resources/scripts/localforage/localforage.min.js'
                    '/resources/scripts/utility/pako.js',
                    '/resources/scripts/cryptojs/aes.js',
                    '/resources/scripts/cryptojs/sha1.js'
                ];
    // Initialize a promise all with the list of urls
    Promise.all(urlList.map(function(url){
        return fetch(url, {
            headers : {
                'Content-Type' : 'application/x-javascript'
            }
        })
        .then(function(response){
            if (response){
                return response;
            }
        });
    }))
    .then(function(values){
        Promise.all(values.map(function(value){
            return value;
        }))
        .then(function(res){
            // Custom Code
            // Would like to access localforage and other javascript libraries. 
        })
    })
})

Ответ после разрешения обещаний. enter image description here

1 Ответ

0 голосов
/ 27 марта 2019

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

Основной код: 

if ('serviceWorker' in navigator) {
  // Register a service worker hosted at the root of the
  // site using the default scope.
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service worker registration succeeded:', registration);
  }, /*catch*/ function(error) {
    console.log('Service worker registration failed:', error);
  });
} else {
  console.log('Service workers are not supported.');
}


const worker = new Worker("/worker.js");

sw.js 

self.addEventListener('fetch', function(event){
    event.respondWith(
        fetch(event.request).catch(function(){
            return caches.match(event.request);
        })
    )
});

//Add cache opening code here

worker.js 

// Import scripts here
importScripts('/resources/scripts/localforage/localforage.min.js');

Вы можете посмотреть этот ответ для получения дополнительной информации о разнице между веб-работниками и работниками сферы обслуживания.

...