Googleが推すPWAにiOS12もそれなりの対応?メリット・できないことを改めて整理(※プッシュ通知はまだです)

私物携帯として iPhone を持つ機会を失いつつあるディレクターの高橋です(社用で使ってみる→プライベートは Android でいいかの流れ)。

(自分が長年の Android ユーザーなこともあってか)Web ベースでありながらネイティブアプリのような UX を実現する「PWA(Progressive Web Apps)」の話題が徐々に増えつつある中、2019 年 2 月頃に「PWA がどんどん Google Play に並ぶようになっている」というような刺激の強い情報が流れ、iOS/Android アプリ開発に携わる人間の一部がザワついたことがありました。

ただ、これはよくよく調べると誤解で、実際は「WebView の上位互換といえる “Trusted Web Activity” の登場など、Chrome がアップデートされたことで、Web を PWA で開発すれば(TWA によって)ネイティブパッケージ化しやすくなった」ということでした(※ PWA をGoogle Play や App Store に配信するためには普通に APK が必要なので)。

とはいえ、4 月末には Microsoft が PWA 開発支援ツール「PWA Builder 2.0」をリリース。Google のモバイルフレンドリーのように “テスト” ができ、自社のアプリストアのみならず Google Play / App Store 用のパッケージングまで支援されるようになりました。

PWA 自体のリリースからは実は数年も経っていますが、そんなニュースもあるように 少しずつ浸透しているようにも見えます。肝心の iOS も「全然対応していない」から「それなりに対応している」程度には進化しており(※後述)、完全にスルーするわけにはいかなくなった方も多いのではないでしょうか。

そこで、今回は iOS/Android アプリの制作会社として、PWA に関するあれこれをまとめました。

PWA ができること・メリットとは(対応してない SPA との違いは?)

結論としては

  • 顧客にとってはインストール(+毎度のアップデート)の手間がなく
  • スマホのホーム画面のアイコンから起動できて、
  • 速度制限など低速通信時でもスムーズに読み込みができ、
  • 中身は Web サイトを読み込んでいるだけでも見た目と挙動はネイティブアプリのように見えて、
  • オフラインでも一応使うことができ、
  • プッシュ通知(Web Push)を受け取ることができ、
  • ネイティブアプリの開発知識がなくても参入できる

という点が挙げられます。SPA(Single-Page-Apps)でも

  • 読み込みの高速化
  • ネイティブ風 UX

など共通のメリットは挙げられていましたが、現状の Google 公式ページ では、”Worthy of being on the home screen” つまり Web サイトを閲覧中に「ホーム画面に追加」ボタンを実装できることを強調しています。

iOS/Android のネイティブアプリを提供する会社が「アプリを作ると顧客一人ひとりのホーム画面に自社のロゴ・アイコンを置ける」と言うこともありましたが、PWA はスムーズに同じことができます(補足:PWA 化していない通常の Web ページでもホーム画面に追加自体はできますが、導線がわかりづらいのでリテラシーが高いユーザーでなければ使われません)。

AMP とは役割が近く、Google は組み合わせも推奨している

「ページの読み込みに 3 秒かかると約半数のユーザーは離脱する」というようなデータは有名ですので(※参考)、Google としてはストレスのない高速表示が UX の向上につながると考えています。

そこで、調べ物をしている=すぐに情報が欲しいときにランディングしやすい記事(article)ページを独自の HTML/JS でコーディングすることで高速化する手法として登場したのが AMP(Accelerated-Mobile-Pages)です。国内では食べログなどで採用されているほか、WordPress やアメブロなどの CMS がプラグインなどでサポートしています。

Google は当時から Web サイトを PWA として構築し、記事ページを AMP で表示する「PWAMP」という手法も提案しています。つまり

  • サイト全体の施策= PWA として開発することで高速化 & 1 タップ起動やプッシュ通知で再訪率 UP
  • article ページの施策=テンプレートを AMP HTML/JS で実装することで高速化

ということになります。AMP ページはコンテンツネットワークや Google 検索時のカルーセル表示によってアクセス増加が見込めることもメリットで、どちらかといえば PWA 含むアプリに到達する以前の新規集客(≒新規ユーザーの離脱防止)施策の意味合いが強いです。

