TypeScript和Service Worker

创建 更新

在Service Worker中使用TypeScript还蛮麻烦的，因为Service Worker的类型属于内建类型库WebWorker下，默认情况下WebWorker的self是WorkerGlobalScope & typeof globalThis。但是Service Worker的self确实提供了一些Worker没有的服务，比如install事件，用WorkerGlobalScope确实不够。

1
2
3
4
5
{
    "compilerOptions": {
        "lib": ["ESNext", "WebWorker"]
    }
}

所以实际上，WebWorker也提供了ServiceWorkerGlobalScope……这个设计让人感觉自然又诡异。ServiceWorker确实是Worker的一种，但是：因为默认情况下你不能用不同类型覆盖值的类型（但是可以合并！这个不是本章重点，TS就是这么神奇），按照直觉的：

1
declare let self: ServiceWorkerGlobalScope & typeof globalThis;

很有可能会被报错：不能用不同类型覆盖值的类型声明。当然，这是一个很有必要的安全措施，否则类型就会随着声明的顺序变化。用// @ts-ignore可以隐藏这个错误，但是在代码联想中它仍然是WorkerGlobalScope & typeof globalThis，这不是我想要的。

在TypeScript项目相关的Issue中很多人提到了一种绕过的方法：类型强转加上重命名。

1
const sw = self as unknown as (ServiceWorkerGlobalScope & typeof globalThis);

然后使用sw来做Service Worker专门的工作。这个workaround非常简单有效，但是我觉得它有点不够漂亮。首先是类型强转有风险，其次是我们明明有self，却要用sw，像是这串代码不是在Service Worker中工作的一样。那么，我们可以直接用一个局部新self覆盖掉全局self吗？

1
2
const self: ServiceWorkerGlobalScope & typeof globalThis = self;
let self: ServiceWorkerGlobalScope & typeof globalThis = self;

上面的代码都不可以用。因为JavaScript的词法作用域在同一个作用域内是没有shadowing的，所以你只能得到一个“块级变量不能在声明之前引用“，包括这种：

1
2
const self0 = self;
const self: ServiceWorkerGlobalScope & typeof globalThis = self0;

也属于这种错误。

那我们可以用一个函数把self抓住吗？

1
2
const captureSelf = () => self;
const self: ServiceWorkerGlobalScope & typeof globalThis = captureSelf();

大成功！可以通过语法和类型检查。但是workbox构建时会出错：

1
2
3
Error: Unable to find a place to inject the manifest.
This is likely because swSrc and swDest are configured to the same file.
Please ensure that your swSrc file contains the following: self.__WB_MANIFEST

静态分析中一般会把函数当作受副作用影响的部分，它们的返回值不会被看作是不变的。可能就是因为这样workbox-build就不再认识我们的self了。

那词法作用域不行，函数作用域呢？这样写并不会有语法错误：

1
var self: ServiceWorkerGlobalScope & typeof globalThis = self;

但这样做只会得到undefined。你可以尝试在浏览器的开发者工具执行下面的代码：

1
2
3
4
(function () {
    var window = window;
    console.log(window);
})()

因为在var window的时候这个变量已经在函数作用域中被声明了，所以当你window = window时就是window = undefined。

在那个相关的Issue中，有人把self转换类型传入一个单独的函数。这样做也不错，可以保留自己的self，不过还是要多一层栈，而且要调用函数，跟类型强转也没有太大区别。

如果可以调用函数……我们将会有is语法可以用：

1
2
3
function isServiceWorker(self: WorkerGlobalScope): self is ServiceWorkerGlobalScope {
    return true;
}

然后将Service Worker专属的操作放进 if (isServiceWorker(self)) { ... }，一切正常！而且这个方法可以让我们分别做Service Worker和Worker的兼容。不过我们仍然要调用一个函数，而且会多一个branching，好在Service Worker的顶层代码不常执行，所以这个代价也能接受。

当然，其实类型强转到另一个变量的做法也可以，而且不需要branching的开销。虽然这样说，但其实影响都不大，主要还是看你比较喜欢哪个。

如果你对我如何处理Service Worker感兴趣的话，可以看看图图的相关代码。图图是一个在Web技术上构建的Mastodon客户端，如果你能试用并给我一些反馈的话就更好啦！