Googleが推す「PWA」にはまだできないことが多い ※iOS 13でもプッシュ通知はまだです

(2020 年 4 月更新)

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

2019 年は、Web でありながらネイティブアプリのような UX を実現する「PWA(Progressive Web Apps)」の話題が増えた年でした。おそらくアプリ界隈に携わる人の中では、エンジニアの方はもちろん私のような BizDev 側の人間も密かに注目していたことと思います。

しかし iOS 13 がリリースされても結局プッシュ通知などの対応はなく、結果としてやや盛り上がりには欠ける一年に終わりました。

一方、秋以降には中国などで先行する「スーパーアプリ」が日本国内でも注目を増してきました。

参考:2020年に知っておきたい「スーパーアプリ」とは?中国で先行し、日本のLINE×PayPay構想が有名事例に

スーパーアプリのメリットは明確ですが、それは「PWA が普及しない(Web サイトの限界がアップデートされない)前提」のメリットでもあるのです。

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

そこで、今回は iOS/Android アプリ開発案件が多い会社の立場から、避けては通れない PWA に関するあれこれをまとめました。

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

結論として、PWA の何がうれしいのかというと、

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

という点が挙げられます。

スパこと SPA(Single-Page-Apps)でも

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

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

iOS/Android のネイティブアプリを提供する会社が「アプリを作ると顧客一人ひとりのホーム画面に自社のロゴ・アイコンを置ける」、つまり UI の向上およびマインドシェアの獲得をメリットと説明していた時期もありました。

ですが、PWA は iOS/Android 固有の対応がなく、スムーズに同じことができます(補足:PWA 化していない通常の Web ページでもホーム画面に追加自体はできますが、導線がわかりづらいのでリテラシーが高いユーザーでなければ使われません)。

参考:Webサイト・SNS・PWA・ネイティブアプリ、できることとメリットを比較 (2020 年版)

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

PWA を積極的に開発しているアメリカの企業は、PWA Statsというサイトで事例を紹介しています。

スターバックスは PWA 化で DAU が 2 倍になり、Tinder は容量を Android ネイティブアプリの 1/10 にして高速化したことでユーザーエンゲージメントが増加したとのことです。

当然ながら成功事例しか掲載されないので参考程度に見ておくほうがいいですが、PWA 化のメリットの大枠はつかむことができそうです。

また、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つの課題」に良い効果を与えられる

海外では(iOS 比率が日本ほど高くないこともあり?)ネイティブアプリ活用のゴールとして掲げられがちな 訪問頻度・CVR・購買単価の向上事例が増えています。
日本では SUUMO や日経を皮切りに、メディアサイトにはかなり普及しました。

とはいえ、これらは「モバイルブラウザに比べて閲覧をしやすくする」というアプリのメリットの一部分を提供するに留まっています。

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

iOS でのプッシュ通知など (2020 年春時点)

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

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

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

iOS 12.2 からは

  • スワイプで戻ることができるように(ナビゲーションジェスチャ)
  • OAuth 認証ができるように(SNS ログインの不具合解消)

iOS 13 からは

  • URLのツールバーを隠せるように(ネイティブアプリ風 UI)
  • 共有ボタンが更新され、「ホーム画面に追加」ボタンがわかりやすく
  • Apple Pay が利用可能に

と、できることは確実に増えていますが、クリティカルな issue が解決される目処は立っておらず、そもそも Apple にどこまで足並みを揃えるつもりがあるのかも不透明な状態です。

参考:

初回のオフライン起動

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

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

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

ネイティブアプリ的な機能(できないことというよりは非推奨)

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

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

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

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

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

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

セキュリティ重視・中央集権の Apple とは相容れないのではないかという懸念

PWA を語る上では何かと iOS の問題が取りざたされます。

最近でも、Safari のセキュリティ機能である「Intelligent Tracking Prevention(ITP)」の強化により、7日間アクセスのないデータは削除されるようになりました。

これは、Google が PWA で実現しようとしている「(Web でありながら)二回目以降はオフラインでも起動できる」という世界観とは相容れないものです。

もともと Safari でつまずくポイントが多いといわれており、PWA が普及するかどうかは Apple の動きにかかっているといっても過言ではないでしょう。

参考:https://gigazine.net/news/20200326-apple-safari-pwa-impossible/

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

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

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

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

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

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

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

article ページを AMP 対応している「PWAMP」ならいいのですが、単純に SPA サイトを PWA 化する場合、オーガニック集客においてはハンデを背負うことになります。

開発できる人材の供給不足

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

経験のあるエンジニアを採用あるいは業務委託契約を結ぶことも難しいため、PWA 化に踏み切ろうと思えば自社でトライ&エラーを繰り返すことになります。

また、iOS でプッシュ通知が使えないなどクリティカルな issue がある状態では、開発コストに見合う成果を出せるのか不透明であり、企業としても投資しづらい領域といえます。

日本ではかなり早い段階でサイトを PWA 化した「日経電子版」では、iOS が PWA に本格対応する前だったこともあり、開発に苦労したとのことです。

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

そもそも Google が PWA で目指す世界観とは?

AMP と組み合わせることで、さらなる高速化

「ページの読み込みに 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 ページへのランディング(キャッシュを読み込む)で回避

ということになります。

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

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

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

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 のメリットです。

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

PWA が日本で広まった当初は「ネイティブアプリの代替品(わざわざ iOS/Android アプリを開発しなくても Web で完結できる)」と考えられていたフシもありますが、理解が深まるにつれてその視点は疑問視されるようになりました。

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

iOS13 からは iPad が独自の OS になり、Safari がデスクトップモードとモバイルモードの両方を提供するようになったことも見逃せません。

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

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

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

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

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

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

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

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