Service Workerで任意のnpmパッケージをimportしたいのでwebpackを導入して実現した方法
やりたいこと
やりかた
以下が実際の変更箇所。
src/service-worker/sw.js
src/service-worker/webpack.config.js
以下が各ファイルの中身。
code:src/service-worker/sw.js
import ... from "..." // 好きにnpmのパッケージをインポートできる。
上記の実例だとimport {createReadableStreamWrapper} from '@mattiasbuelens/web-streams-adapter';をインポートしている。
以下はtarget: "webworker"になっている点に注目。
code:src/service-worker/webpack.config.js
const path = require('path');
module.exports = {
target: 'webworker',
output: {
filename: 'sw.js',
path: path.resolve(__dirname, 'dist')
},
};
code:package.json
"scripts": {
...
"build-sw": "webpack --config src/service-worker/webpack.config.js src/service-worker/sw.js",
...
}
Vue CLIを使っているのでnpm run buildのスクリプトは上記のbuild-swを使って"build": "npm run build-sw && vue-cli-service build"のようにビルドしている。 上記でbundleされた./src/service-worker/dist/sw.jsをvue.config.jsのswSrcに指定して最終結果を作り上げる。
code:vue.config.js
...
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: './src/service-worker/dist/sw.js',
swDest: 'service-worker.js',
importWorkboxFrom: 'local',
},
}
...
思い浮かぶ制限