![](/img/trans.png)
[英]Uncaught SyntaxError: Cannot use import statement outside a module Vue 3 PWA Workbox
[英]Workbox service worker: Cannot use import statement outside a module
我正在使用 Create React App 實用程序創建一個 React App,我想覆蓋它提供的默認服務工作線程。
因為我不想彈出我的應用程序,所以我使用workbox-build
包來創建我的服務工作者(我還使用 yarn 來安裝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
我究竟做錯了什么?
工人還沒有模塊支持。
importScripts()可以為您完成這項工作,但它不能導入模塊,這意味着任何內部帶有“export”關鍵字的東西。
https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.