施策としては PWA より手軽と思いがちですが、テンプレの改修のようなものなので既存のページをそのまま表示できるわけではなく、AMP 用のデザインからやり直すことになるケースも少なくありません。ただ、サイトを AMP で構築すると PWA 化がしやすいことはメリットです。

参考:AMP Conf 2019から見えてきたGoogleの次なる戦略

海外では EC サイトを筆頭にマーケティング視点での事例も多数

日本では SUUMO や日経などが有名なくらいであまり PWA の事例がありませんが、海外では(iOS 比率が日本ほど高くないこともあり?)事例が増えています。

Google 公式では、EC サイトを運営する海外企業の導入事例とともに

  • Work reliably, no matter the network conditions (事例:ブラウザ版よりも 60〜80% 少ない通信量になり、通信環境が悪くても動作が安定)
  • Increased engagement (事例:プッシュ通知により再訪率が 4 倍に)
  • Improved conversions (事例:新規顧客の CVR が 80〜100% 増加)

などの点を挙げています。

ただ、EC サイトの改善に関してはネイティブアプリでもほぼ同じような事例がよくセールストークで登場するので、これらは PWA のメリットというよりは「モバイル端末で EC サイトを訪れるユーザーは、ブラウザで閲覧するよりもアプリで閲覧しているときのほうが CV しやすい」ということを示しているだけです。

参考:スマホサイトの売上を改善!ECサイトのアプリ化は「3つの課題」に良い効果を与えられる

Google の公式ページを見る限りでは、「最新技術を使った Web サイト(インストール時+毎度のアップデート時の DL が不要)でありながら、ネイティブアプリのメリットを享受できる」という点を強調しているように感じます。

Trusted Web Activity (TWA) は WebView よりもネイティブ化しやすく

PWA で Web をつくればネイティブアプリはいらないのでは…という意見もありますが、「Google Play / App Store で公開されている」というステータスがなければ「あれ? アプリやってないの?」と言われるケースがあったりもします。アプリ=Google 様や Apple 様の公式から落とすもの、というイメージが定着しすぎているようです。

今回登場した PWA 関連技術「Trusted Web Activity」は、WebView のように独自仕様のブラウザでレンダリングするわけではなく、端末内にある最新の Chrome ブラウザを使うことができます。WebView で既存サイトを読み込むハイブリッドアプリの開発(よくある Web のアプリ化案件)で苦労したことがある方にとっては朗報かもしれません。

また、端末内の Chrome を使うことで、Web とアプリで Cookie やキャッシュを共有できるという点も TWA のメリットです。

Google のサポートが手厚い

PWA 化に必要な serviceWorker.js に関してのドキュメントに

行き詰まったら、StackOverflow に質問を投稿してください。投稿する際は、’service-worker’ タグを付けてください。Google はこのタグの付いた質問を追跡し、できるだけ回答するようにしています。

とあるように、Google は PWA の流通を増やし、Web アプリとネイティブアプリの中間という概念を普及させようとしています。上記 Trusted Web Activity に関してもドキュメントは整備されていくでしょう。

PWA ができないこと(iOS 12.2 でもプッシュ通知とか使えないの?)

iOS でのプッシュ通知 (2019 年春時点)

iOS 11.3 から PWA に対応はされましたが、iOS 12.2 の時点でも

  • プッシュ通知
  • Background Sync
  • Page Lifecycle
  • Service Workers on WebViews
  • Universal Links / Link Capturing

には対応されていません。アプリ内課金 (In-App Purchase) もまだのようです。

ただ、iOS 12.2 からは

  • 遷移がスムーズに(いちいち Safari が新しく立ち上がる、バックグラウンドから復帰するとトップに戻ってしまうなどの不具合?がなくなった)
  • ページを Web でシェアできるように(SNS 投稿・メッセージアプリでの送信)
  • スワイプで戻ることができるように
  • OAuth 認証ができるように(SNS ログインの不具合解消)

と、着実に進化を遂げているようにも見えます。

the biggest step forward in the last year, addressing the two most annoying problems we’ve been dealing with PWAs: reload effect and OAuth logins.
引用:What’s new on iOS 12.2 for Progressive Web Apps (Medium)

