PWA（プログレッシブウェブアプリ）を知ってますか？
大雑把に書くと、アプリとしてインストールできるウェブサイトのことです。
デスクトップ（ホーム画面）にアイコンが配置されるのでアプリのように呼び出せる他、読み込み時間が短縮、プッシュ通知が受け取れる（環境による）などのメリットがあります。
たとえば、YouTube Music https://music.youtube.com/
YouTubeの音楽ストリーミングサービスですね。
普通にアクセスするとこんな感じの表示がされます。
これをPWAとしてインストールすると、以下のような表示に切り替わります。
わかりますか？
タブの表示などブラウザ固有のUIがなくなり、普通のアプリのような表示になってるのがわかりますよね。
できることは一緒なのですが、画面として独立してるので再生したまま最小化するような時に便利です。
インストールはChromeやEdge、iOSのSafariなどから行えます。
残念ながら、なんでも登録できるわけではなくPWAに対応したサイトのみが登録可能です。
というわけで、今回はPWAのインストール方法や対応サイトを紹介します。
- ウェブサイトをインストールし、アプリ風に使えるのがPWAです
- アプリと同じようにデスクトップ/ホームにアイコンが表示されるようになります
- PWA対応してるサイトだけがインストールできます
パソコンでの使い方
インストール方法
Macでの例です。Windowsもほぼ一緒です。
対応しているサイトに、EdgeやChromeでアクセスすると、アドレスバーの端にインストール（+）のアイコンが表示されます。
インストールボタンを押すだけです。
インストールしたアプリを起動したい時は、他のアプリと同じようにメニューから呼び出します。
とっても簡単です。
アンインストール方法
アイコンを削除しただけではPWAの削除は行われません。
起動中のウィンドウ右上のメニューアイコンからアンインストールします。
メニューにある『「ｘｘｘｘｘ」をアンインストール』を選択するだけです。
こちらも簡単ですねー。
スマホでの使い方(Androidでの例)
インストール方法
こちらも対応サイトにアクセスし、メニューから「ホーム画面に追加」を選ぶだけです。
あとは、表示される案内にしたがって操作するだけです。
一部のサイトでは下画面のようにインストールを促す表示がされる場合もあるようです。
インストールしたアプリはストアからインストールしたアプリ同様、ホーム画面のアイコンから起動が可能です。
以下は起動したアプリの画面です。
Chromeのメニューが表示されなくなりすっきりした印象となります。
スプラッシュ（タイトル画面）も表示されるので一見すると普通のアプリとの差はわからないと思います。
アンインストール方法
ストアからインストールしたアプリと同様の操作でアンインストールが可能です。
続いて、対応サイトの紹介です。
まとめサイトもあるのですが、個人的にはあまり使い勝手が良くなかったので独自に調査し、まとめてみました。
今回はパソコンからアクセスして探しています。
パソコンかスマートフォンかで対応状況変わると思いますので参考程度に見てもらえたらと思います。
GoogleのPWA対応サービス
最初はGoogleのサービスから。
さすがPWAを推進しているだけあって、Googleの提供サービスでもいくつかPWA対応しているものがあります。
ただ、Gmailは対応してないみたいです。対応してても良さそうなのですが。残念。
Google Maps
パソコンでインストールした場合はタブレット表示時のUIになるみたいです。
普通にブラウザで見るより画面がすっきりします。
Google Photo
画像用のオンラインストレージです。
ウェブ版がアプリ風になるだけなので同期などは行えません。
Google Drive
スプレッドシートなどを開こうとすると結局ブラウザが表示されるため、メリットはそこまでないように思います。
YouTube Music
YouTubeによる音楽のストリーミングサービス。
Google関連のサービスの中では一番PWAとしてインストールする価値が高いように感じました。
Microsoftのサービス
Microsoftのサービスで２サービス対応サイトを見つけました。
どちらもなかなか便利な印象です。
Office
Excel、Word、PowerPointなどが１ウィンドウ内で動作します。
ウェブ用の簡易版なので、パソコンのアプリ版に比べると見劣りしますかね。
OneDrive、OneNoteは非対応のため、アイコンをクリックするとブラウザで該当ページが開かれます。
Outlook
メールサービス。
ログインしてる状態でインストールを行うだけなので、メールアプリに設定するより圧倒的に簡単に扱えるのはGood。Gmailも対応しやがれ
１通ごとに別ウィンドウで表示することもできますが、表示はややもっさり気味です。
その他おすすめPWA対応サイト
いくつかPWA対応してるのを確認したサイトを紹介です。
一部は紹介サイトで見つけた情報で自分で試していないものもあります。
説明は不要ですね。
もともと洗練されたUIなのでインストールするとアプリにしか見えません。
メルカリ
ご存知フリマアプリです。
ちなみに、同系のサービスのラクマやpaypayフリマは非対応の模様です。
Spotify
音楽のストリーミングサービス。
対応してる、らしいです。自分は使っていません。
写真共有ウェブサイトです。
なんと、Pinterestに関しては「Chrome版Pinterestアプリをご利用ください」とダウンロードボタンが表示される親切設計です。
Rettyグルメニュース
そこまでメリットがあるかわからなかったけど、よく使う人には便利かも。
Yahoo!（スマホのみ）
Yahoo!は古臭いUIのようでこういうところがんばってます。
Instagram（スマホのみ）
エミュレーション機能でパソコンにもインストールできるけど、投稿はできないので微妙です。
Qiita
プログラマ向けの技術共有サイト。
他のPWA対応サイトを探したい方へ「Favorite PWA」
PWAのまとめサイトです。
他のPWA対応サイトもチェックした場合にみてみてはどうでしょうか。
ここでは紹介してない、便利ツールやゲームなどのPWAサイトも紹介されています。
まだまだ発展途中
2020年9月現在、PWAサイトはまだまだ少ないようですが、インストールの敷居が利用者・開発者ともに本格的なアプリよりも低いので今後広がっていきそうな仕組みです。楽しみですね。
オススメのPWAサイトがあれば連絡いただけると嬉しいです。
コメント