以前にもブログ記事にしたのですが、自分自身が使って、とてもタイパが良いので、改めてPWAのやり方について説明しておこうかと思います。
ちなみに、これはブラウザがchromeの場合のやり方です。他のブラウザの場合、出来るのか自分自身はわからないので、サイトのPWA(アプリ化)をやりたい方は、chromeブラウザでやって戴いた方が良いかと思います。
こんなブックマーク地獄に陥っていませんか?
・あのサイト、どのフォルダーに入れたっけ?と探している間に数分経過。
・PCとスマホで同期はしているが、モバイルで見ると階層が深すぎて辿り着くのに時間がかかる。
・ブラウザのタブを開きすぎて、どれが見たいサイトなのかわからなくなる。
自分も、ブックマークを付けたモノの、どのカテゴリーのファイルに入っているのかわからない事が多かったです。で、ここで思いついたのが、サイトのPWA化(アプリ化)です。
実は思っているほど難しい事はありません。
ではそのメリットを紹介しましょう。
PWA化すると何が変わるのか?
・”探す”から”叩く”へ:ホーム画面やタスクバーにアイコンが出るので、一発起動。
・画面が広く使える:ブラウザの余計なバーが消えて、画面をフルに活用できる。
・低スペック機の味方:重い専用アプリを入れず、ブラウザの仕組みだけで動くから、低スペック機でもサクサク動きます。
デバイス別・アプリ化の解説
・Windows(PC)の場合
手順:
- ブラウザで対象のWebサイトを開きます。
- アドレスバー(URLが表示されているところ)の右端に表示される 「アプリとしてインストール」アイコン(ノートPCに下矢印がついたようなマーク)をクリックします。
- 確認ダイアログが出るので 「インストール」 を選択します。インストール後はデスクトップやスタートメニューにアイコンが追加されます。
・Androidの場合
AndroidはPWAとの親和性が高く、ブラウザ側からインストールを促すバナーが表示されることも多いです。
- 手順:
- Google Chrome で対象のサイトを開きます。
- (バナーが出ない場合)画面右上の 「︙(三点リーダー)」 をタップします。
- メニューの中から 「アプリをインストール」(または「ホーム画面に追加」)をタップします。
- 「インストール」 をタップして完了です。Androidでは「WebAPK」という仕組みにより、設定画面の「アプリ一覧」にも表示されるなど、よりネイティブアプリに近い挙動になります。
・IOS/iPadOSの場合
手順:
- ブラウザで対象のサイトを開きます。
- 画面下部(または上部)にある 「共有ボタン」(四角から上矢印が出ているアイコン)をタップします。
- メニューを下にスクロールし、 「ホーム画面に追加」 を選択します。
- 右上の 「追加」 をタップします。
この中で劇的な操作性の向上が図れるのがAndroidです。その内容を下記に書いてみます。
1.戻るボタンとの親和性
ブラウザでタブを開いていると、戻るを押した時に前のページに飛ばされたり、タブ一覧に戻ったりしてイライラする事がありませんか?これPWAなら”独立したアプリ”として動くので、Androidのシステム的な戻るの操作がアプリだけで完結するので、操作ミスが激減します。
2.タスク切り替え(履歴ボタン)の快適さ
ブラウザの数あるタブの中からブログ管理画面を探すのは苦行ですが、PWA化していれば□ボタン(タスク履歴)を押した時にそのサイトが単独のカードとして出現します。他のアプリと行き来するスピードが段ちです。
3.ホーム画面の一番良い場所における
ブックマークだと「chromeを開く→フォルダーを探す→タップ」と言う3工程をしなければなりませんが、PWAならホーム画面の好きな場所に置くだけで、簡単にアクセス出来ます。これはタイパが良いですよね。
最後にブックマークは『辞書を引く』作業。PWAは『机に道具を出しっぱなしにする』感覚に似てると思います。
コストも全くかからないので、今日あたりお気に入りのサイトをPWA化してみませんか?
参考までに、この前、25H2に対応させたsurface go2の画面載せておきます。



