これからはじめるPWA〜入門編〜

こんにちは。マークアップエンジニアのノテです。

早速ですが、最近、注目されている技術『PWA』というものをご存知でしょうか。

すっっっごく簡単に言うと、『スマートフォンアプリのようなWebサイトにできる技術』です。

ネイティブアプリ特有の「上にシュッと出てくるプッシュ通知」や「ホーム画面へのアイコン追加」などなど。

現在のネイティブアプリ特有の機能をWebサイトに追加することができます。

というのが、『PWA』です。『プログレッシブ・ウェブ・アプリケーション』です。

では、今回は「これからはじめるPWA」の「入門編」ということで、

「PWA」を噛み砕いて、わかりやすく解説していきます。

【PWAとは？】

PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術です。ウェブとアプリの両方の良さを兼ね備えています。
引用　DM SOLUTIONS

まさにその名の通り「Progressive(進歩的な・革新的な)」な「WebApps(ウェブアプリ)」で、

『ネイティブアプリのようなUXを実現する機能』を実装することができます。

では、その「PWA(Progressive Web Apps)」で一体何ができるの？ということを見てみましょう。

【PWAでできること】

PWAでできることは冒頭でも話した通り、

「プッシュ通知」や「ホーム画面へのアイコン追加」を初めとして、大きく４つあります。

1.プッシュ通知

まず代表的なものがプッシュ通知です。アプリから通知が来た際に、上にお知らせが通知される機能です。

あの、スマホで通知が来ると上にしゅぽんって出てくるやつですね。

ユーザー側の観点から見ると、新情報などを通知してくれるので嬉しいですよね。

2.表示スピードの改善

PWA対応をすると、プリキャッシュ機能により表示される速度が早くなります。

ブラウザでの表示スピードは速ければ速いほど良いというのは言うまでもありません。

実際に日経電子版がPWAを導入し、表示速度が2倍になったという事例もあります。↓

3.オフラインで閲覧

こちらも先ほどと同じく、プリキャッシュ機能によってオフラインで見ることができるようになります。

ネット環境に接続しなくても見れるWebサイトって、正直凄いですよね。。

インターネット接続が必須というブラウザの欠点が克服されるのでしょうか。

4.ホーム画面へアイコン追加

ホーム画面にサイトアイコンを追加することができるようになります。

サイトをホーム画面に追加した時に、何も画像がなかったり、

全く関係のない画像が表示されていると、溢れ出るサイト感が否めないですよね。。

ですが、きっちり特定のアイコン画像があると見栄えも良いですし、本当にアプリのように見えます。ユーザー側からも視認しやすいです。

【PWAのポイント】

では、このPWAをどうやって導入するのか！ということを紹介していきたいところですが、

今回は入門編なので、PWAを知るにあたって覚えておきたいポイントを一つだけご紹介しておきます。

それが「Service Worker」です。

◆Service Workerとは

Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザーのインタラクションを必要としない機能を Web にもたらします。 既に現在、プッシュ通知やバックグラウンド同期が提供されています。
出典　Google Developers

説明にもありますが「Service Worker」がブラウザの外で動作することによって、

「表示スピードの高速化」や「オフラインでの閲覧」などに繋がったり、

「プッシュ通知機能」の追加を可能にしてくれています。まさに、PWAの根幹です。

実装の仕方まではわからずとも、「Service Worker」は頭に入れておいていただけると良いのではないかなあ、と思います。

【PWAの導入メリット】

1.ネイティブアプリのようなUXを実現できる

「プッシュ通知」を代表的なものとするネイティブアプリのようなUXを実現させることができます。

それによって、『コンテンツへの誘導』や『ユーザーからの視認性を高める』ことができます。

2.速度が改善される

プリキャッシュ機能により、速度を大幅に改善させることができます。

速度が遅ければ遅いほど離脱率は高まるので、単純に『ユーザーの離脱率の減少』が予想されます。

3.アプリとしてリリース可能になる

PWA対応がされていれば、アプリとしてもリリース可能(アプリとしての申請が必要)です。

それによって、App StoreやGoogle Playストアなどの『プラットフォームからでもユーザーに認知させる』ことができます。

【PWAの導入デメリット】

1.アプリを運用していると、コストが増える

あくまでサイトなのでアプリとは別に作る必要があります。

なので、アプリを既に運用しているとなると、別でPWAの対応コストや運用コストがかかってくるということになってしまいます。

2.iOSでの機能制限

iOSでは目玉のプッシュ通知機能を初めとする一部の機能が制限されてしまいます。

これは割と大きなデメリットだと思いますが、、今後のAppleの早めの対応が待たれるばかりです。

参考記事：Googleが推す「PWA」、メリット・できないことを改めて整理　※iOS 13 でもプッシュ通知はまだです

【PWAが導入されているサービス】

