PWAでホーム画面に追加 Webサイトをアプリとしてインストール 千葉県の方へ

PWAをiPhoneで起動したときのスプラッシュ画面の画像

WebサイトをPWAでアプリ化

新しい技術でPWAというものがあります。プログレッシブウェブアプリの略称です。アプリをストアからインストールするのではなくWebサイトをそのままアプリ化させたような技術です。
PCREPAIRはPWAの技術を使いホームページとこのブログをAndroidとiPhoneの両方のスマートフォンにWebアプリとしてインストールできるようにさせて頂いております。
パソコンは普段使えている時は便利ですが、不具合を起こしたときはとても困ります。いざというときに備えてインストールして頂けると幸いです。

Androidの場合

インストール方法の説明をさせて頂きます。
Google Chromeでホームページまたはこのブログを開いて頂き、右上の設定からホーム画面に追加をタップして頂きます。

PWAのサイトをAndroidからホーム画面に追加する方法の説明画像

アプリを追加するか確認の画面がでますので決定でお願い致します。

PWAのWebサイトをAndroidからホーム画面に追加する方法の説明画像2

するとホーム画面にショートカットができるのではなくWebサイトがアプリとしてインストールされます。
Androidの設定からアプリ一覧を開くとPCREPAIRのWebサイトがアプリとしてインストールされているのが確認できます。

AndroidにPWAがアプリとして追加されている様子の画像

これでインストールは完了です。アプリを起動させるとふわっとスプラッシュ画面から起動してURLも表示されずにアプリのような見た目で表示されます。

PWAのAndroidのスプラッシュ画面の画像

PWAを起動したときの見た目の画像

iPhoneの場合

iPhoneの場合のインストール方法をご説明させて頂きます。Safariでホームページまたはこのブログを開いて頂き下の画像の真ん中のボタンをタップして頂きます。(iPhoneのSafariは3月29日より配信が開始されましたiOS11.3からPWAに対応しております。)

PWAをiPhoneにインストールする方法の説明画像

次にホーム画面に追加が表示されますので追加をお願い致します。

PWAをiPhoneにインストールする方法の説明画像

次の画面でも追加をお願い致します。

PWAをiPhoneにインストールする方法の説明画像3

これでWebアプリがiPhoneに追加されます。起動させると下のスプラッシュ画面からふわっと起動します。こちらは画面のデザインを自由に作れたので背景をグラデーションカラーにさせて頂きました。

PWAをiPhoneで起動したときのスプラッシュ画面の画像

iPhoneの場合もURLは表示されませんが、画面上部のステータスバーの色は黒になります。

パソコンの突然の不具合や使っていてどうしていいかわからなくなった時などのために備えておいて頂ければと思います。

宜しくお願い致します