VueプロジェクトにPWAを導入する手順

vue に @vue/pwa を追加

'register-service-worker' から {register} をインポートします。

process.env.NODE_ENV === 'production'の場合{
  登録(`${process.env.BASE_URL}service-worker.js`、{
    準備ができて （） {
      コンソール.log(
        'アプリはサービスワーカーによってキャッシュから提供されています。\n' +
        詳細については、https://goo.gl/AFskqB をご覧ください。
      ）
    },
    登録済み （） {
      console.log('サービスワーカーが登録されました。')
    },
    キャッシュされた（）{
      console.log('コンテンツはオフラインで使用するためにキャッシュされました。')
    },
    アップデートファウンド() {
      console.log('新しいコンテンツをダウンロードしています。')
    },
    更新されました（）{
      console.log('新しいコンテンツが利用可能です。更新してください。')
    },
    オフライン（）{
      console.log('インターネット接続が見つかりません。アプリはオフラインモードで実行されています。')
    },
    エラー（エラー）{
      console.error('サービスワーカー登録中にエラーが発生しました:', error)
    }
  })
}

モジュール.エクスポート = {
  質問:
    ワークボックスオプション: {
      スキップ待機: true、
      クライアントの主張: true、
      importWorkboxFrom: 'ローカル',
      インポートディレクトリ: 'js',
      ナビゲートフォールバック: '/',
      ナビゲートフォールバックブラックリスト: [/\/api\//]
    }
  }
}

{
  "short_name": "アプリケーションの短縮名", // 将来モバイルデスクトップアプリケーションアイコンの下に表示されます "name": "アプリケーションのフルネーム", // 将来コンピュータデスクトップアプリケーションアイコンの下に表示されます "icon": [
      {
          "src": "./img/icons/android-chrome-192x192.png",
          "サイズ": "192x192",
          "タイプ": "image/png"
      },
      {
          "src": "./img/icons/android-chrome-512x512.png",
          "サイズ": "512x512",
          "タイプ": "image/png"
      }
  ], // デスクトップアイコン、配列、画像のサイズと形式に注意してください "start_url": "index.html", // アプリケーション起動時の URL
  "ディスプレイ": "スタンドアロン",
  "背景色": "#080403",
  "テーマカラー": "#080403"
}

<meta name="テーマカラー" content="#080403">
<link rel="manifest" href="manifest.json" rel="外部 nofollow" >