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がどんどんスマホアプリに近づいてきていて良い。

参考


Related #chrome

Googleアナリティクス オプトアウト アドオンで特定のサイトのみGAを無効化する

Chrome拡張の設定画面で指定のURLのみ拡張を有効にする

The Great Suspenderの待機画面をダークモードに変更する

オプションで変更できた

RaspberryPi上でPuppeteerを動かす

Dockerを使うとすんなり動かせる

cssでダークモードに対応する

@media (prefers-color-scheme: dark) を使う

Android Chromeで開発者ツールを使う

開発者モードを有効にする