とはいえ、iOS のシェアが高い日本ではプッシュ通知が使えなければ事業として導入しづらいというデメリットがあります。Google が EC サイトでの事例を多く挙げているにも関わらず、iOS では EC アプリの生命線でもあるプッシュ通知がデフォルトで使えないという点にチグハグな印象を受けます。

初回のオフライン起動

PWA のメリットには「オフラインでも Web ページが表示できる」という点がありますが、HTML/CSS, js などのソースコードは初回起動時にダウンロードされます。

当然ですが、新規ユーザーがオフライン状態でアクセスしても何も表示されません。「インストール不要」がメリットには挙げられますが、データのダウンロード自体は初回に行なわれるということです。

ただ、容量の大きいネイティブアプリが「50MB」など数字で表示されるとインストールを躊躇するユーザーも少なくないので、ひっそりとインストールが終わることはメリットなのかもしれません。

バージョンアップ(サイト更新)時の meta 更新

PWA をホーム画面に追加するとソースをユーザーの端末にダウンロードするため、meta 情報もユーザーのローカル環境に移動します。つまり、

  • サイトの名前
  • アイコン
  • 背景
  • 初期表示ページの指定

などは後から更新ができません。名前やディスクリプションはともかく、背景や初期表示設定などを変えられないのは痛いような気も…(2019 年 4 月時点での仕様です)。

ネイティブアプリ的な機能(非推奨)

PWA はあくまで「ネイティブアプリを開発しなくても、“手軽に” 近いことができる」ことがメリットです。

さまざまな機能をつけようとして iOS/Android のエンジニアをアサインしても、「なんで PWA でやるんですか?」と疑問を呈されることでしょう。「iOS でプッシュ通知さえ実現できれば…」と、通知まわりだけをネイティブで実装する程度が現実的かもしれません。

なお、Google のドキュメントでは

既に現在、プッシュ通知やバックグラウンド同期が提供されています。 さらに将来は定期的な同期、ジオフェンシングなども導入されるでしょう。

とあるので、同期とジオフェンシングに関しては対応中なようです。

スムーズな開発

PWA はまだ日本ではあまり普及しておらず、SPA にしても実装経験のあるエンジニアは多くありません。

SPA ではないサイトを試験的に PWA 化した「日経電子版」では、(当時 iOS が PWA に本格対応する前だったこともあり)ネイティブと比較してネガティブな点も挙げられていたそうです。

僕らはSPA構成ではないので、ページをキャッシュするためにService Workerを使ってキャッシュの処理をゴリゴリと書きますが、ネイティブアプリの開発では手元にJSONを置いておいてロードするだけで済みます。日経では、開発の手間を考えるとやはりまだネイティブアプリの方が上だと思います。
引用:PWAで表示速度が2倍に! スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット&デメリット

PWA(Web アプリ)のデメリット・問題点

私は非エンジニアなので運用面での使い勝手を調べようと思い、「Glide」を使って個人的に Web アプリを試作し、知り合いに共有してみました。

初見のサイト(運営元も知らない)を「ホーム画面に追加」する心理的コスト

現状、ユーザーは UX として「バナーをタップ」→「アプリストアに遷移」→「ストアからダウンロード」→「iOS/Android アプリを起動」という流れに慣れています。

ストアではスクリーンショットで「何ができるか(インストールするメリット)」をわかりやすく PR でき、LP の役割を果たせます。一方、PWA を “インストール” してもらうにあたっては広告的な訴求ができません。

単純に考えれば、「ブラウザを起動してブックマークを探す」という行為は手間ですし、1 タップで起動できたほうがいいように思えます。広告・マーケ的な視点でも、余計な遷移を挟まずに 1 タップでインストールが完了するほうが CVR は高くなるように思えます。

が、特に知名度のないスタートアップや中小企業のサイトの場合、心理的負担は意外に大きいのではないでしょうか。海外ではコーディングによって専用のダイアログを表示している PWA 事例もあるので、ネイティブアプリの通知許諾のように各企業に工夫が求められるようになるかもしれません。

PWAMP ならともかく、単なる SPA サイトは SEO 面に不安

ホーム画面に追加を先送りにされた場合+ブックマークされていない場合、サイトに再びたどり着くためには検索が必要になります。

