[英]How to handle dependencies in Service Worker?
如果路徑包含__browserfs__
,我有Service Worker從BrowserFS加載文件,簡化代碼如下:
function loadDependecies() {
self.skipWaiting().then(function() {
if (!self.fs) {
self.importScripts('https://cdn.jsdelivr.net/npm/browserfs');
BrowserFS.configure({ fs: 'IndexedDB', options: {} }, function (err) {
if (err) {
console.log(err);
} else {
self.fs = BrowserFS.BFSRequire('fs');
self.path = BrowserFS.BFSRequire('path');
}
});
}
});
}
self.addEventListener('install', loadDependecies);
self.addEventListener('activate', loadDependecies);
self.addEventListener('fetch', function (event) {
event.respondWith(new Promise(function(resolve, reject) {
if (local) {
console.log('serving ' + path + ' from browserfs');
if (!self.fs) {
(function loop() {
if (!self.fs) {
setTimeout(loop, 400);
} else {
serve();
}
})();
} else {
serve();
}
} else {
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
return;
}
//request = credentials: 'include'
fetch(event.request).then(resolve).catch(reject);
}
}));
});
當我暫時不與應用程序交互時,再次打開它然后嘗試獲取本地文件可能因為無限循環而繼續加載,我需要手動重新加載服務工作者(使用開發工具) )獲取頁面。
所以我的問題是如何正確調用importScripts
來加載Service Worker中的BrowserFS?
我最終得到了這個代碼, let
不添加到全局范圍,所以它應該是安全的:
self.importScripts('https://cdn.jsdelivr.net/npm/browserfs');
let path = BrowserFS.BFSRequire('path');
let fs = new Promise(function(resolve, reject) {
BrowserFS.configure({ fs: 'IndexedDB', options: {} }, function (err) {
if (err) {
reject(err);
} else {
resolve(BrowserFS.BFSRequire('fs'));
}
});
});
self.addEventListener('install', self.skipWaiting);
self.addEventListener('activate', self.skipWaiting);
self.addEventListener('fetch', function (event) {
event.respondWith(fs.then(function(fs) {
return new Promise(function(resolve, reject) {
var url = event.request.url;
var m = url.match(/__browserfs__(.*)/);
if (m) {
var path = m[1];
if (path === '') {
return redirect_dir();
}
console.log('serving ' + path + ' from browserfs');
serve();
} else {
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
return;
}
//request = credentials: 'include'
fetch(event.request).then(resolve).catch(reject);
}
});
}));
});
編輯似乎這個代碼也是錯的所以我用這個:
self.addEventListener('fetch', function (event) {
let path = BrowserFS.BFSRequire('path');
let fs = new Promise(function(resolve, reject) {
BrowserFS.configure({ fs: 'IndexedDB', options: {} }, function (err) {
if (err) {
reject(err);
} else {
resolve(BrowserFS.BFSRequire('fs'));
}
});
});
...
});
會看看這是否有效。 可能需要在fetch中使用importScripts。
您可能希望靜態構建此文件,包括BrowserFS
,以獲得更穩定的執行時間。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.