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に移行

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

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

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

chromeでアドレスバーに翻訳ボタンが表示されなくなった

chrome://translate-internals/#prefsの設定を変更する

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

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

RaspberryPi上でPuppeteerを動かす

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