PWAアプリにクイックショートカットを追加する

Chrome84からPWAアプリでクイックショートカットが利用できるようになったとのこと。

早速、以前作ったPWAアプリにショートカットを設定してみた。

チュートリアル記事を参考にmanifest.jsonにshortcutsを追加。

nuxt.jsで作ったWebアプリで、通常のフローではフォームの入力内容を登録していたが、ショートカットの場合はURLパラメータでデータを受け取れるように設定。

URLパラメータは↓のようにすれば取得できる。

this.$nuxt.$route.query.sampleParam

そして、nuxt.config.jsのpwa設定にshortcutsを追加。

export default 
  pwa: {
    manifest: {
      shortcuts: [
        {
          name: 'Record',
          short_name: 'Record',
          description: 'Record',
          url: '/save?sampleParam=1&utm_source=homescreen'
        }
      ]
    }
  }
}

これで画面を開いてデータ登録を行う必要があった登録機能が、ショートカット一発で登録できるようになって便利になった。

PWAがどんどんスマホアプリに近づいてきていて良い。

参考

• Nuxt.jsでURLからパラメーターを取得する - Qiita