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

nsfw-filter Chrome拡張を導入する

ローカルの機械学習モデルを使って画像のフィルタをしてくれるとのこと

Copy URL+からCopy as Markdownに移行

ワンクリックでリンクをコピーできるのは便利

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

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

Chromeでフルサイズのスクリーンショットを撮る

コマンド機能を使えば拡張を入れなくてもスクリーンショットが撮れる

Google検索結果をダークモードに変える

Dark Readerを入れた

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

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