Nuxt.jsのPWAでアプリのURLにサブディレクトリを含んでいる場合の注意点

Nuxt.jsでPWAとして開発したアプリを pages/app/index.vue に配置し、それをビルドして https://example.com/app/ というURLで公開したとします。
（実例→ https://dispbarcode.com/app/ ）

そのとき、ブラウザからは正常に表示されますが、「ホーム画面に追加」をしてPWAとして立ち上げようとすると、設定によってはエラーになります。

理由

manifest.json の start_url がルート/を指しているままだから。

対処

manifest.json を手書きしている場合は、直接 "start_url": "/app/" と書けばOK。

しかし、Nuxt.jsを使っているなら nuxt.config.js での設定が必要。
manifest: ブロックの中に start_url: '/app/' と scope: '/app/'を追加しましょう。

私の場合、そもそもmanifest: ブロックが存在しなかったので、丸ごと書き加えました。

以下、弊サイト（dispbarcode）での実例です。

  manifest: {
    name: 'dispbarcode',
    lang: 'en',
    short_name: 'dispbarcode',
    title: 'dispbarcode',
    'og:title': 'dispbarcode',
    'og:description': 'This app displays a barcode on smartphones. スマホ画面にバーコードを表示できるアプリです。',
    description: 'It is an application that displays a barcode. スマホ画面にバーコードを表示できるアプリです。',
    theme_color: '#ffffff',
    start_url: '/app/',
    background_color: '#ffffff',
    scope: '/app/'
  },

短いですが、以上です。