PWAを使ったサイトの作り方や実装方法を解説【サンプルあり】
今回は、PWA(Progressive Web Apps)という技術について自分なりの解釈をまとめました。
PWAとは、簡単にいうとWebサイトをネイティブアプリのように利用できる技術です。
PWAの一部の機能を使って実施にサイトを作ってみました。
PWAとは？
PWAとは、「Progressive Web Apps」の略でWebサイトをネイティブアプリのように利用できる技術です。
Google（Android Chrome）を中心に展開されており、ユーザーとのエンゲージメントの向上やコンバージョン・リテンションの改善に効果があるとされています。
まだまだ導入されているサービスは少ないですが「Twitter」「日経電子版」「SUUMO」などのサービスに導入されています。
Progressive Web App Checklist | Google Developers
メリット/デメリット
PWAはWebサイトをインストールできるようにするだけなので、コストがかからず、かつ訪問者のユーザービリティーとリテンションを上げることができます。しかし、デメリットもあります。
簡単にメリット・デメリットをまとめてみました。
メリット
- ネイティブアプリのようなUIを実現できる
- インストールが不要
- ページの読み込みや表示が速い
- オフラインでも動く
- プッシュ通知の受信が可能
- ストアの審査なくアップデートが可能
- GPSを使った現在地取得と利用が可能
デメリット
- 対応ブラウザが限定的
- SSL化の課題
- ネイティブアプリとの2重管理
実際に実装してみた
今回はサンプルとして「おみくじ」サービスをPWA化してみました。
PWAはhttpsを前提にした技術なので今回はGithub Pages（github.io）を使用し公開を行いました。
3分ぐらいあればすぐにPWAのサービスが作れます！
- 公開ページ
- GitHub
簡単にそれぞれのファイルの説明をすると
index.html
アプリの表示部分になります。
sw.js
ServiceWorkerの処理を書くファイルになります。キャッシュファイルの設定、インストール処理、キャッシュロード処理を記述しています。
manifest.js
PWAの設定情報を記述しておくところになります。
↓詳しく知りたい方
PWAの事例
今回は2つの事例を紹介します！
引用先：https://developers.google.com/web/showcase/2017/twitter
PWAの導入によって下記の効果があったようです。
- セッションあたりのページ数が65％増加
- 送信されたツイートが75％増加
- 直帰率が20％減少
②日経電子版
PWAの導入によって下記の効果があったようです。
- モバイルに比べパフォーマンスが2倍に改善
- PC版と比べるとSpeed IndexとStart Renderが3分の1に短縮
- ユーザーとのエンゲージメントの向上やコンバージョン・リテンションに効果がみられた
Discussion