article ページを AMP 対応している「PWAMP」ならいいのですが、単純に SPA サイトを PWA 化する場合、SEO 面が苦しくなります。

PWA の今後

ユニバーサルアプリとして

先日開催された「Google I/O 2019」では、ユニバーサルアプリとしてのポテンシャルが事例とともに語られたようです。

従来は「Web は Web で新規集客(認知獲得)、アプリは既存顧客のエンゲージメント(購買単価・頻度向上)」という住み分けでしたが、シームレスに Web とアプリを構築する業種も生まれるかもしれません。

「EC はアプリが正義」という風潮もありましたが、メガネ・化粧品など「web で情報を入手し、実店舗を訪問して購入することが多い」ジャンル、雑貨・家電のように「プッシュ通知を開封はするが、そもそも購入頻度が低い」ジャンルなどはネイティブ EC アプリの投資対効果を見直す必要が出てきています。

「ネイティブでつくる必要がないかもしれないシンプルなアプリ」として

iOS/Android アプリの開発においては、すでに店舗アプリなどのジャンルで「テンプレートをベースに安価に開発するネイティブアプリ」が普及しています。

つまり、PWA が広く普及する場合、「お安いテンプレートでとりあえずネイティブアプリを開発・運用する」という施策は「そもそも Web ベースで開発し、アプリのように見せる」ことで代替できるようになります。

(iOS がこのまま対応を進めてくれれば)ホーム画面に追加・プッシュ通知という「アプリを開発するメリット」が Web で再現でき、必要であれば App Store/Google Play にもパッケージングできるため、シンプルなテンプレ的アプリの開発・保守運用に iOS/Android のエンジニアをアサインする必要はなくなります。

すでにリリースされているネイティブアプリを PWA に作り直す(デザイン・コンテンツを移行する)というプラットフォームの移行は考えづらいですが、アプリのインストール数が伸びていない場合に Web=PWA に一本化する(撤退)という動きは十分に考えられます。

注視すべきは Google の報告よりも Apple の動向?

一方、気になるのは Google と Apple のスタンスの違いです。Google は TWA を使えば PWA をアプリストアにも展開しやすくする方針ですが、Apple は かつて App Store で テンプレート的に量産されたアプリを規制しようとした騒動 もありました。これまでのイメージを考えると、iOS に関しては PWA = ほぼ Web サイトのようなものをネイティブパッケージ化して App Store に並べることは推奨しないかもしれません。

日本は海外諸国に比べて iOS のシェアが高く、若年層では Android を上回っています。平均年齢が高い=Android ユーザーが多いケース、アプリ内課金に依存していないケースはそこまでデメリットがないかもしれませんが、「iOS 次第」となる企業は少なくないでしょう。

Google は「AMP や PWA で(低速通信エリアでも)快適な UX を実現」というビジョンが明確で、カンファレンスではある種のポジショントークのような発表を行なうと考えられます。だからこそ、アプリマーケ関係者は iOS のリリースノートを最も注視することになる時期が続きそうです。

BackApp のメルマガを購読しませんか

このような記事を定期的に読みたいと思っていただけましたら、ぜひご登録ください。

月に一度ほど、アプリ開発を検討する際のポイントや運用開始後のお役立ち情報などをお届けします。

お名前※必須
E-mail※必須

BackApp は、アプリ開発に特化して成長している組織です

「副業」を始めてみませんか?

BackApp では土日のみの副業・複業から社員、パートナー提携など、幅広い形態で開発体制を強化しています。ツールをフルに活用したフルリモートワークを実現しており、中には海外を旅しながら開発をしているメンバーも。コミットの履歴が残るエンジニアだからこそ、煩わしい「管理」から解放されます。

iOS/Android どちらも採用強化中ですので、ご興味のある方はご一読ください。

アプリ開発の各種相談承ります

「企画から開発までトータルで外注したい」「事業側は自社でやりたいので、開発のみ委託したい」など、御社の状況に応じてアプリの企画・開発を承ります。当社の開発事例や業界の傾向・最新事例なども含めてお話しますので、お困りのことがあればぜひ一度ご相談ください。

※働き方改革・リモートワーク推進企業のため、Skype, apper.in などオンラインでの商談も歓迎です