Webサイトをスマホアプリ化したいけど、ネイティブアプリは開発コストも維持コストもかかります。その上、アプリストア（Google Play/App Store）の審査も必要。サイトをアプリ化するのは、なかなかハードルが高いわけです。
そんなハードルを一挙に解決する技術がPWAです。PWAであれば、手軽にアプリ化できる上、OSの審査も不要です。
当記事では、PWAとは何か？から特徴やメリット・デメリットに加え、WordPressサイトをPWA化する方法もご紹介します。
目次
PWAとは？
PWAとは、Progressive Web Appの略で、ウェブアプリケーションとネイティブアプリの良いところを組み合わせた新しい形態の仕組みです。
簡単に言えば、スマホアプリ化する技術なのですが、実際にアプリ化するのではなく、ブラウザで動作します。つまり、通常のサイトと同様にブラウザで動作するが、一見アプリのように見せることができるというわけです。
PWA化したサイトのURLをホーム画面に追加することで、ネイティブアプリに近い動作を体感できます。
では、PWA化で一体どのようなことができるのか。解説します。
PWAの主な特徴
PWAの特徴は次のようなものがあります。
上下のバーが非表示になる
通常のWebサイトをスマートフォンで閲覧すると、上下に検索バーやフッターバーが表示されます。PWA化すると、上下のバーが非表示となり、アプリライクなデザインになります。
上下のバーが非表示になってスッキリ
アプリスイッチャーで独立したアプリとして認識。
PWA化したサイトをホーム画面に追加し表示すると、こんなふうに独立したアプリケーションのように表示されます。
独立したアプリのように
通常であれば、サイトはブラウザの数あるウィンドウの中の1つとして表示されますが、PWA化するとスワイプしても1つのアプリケーションのように扱われます。これもアプリっぽい動きになりますね。
インストール不要
PWAは、ユーザーがウェブブラウザを通じて直接アクセスできます。従来のネイティブアプリではアプリストアからダウンロードする必要がありますが、PWAではその手間を省くことができます。
簡単にホームボタンに追加できる
ユーザーがウェブサイトを訪れると、インストールを促すポップアップが表示され、インストールすることでホーム画面にアイコンを追加することができます。この技術はA2HS（Add to Home Screen）と呼ばれていて、日本語だと「ホームボタンに追加」という意味になります。
このA2HSに対応しているのは、Androidのみで、現状iOSは検索バー横の「ホームボタンに追加」ボタンからでなければ追加できません。
アプリストアの審査不要
PWAはブラウザで動くため、通常のWebサイトと構造は同じです。ですので、Google Play/App Storeなどのアプリストアに審査が必要なく、簡単にリリースできます。
Apple税が取られる心配もありません。Apple税とは、iOSアプリ内にて決済・課金が行われた場合にかかる手数料です。なお、その手数料率はなんと30%。
そのため、ネットショップをアプリ化するなら、PWAを選択する方が賢いと言われています。
プッシュ通知
PWAは、ネイティブアプリと同様にプッシュ通知機能をサポートしています。これにより、ユーザーにリアルタイムで通知を送ることができ、エンゲージメントを高めることができます。
但し、プッシュ通知に対応しているのは、A2HSと同様にAndroidのみです。
オフラインでの動作
PWAは、インターネット接続がない場合でも機能を提供することができます。これを実現するために、PWAはサービスワーカーという技術を使用して、ウェブサイトのリソース（画像やデータなど）をキャッシュし、オフラインでも利用可能にします。
但し、キャッシュを集める際にサイトの表示速度が一時的に重くなる懸念はあります。ですので、オフラインでの動作を可能とするかどうかは、サイトの性質にもよるところかと思います。ネットショップであれば、決済にインターネット接続が必要なので、オフラインで動作しても仕方ないかもしれません。
PWAのメリット・デメリット
PWAのメリット・デメリットです。これまで解説した内容と被りますが、まとめとしてご確認ください。
| PWAのメリット | |
| アプリライクなデザイン | 上下のバーが非表示になり、ネイティブアプリのような洗練されたデザインが実現します。 |
| 簡単なアップデート | サイト側で更新するだけでアップデートが可能なので、アプリケーション自体をシステムアップデートする必要がありません。非常に低コスト運営ができます。 |
| 開発コスト削減 | WebサイトをPWA化するだけなので、ネイティブアプリのように莫大な開発費がかかることなく、アプリ化が可能です。 |
| アプリストアの審査不要 | Google PlayやApp Storeの審査不要で利用開始できます。 |
| 手数料不要 | アプリストアに登録しないので、OSに徴収される手数料はありません。 |
PWAのメリットは、手軽にネイティブアプリのようなインターフェースがつくれること。開発コストも維持コストもほとんどかからないハードルの低さが魅力です。
一方でデメリットもあります。大きく2つに分けると、OSやブラウザの対応状況によって一部の機能が制限されることと、ハードウェアにアクセスするような機能はネイティブアプリでしかそもそも実現できないことです。
| PWAのデメリット | |
| できないことがある | PWAは、ネイティブアプリと比較すると、一部の機能に制限があります。特にハードウェアにアクセスする場合（カメラ、Bluetooth、GPSなど）、ネイティブアプリほど深くアクセスできないことがあります。 |
| 古いブラウザで非対応 | PWAは最新のブラウザでサポートされていますが、古いブラウザでは完全にサポートされていない場合があります。 |
| パフォーマンスの差異 | PWAは高速であるとされていますが、ネイティブアプリと比べてパフォーマンスが劣る場合があります。特に、処理が重いアプリ（例えば、高度なゲームやリアルタイムでデータを処理するアプリなど）では、ネイティブアプリほどスムーズに動作しないことがあります。 |
| プラットフォームの制限 | PWAの対応状況はAndroidが進んでいる一方、iOSは遅れています。例えば、AppleのSafariではA2HSが制限されています。ホーム画面に追加されたアイコンのサイズや、サービスワーカーの動作方法、プッシュ通知のサポートに関して、OSごとの制約を受ける場合があります。 |
WordPressサイトをPWA化する方法
PWAは、アプリ開発に比べると大きくコストを抑えることができます。
WebサイトをPWA化するにはいくつかの方法がありますが、もっとも手軽なのがTCDテーマを利用することです。
今は一部テーマでのみのご利用となりますが、現在PWAへの対応を急ピッチで進めております。既にTCDテーマをご利用の方は今しばらくお待ち下さい。
まとめ
PWAは、ご自身のサービスをアプリ化したいけど、開発や維持コスト面でネックとなっている方を救済するような素晴らしい手段です。特にPWAは、次のようなウェブサイトに最適です。
- ネットショップ
- ポータルサイト
- Webメディア・マガジン
PWAは低コスト、短い工期で実装できるため、開発者にとっても非常に魅力的な選択肢でしょう。しかし、すべてのケースで完璧な解決策となるわけではなく、ネイティブアプリにしかできないこともあります。ケースや状況に合わせて、どちらが良いのかを選択することが重要です。
コメント