PWAの「ホーム画面に追加する」をAndroid Chromeでデバッグする

目的

PWAの機能であるホーム画面に追加（A2Hs）を実機（Android Chrome）で確認したい。

環境

Nuxt.js。
Create Nuxt Appでプロジェクトを作成する際に、@nuxtjs/pwaをインストール。

workboxがdev環境でも動くようにするため、nuxt.config.jsに設定を追加。

nuxt.config.js

export default {
  //省略
  workbox: {
    dev: true
  },
  //省略

npm run buildしてnpm run startする。
http://localhost:3000へアクセスしページが表示されることを確認。

検証手順

• Chrome DevToolsを開く。
• Remote devicesパネルを開く。表示されていなければメニューからMore tools -> Remote devicesで開く。
• Settings項目でDiscover USB devicesにチェック。
• Settings項目でPort forwardingにチェック。今回は実機（Android Chrome）でlocalhost:3000にアクセスしたいため、3000、localhost:3000とそれぞれ入力する。
• 実機でChromeを開いてlocalhost:3000にアクセスする。
• ホーム画面に追加するバナーが画面下部に表示される。
• バナークリックで画面中央にプロンプトが表示される。
• 追加をクリックでホーム画面にアイコンが表示される。