web - ホーム画面に Vue.js PWA を追加できない

Question

私は最近、プログレッシブ Web アプリケーションに飛び込んでいます。manifest.json と sw.js を次のようにリンクしました。

index.html で

<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">

そして私のmain.jsで

if('serviceWorker' in navigator) {
        const messaging = firebase.messaging()

        navigator.serviceWorker.register('/static/sw.js').then((registration) => {
            messaging.useServiceWorker(registration)
            console.log('Service Worker registered')
        }).catch((error) => {
            console.log('Service Worker failed to register')
        })
    }

動作しているように見えますが、DevTools を使用して webapp をホーム画面に追加しようとすると、次のエラーが表示されます:「サイトをインストールできません: 一致する Service Worker が検出されませんでした。現在のページの Service Worker も、マニフェストから開始 URL を制御します"

いくつかの調査を行った後、sw.js と manifest.json をプロジェクトのルートに配置すると言う人がいることがわかりました。しかし、そうすると、ファイルはリンクされません（静的フォルダーに配置すると、リンクされます）。ちなみに、私は標準の Vue.js テンプレートを使用しています。

これを修正する方法はありますか？