构建Service Worker

Service Worker可以协助你提供丰富的离线体验，reSKRipt同样支持简单地构建Service Worker。

如果你需要构建一个Service Worker，只需放置一个src/service-worker.js文件。

caution

当前仅支持.js后缀，不支持.ts等其它格式。

无需注册

该文件在构建后会生成dist/assets/service-worker-{target}.js，如dist/assets/service-worker-stable.js。通常你不需要做任何额外的工作，reSKRipt会自动帮你在HTML页面中生成一段注册该Service Worker的脚本，大致如下：

<script>
if ('serviceWorker' in navigator) {
    window.addEventListener(
        'load',
        function () {
            navigator.serviceWorker.register('/assets/service-worker-insiders.js');
        }
    );
}
</script>

对应的Service Worker脚本路径会自动根据构建环境生成，你不需要关心其中的细节。

自动注入资源缓存

我们推荐你在src/service-worker.js中放置以下内容：

// TODO: 修改版本到最新，用npm info workbox-cdn version可获取最新版本
const CDN_URL_BASE = 'https://code.bdstatic.com/npm/workbox-cdn@5.1.4/workbox';
importScripts(`${CDN_URL_BASE}/workbox-sw.js`);
workbox.setConfig({debug: false, modulePathPrefix: `${CDN_URL_BASE}/`});

const {precacheAndRoute} = workbox.precaching;
precacheAndRoute(self.__WB_MANIFEST);

注意上面代码中的precacheAndRoute(self.__WB_MANIFEST)部分，其中的self.__WB_MANIFEST会被替换为一系列构建产出的资源路径，因此你只需要上面的代码，就可以自动完成各个资源的预缓存，快速生成一个Service Worker的实现。