本日、MonacaにPWAビルド機能がベータ版として搭載されました。

アシアル、アプリ開発プラットフォーム「Monaca」でPWA開発機能をベータ提供開始 – プレスリリース

PWAは、ネイティブアプリのようなユーザー体験を実現するWebアプリを構築するための概念・技術の総称です。PWAによりユーザーはアプリストアを介さずにWebサイトからアプリアイコンをホーム画面に設置したり、オフラインでコンテンツの閲覧ができたり、プッシュ通知を受けたりすることが可能になり、サイトへのエンゲージメントの強化につながることが期待されます。

PWAの詳細はこちらの記事も参考になりますので、合わせてご覧ください。

現状、iOSではまだPWAサポートが追いついていませんが、今のうちからPWA化の準備を検討してみても良いのではないでしょうか。実は、すでにいくつかのサービスではPWA対応が始まっています。今回はそんな中から、代表的な事例をピックアップして紹介します。

Google Chrome for Androidで見ると分かりやすい

PWAに対応しているかどうかはGoogle ChromeでWebサイトを訪問すると分かります。画面下に「ホーム画面に追加:Add to Home Screen(A2HS)」というバナーが表示されるはずです。

なお、このバナーは30秒以上の間隔を空けて、2回目以降の訪問時に表示されます。すぐに表示したいという方はGoogle Chromeの設定(chrome://flags)で Bypass user engagement checks を有効にします。そうすると初回の訪問時からバナーが表示されるようになります。

ホームに追加すると、ネイティブアプリと同じようにアイコンが表示されます。

アプリが入っているとバッティングするケースも

PWAとネイティブアプリの両方が提供されているサービスでは、Webサイトを訪問すると自動でネイティブアプリの方が立ち上がる場合があります。PWAを試す場合にはネイティブアプリをアンインストールしておくのがお勧めです。

Twitter

TwitterのPWAです。ネイティブアプリとさほど変わらない操作性です。

ただしインターネット回線につながっていないと使えません。

Twitter

Instagram

Instagramは写真の投稿や閲覧など、かなり多くの機能が再現されているように感じます。

写真のスタンプも利用可能ですが、フィルター機能は再現されていません。

なお、Instagramもまたインターネットにつながっていないと動作しません。

Instagram

アイドルマスターシャイニーカラーズ

アイマスの略称で知られるアイドル育成ゲームのアイドルマスターシャイニーカラーズ(通称シャニマス)もPWAに対応しています。ゲームなので初期データのダウンロードは相当大きいのですが、一度ダウンロードされてしまえば滑らかに動作します。

ネットワークにつながっていないと使えないのは他と変わりませんが、少なくともトップページなどは表示できます。ソーシャルゲームなので、チート防止策としてのサーバの仕組みは必須なのでしょう。

アイドルマスター シャイニーカラーズ(シャニマス)

Retty グルメニュース

Retty グルメニュースは一部オフライン対応しています。すでに読んだページは一覧に表示され、オフラインでも記事を読むことができます。ただし画像はキャッシュされておらず、その部分は非表示になります。

とはいえ、一度読んだ記事を読み返したいと思った時にオフライン対応しているのは十分嬉しいのではないでしょうか。

Rettyグルメニュース

日経電子版

PWA周りで何かと話題になることの多い日経電子版ですが、オフライン利用はほぼパーフェクトなレベルで実現されていました。一覧を表示した時点で、まだ読んでいない記事についてもキャッシュされます。オフラインになった時に、一覧から記事を辿ることができます。

画像もキャッシュ対象に入っていますので、オフライン時にも記事のデザイン、体裁が変わらずに表示されます。ただし、ログインボタンのような機能だけは動作しませんでした。

日経電子版

おまけ:モナカプレス

当サイト、モナカプレスもPWAに対応しています。一度読んだ記事はキャッシュされてオフラインでも閲覧できます。また、通知を許可すれば新しい記事が更新された際にプッシュでお知らせが届きます。


多くのWebアプリケーションがPWAに対応し始めているのが分かったかと思います。ネイティブアプリに比べると機能は限定的になりますが、コンテンツを配信したい、プッシュ通知を送信したいという要望を実現するのであれば、ネイティブアプリでなくともPWAで十分だと言えます。
また、オフライン利用などに完全に対応しなくとも、最初はキャッシュなど最小限の機能だけをサポートして始めてみるというのも手だと分かります。

興味のある方はぜひ、MonacaのPWAビルド機能を試してみてください!