javascript - 如何处理 Service Worker 中的依赖关系？

Question

如果路径包含 __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);
        }
    }));
});

当我有一段时间没有与应用程序交互时，再次打开它然后尝试获取本地文件它一直在加载可能是因为无限循环，我需要手动重新加载服务 worker (使用开发工具)来获取页面。

所以我的问题是如何正确调用 importScripts 以在 Service Worker 中加载 BrowserFS？

Answer 1

我已经结束了这段代码，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。