と、ここまでPWAの機能や、メリット・デメリットについて解説してきましたが、実際の導入事例が気になるところです。
なので、現在、PWAが導入されているサービスを少しだけ見てみましょう。

◆SUUMO(https://suumo.jp/)

CMでおなじみの不動産の「SUUMO」です。コチラのドキュメントに「読み込み時間が75%減少」や「プッシュ通知の開封率が31%に増加」とあります。

やはり、不動産情報などはリアルタイムで更新されていくので、新着情報をプッシュ通知に出せるというのは非常に大きかったのでは無いかと思います。

◆Twitter Lite

2019年の4月6日にTwitterが「Twitter Lite」を発表しました。高速かつデータ使用量も少なくできるようにしたそうです。

狙いとしては、都市部などの4Gによりネットの回線が速い地域というよりも、

2Gや3Gなどのネットの回線が遅い地域に向けて開発されたそうです。

ネット環境が不安定、回線が遅い地域に対してのアプローチとしては非常に有効そうですね。

◆日経電子版(https://r.nikkei.com/)

先ほど、表示速度の改善の項目で例に出した「日本経済新聞社」です。

パフォーマンスの改善
2X のSpeed Index
14 秒早いTime-To-Interactive
75% の読み込み速度改善(prefetch利用時)ビジネスインパクト
2.3X のオーガニック流入
58% のコンバージョン増(会員登録)
49% の1日当りアクティブユーザー数増
2X のセッションあたりPV増出典 Google Developers

PWA化した際のパフォーマンスについて書かれていますが、どれもキラキラした数字ばかりで非常に高いパフォーマンスを挙げたと言えます。

コチラの記事にも書かれてありましたが、「記事を読ませる」という目的があるなら、

離脱させないためにも速度改善は非常に大切なことなのでは無いかと思います。

◆Pinterest(https://www.pinterest.jp/)

Webサイト上の写真や画像をブックマークしたり、シェアできる「Pinterest」です。

認証をしていないユーザーの仕様状況を分析したところ、古い低速のモバイルサイトでは1%しかユーザー登録、ログイン、ネイティブアプリのダウンロードなどのコンバージョンをしていないのが分かりました。このコンバージョン率を向上させる事で得るメリットは大きく、PWAへの投資につながりました。
出典　Medium「Pinterest PWAのパフォーマンス改善事例」

「Pinterest」もTwitterと同様、低速環境に課題を見つけ(Twitterはユーザー側の課題に合わせにいった形ですが)、PWAの導入を踏み切ったようです。

おかげで、ユーザーが使用可能になるまでの速度が23秒から5.6秒に改善され、パフォーマンスが跳ね上がりました。

◆Spotify(https://open.spotify.com/)

音楽ストリーミングサービスの「Spotify」です。利用されている方も多いかと思われます。

初回利用率が54%向上。
60日以内のリテンションが14%向上。
非アクティブユーザーの再ログイン率が30%向上。
30%のWeb版ユーザーがネイティブアプリをダウンロード。出典　【2020年版】PWA対応サイト事例！アプリとの違いとは？

ネイティブアプリとPWAの両方をフル活用しており、

デスクトップユーザーの「再ログイン率の向上」や「ネイティブアプリへの誘導」等々、

主に、デスクトップユーザーへのアプローチが成功した例になります。

◆スカイスキャナー(https://www.skyscanner.jp/)

格安航空券の比較サイトの「スカイスキャナー」です。

スカイスキャナーもネイティブアプリとPWAの同時活用をしています。

参考記事：PWA対応サイト5選！アプリ開発よりも導入コストの低いPWAとは？

【まとめ】

今までは「アプリ」と「Webサイト」の良し悪しを比較した上で、

ユーザーに対してのアプローチ方法を「Webサイト」か「ネイティブアプリ」、もしくは「Webサイトとネイティブアプリ」という風に検討していたかと思われます。

しかし、ここに来てドドーンと「PWA」という『アプリとWebサイトの良いとこどりができる技術』が出てきました。

これにより、表示スピードの高速化やWebサイトでアプリのようなUXを実現させることができるようになったので、

エンゲージメントが上がったり、離脱率が下がったりという様々な成果が期待できるようになりました。

「Progressive」の意味と同様、まさに「革新的」です。

このように凄く優秀なPWAちゃんですが、「じゃあ全部PWAでやっちゃいなよ！！」というのが正解かと言われるとそうではないです。

デメリットでも上げたように、現状iOSで一部の機能が制限されてしまったり、アプリを運用していた場合に管理コストが増えてしまったりということもあります。

はたまた、最優先の大きな課題は速度改善でもエンゲージメントでも無い。という場合もあるかもしれません。

なので、『TPO』です。時と場合によりけりです。

とはいえ、メリットの部分はやはり大きいと思われるので今後、需要がどんどん膨らんでいくことは予想されそうです。