Question

我正尝试通过使用网络工作者来对我们的网络应用进行一些性能改进。我需要包括一些我使用importScripts（）的脚本。但难题是，尝试脱机访问时importScripts失败。如何使用Cache API脱机访问这些文件？我是否需要实现自定义阅读器才能阅读ReadableStream？是否有更好的标准在Web Worker中实现脱机缓存访问？

详细信息

这些文件是javascript脚本，具有一些自定义js和外部库，例如CryptoJS和LocalForage。我想实现-使用CacheAPI / Service Workers的网络回退到Cache范例。

最初，我使用安装和获取事件侦听器实现了标准Service Worker，但我认为Service Worker和Web Worker之间的范围并不相同。经过对MDN的研究和探索之后，我发现Cache API在WebWorkerScope中可用，因此我在Web worker范围内移动了缓存调用。

我尝试了各种不同的方式，这些方式是通过使用访存事件来访问这些文件，而只是从缓存中获取文件。在我的诺言解决之后，我得到了一个响应，但是响应的主体是可读的流，我不确定如何解决。

任何帮助或指针将不胜感激。

我的网络工作者调用

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. 
        })
    })
})

在诺言解决后做出回应。

Answer 1

Web workers没有fetch事件，因此侦听fetch事件的代码将永远不会触发。您应该将缓存和fetch event侦听器放在service worker中。

主要代码：

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');

您可以看到this answer，以了解有关Web工作人员和服务工作人员之间差异的更多信息。

如何在Webworker中离线访问脚本？

1 个答案: