デスクトップPWAを動かせるようにする。

公開日:2018-12-30
最終更新:2018-12-30
※この記事は外部サイト(https://qiita.com/_lemon2003_/items/a5cbc5...)からのクロス投稿です

tl;dr

  • 普通、スマートフォンのみで使える PWA をPCブラウザでも使えるようにする。
  • そのために、プログラムなど自体ではなく、ブラウザの設定を変更する。

検証に使用したブラウザ

  • Google Chrome: 70.0.3538.110 (Official Build) (64 ビット)
  • Google Chrome: 71.0.3578.62 (Official Build) beta (64 ビット)
  • Google Chrome: 72.0.3622.0 (Official Build) dev (64 ビット)
  • Google Chrome: 72.0.3624.0 (Official Build) canary (64 ビット)

やってみましょう。

Step 1.

アドレス欄に chrome://flags と入力。

WARNING: EXPERIMENTAL FEATURES AHEAD! By enabling these features, you could lose browser data or compromise your security or privacy. Enabled features apply to all users of this browser.

これらの機能を有効にすると、ブラウザのデータが失われたり、セキュリティやプライバシーを危険にさらす可能性が。 有効な機能は、このブラウザのすべてのユーザーに適用されます。

と、あるように、あまり変にいじくるとおかしくなってしまうことがあるようです。
自己責任で。(←←←丸投げすんな。)

Step 2.

Search Flags の欄に、 PWA と入力。
すると、いくつか設定が出てきます。

その中から、次のような設定を変更してください。

  • Desktop PWAs
  • Desktop PWAs Link Capturing
  • Desktop PWAs Custom Tab UI

また、 Search Flags の欄に、 App Banners と入力。
次の設定を変更してください。

  • App Banners

すべて終わったら、右下のRELAUNCH NOWをクリック!!
再起動して、設定が適用されます。


以上で設定終了です。
PWA対応のサイトを開いてみましょう。

A selection of Progressive Web Apps

Twitter (Mobile)

Twitter Mobile での表示結果


終わりに

今記事では、デスクトップPWAの利用のための設定を紹介しました。

webアプリケーションの開発がスムーズになるでしょうし、
デスクトップでもPWAの利用が大いに期待されます。

みなさんバンバン使っていきましょう!!!

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@lemon2003の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする