Workbox服务工作人员:无法在模块外使用导入语句

Question

我正在使用实用程序创建一个React，并且我希望覆盖它提供的默认服务工作人员。

由于我不想弹出我的应用程序，所以我使用workbox-build包来创建我的服务工作人员(我还使用纱线来安装workbox-sw包)。

我的服务工作人员代码如下：

/* eslint-disable no-restricted-globals */
import * as core from 'workbox-core';
import * as routing from 'workbox-routing';
import * as strategies from 'workbox-strategies';
import * as precaching from 'workbox-precaching';

self.addEventListener('message', event => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

core.clientsClaim();

routing.registerRoute(
  new RegExp('^https://fonts.googleapis.com'),
  new strategies.StaleWhileRevalidate({
    cacheName: 'google-fonts-stylesheets-v1',
  })
);

precaching.precacheAndRoute([]);

routing.registerNavigationRoute(
  precaching.getCacheKeyForURL('/index.html'), {
    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
  }
);

我的workbox-build脚本是：

const workboxBuild = require('workbox-build');

// NOTE: This should be run *AFTER* all your assets are built
const buildSW = () => {
  // This will return a Promise
  return workboxBuild.injectManifest({
    swSrc: 'src/service-worker.js',
    swDest: 'build/service-worker.js',
    globDirectory: 'build',
    globPatterns: [
      '**\/*.{js,css,html,png,json}',
    ]
  }).then(({
    count,
    size,
    warnings
  }) => {
    // Optionally, log any warnings and details.
    warnings.forEach(console.warn);
    console.log(`${count} files will be precached, totaling ${size} bytes.`);
  });
}

buildSW();

对于注册我正在使用的服务人员：

import { Workbox } from 'workbox-window';

export function register() {
  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/service-worker.js');
    wb.register();
  }
}

然而，当我运行我的应用程序时，我会得到以下错误：

service-worker.js:2 Uncaught SyntaxError: Cannot use import statement outside a module
:3000/107/aggregator:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/service-worker.js'): ServiceWorker script evaluation failed

我做错了什么？

Answer 1

当前答案

根据Mozilla的文件的说法，它现在应该可以工作了，但是要注意每个浏览器中最新的执行情况。火狐和Opera仍然落后。

原答案自2020年起

工人中还没有模块支持。

importScripts()可以为您完成这一工作，但它不能导入模块，这意味着内部有一个“导出”关键字。

https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts

Answer 2

fips的答复帮助我走上了正轨。

我没有使用一个绑定器/编译器，这似乎是一个追求的途径。

然而，对于任何其他人来说，这可能会有帮助：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.3/workbox-sw.js');

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

很适合那些试图从Google文档中解决一些例子的人。

或者更特定于您的代码，所有这些模块都可以作为workbox对象上的属性访问。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.3/workbox-sw.js');

self.addEventListener('message', event => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

workbox.core.clientsClaim();

workbox.routing.registerRoute(/* your params here */);

workbox.precaching.precacheAndRoute(/* your params here */);

// presuming OP function is deprecated in current version and changed
// to 'registerRoute', but may actually be 'NavigationRoute' check
// current documentation for more clarity.
workbox.routing.registerRoute(/* your params here */);