5

Workbox.injectManifest を使用してサービス ワーカーを生成しようとしていますが、サービス ワーカーからのプリキャッシュ マニフェストへのパスが正しく生成されないという問題があります。

私の Webpackoutput.pathは 'path.resolve('./scripts/app/dist')' で、ワークボックスの構成は次のとおりです。

new WorkboxPlugin.InjectManifest({
        swSrc: path.resolve("./scripts/app/src/service-worker.js"),
        swDest: "../../../sw.js",        
        globDirectory: path.resolve("./"),
        globPatterns: [
            "scripts/**/*.js",
            "fonts/**/*.{eot,ttf,woff,woff2,otf}",
            "images/**/*.{png,jpg,svg,gif,ico}",
            "styles/**/*.css"
        ]
    });

デフォルトでは、Workbox は output.path に sw.js を作成し、それを自分のサイトのルートに配置したいのです../../../sw.js が、プリキャッシュ マニフェストは output.path に残ります。これは./scripts/app/dist. 問題は、生成された sw.js のマニフェストを指すパスが次のようになっていることです。

importScripts("precache-manifest.472387a6bbb5e3e8f5e8392d628202d5.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

これは、サイトのルートにあり、見つからない sw.js の場所を示しています。それはバグですか、それとも私が正しく設定していないのですか? 「importsDirectory」を使用してみましたが、マニフェストを別の場所に移動するだけで、sw.js のパスはまだ間違っています。

アップデート

Service Worker テンプレートにこれがあります。

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute( .......

しかし、私がビルドすると、配列は読み込まれず、外部マニフェストが作成されます: これはプラグインが作成するものです:

importScripts("precache-manifest.aa4b439ba2589f9d3cf0c56e1b06323d.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute(
4

1 に答える 1