Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-08-16

概要

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

手順

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

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

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

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

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イベントでホーム画面追加ボタンの発火を制御し、ページ内に別のボタンを設置すればデスクトップからのアクセスを増やすこともできそうですね。(→こちらの記事に書きました。)

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

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?