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

，当我有一段时间没有与应用程序交互时，请再次打开它，然后尝试获取本地文件。由于无限循环而一直在加载，我需要手动重新加载服务工作程序（使用开发工具）来获取页面。

所以我的问题是如何正确调用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'));
            }
        });
    });
    ...
});

将查看是否可行。可能需要在提取中使用importScripts。

Answer 2

您可能希望将包含BrowserFS的文件静态构建到其中，以提高执行时间。

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

2 个答案: