Chrome76アップデート PWAのデスクトップ版インストールについて

8518 ワード
Chrome PWA Chrome テキストリンク

概要

Googleが7月30日（現地時間）、「Chrome 76」をリリースした模様です。
表題通りPWAのデスクトップインストールについて、どのような挙動になったかご紹介します。

手順

  1. アドレスバーに+ボタンが表示されるようになった

  2. そこをクリックすると「アプリをインストールしますか？」という表示

  3. デスクトップのアイコンに追加される

  4. クリックして起ち上げるとPCページが表示されました。

manifest.jsonのstart_urlのパラメーターは維持される

manifest.jsonにはspページのURLに解析用のパラメーターをつけたものを設定していました。
開いたページはPCのURLにパラメーターがついているものだったので、SPからPCページにリダイレクトされ、かつパラメーターを維持していることがわかりました。
また、サービスワーカーも引き継がれています。

manifest.json
{
  "name": "H.I.S.",
  "short_name": "H.I.S.",
  "theme_color": "#004098",
  "background_color": "#004098",
  "display": "minimal-ui",
  "scope": "/",
  "start_url": "kanto_sp.html?debug=pwa&cid=top_homescreen&utm_source=top_homescreen&utm_medium=homescreen&utm_campaign=top_homescreen",
  "icons": [
    {
      "src": "/cmn/icon/pwa/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/cmn/icon/pwa/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

展望

  • アドレスバーの+ボタンは見つけにくい！
    • beforeinstallpromptイベントでホーム画面追加ボタンの発火を制御し、ページ内に別のボタンを設置すればデスクトップからのアクセスを増やすこともできそうですね。（→こちらの記事に書きました。）

ありがとうございました。

参考