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

【问题标题】：How to handle dependencies in Service Worker?如何处理 Service Worker 中的依赖关系？
【发布时间】：2018-12-02 21:42:04
【问题描述】：

如果路径包含__browserfs__，我有从 BrowserFS 加载文件的 Service Worker，简化代码如下：

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？

【问题讨论】：

你想通过在函数内部调用importScripts来实现什么？为什么不马上加载呢？
@smnbbrv 因为我需要在两个事件中调用它，如果我在外部调用它，它将被删除，我读过你不应该依赖服务工作者中的全局上下文，我可以确认添加到 self 的值在 service worker 生命周期中被删除。

标签： javascript dependencies service-worker

【解决方案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);
            }
        });
    }));
});

EDIT 看来这段代码也是错误的所以我用这个：

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。

【讨论】：

【解决方案2】：

您可能希望将包含BrowserFS 的文件静态构建到其中以获得更稳定的执行时间。

【讨论】：