日経新聞のPWAを
インストールしよう!
https://r.nikkei.com
Chrome
Safari
「ホーム画面に追加」
ホーム画面に追加
⬆︎ボタン
追加
PWA
Web
※日経電子版は
オフライン閲覧を一時的に停止している模様
優れたUX: 「使ってよかったな」「これからも使いたいな」
と思ってもらえる設計であること
(ネイティブ,ハイブリッドは問わない)
これらを満たせばパーフェクトなPWAアプリ!!
※これらは全てエンジニアサイドで完結できます!
{
"name": "notate",
"short_name": "N",
"theme_color": "rgb(34,153,221)",
"background_color": "rgb(34,153,221)",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"scope": "/",
"icons": [
{
"src": "/public/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/public/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/public/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/public/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/public/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/public/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/public/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/public/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
(しかもキャッシュによってスピードも上がります)
ー | モバイルアプリ | PWA |
---|---|---|
開発工数 | ✖︎ 1アプリに2ソース |
◎ |
リリース ハードル |
高 ストア審査 レビューの影響大 ユーザー側で要UPD |
低 審査なし 起動でAuto最新化 |
機能 | ◎ | ブラウザに依存 |
速度 | ◎ | ブラウザに依存 |
リーチ力 | ✖︎ インストールという壁 |
◎ 検索流入👍 体験してからインストール可能 |
ー | 従来 | PWA |
---|---|---|
ネットワーク | 必須 | 必須でない 低速環境でも使用可能 |
コンテンツまでの距離 | 遠 ブラウザ→検索 →コンテンツ |
近 ホーム→コンテンツ |
ロイヤリティ | 低 | 高め |
- オフライン対応
TOP記事&閲覧した記事のキャッシュ
- Push通知
- サイト高速化
14s 改善
1.75 倍
2.3 倍
1.5 倍
1.4 倍
2倍
操作可能になるまでの時間
読み込み速度
オーガニック流入
コンバージョン増(会員登録)
日当りアクティブユーザー
セッション数
- Push通知
- 通信量の改善
- 静的ファイルキャッシュによる高速化
65% ↗︎
75% ↗︎
20% ↘︎
600KB
ページあたりのセッション数
ツイート数
直帰率
PWAアプリの容量
(Androidは23.5MB)
- 静的ファイルキャッシュ
- モバイルUXの改善
- サイトスピード改善
3.8倍 ↗︎
1/2
31%↗︎
20%↗︎
28%↗︎
ローディングスピード
直帰率
コンバージョン率
1人あたりの閲覧ページ数
ホーム画面からの訪問者の滞在時間
純粋にコンテンツとの距離が近くなる
→訪問数が増える
→コンバージョンが増える
ホーム画面から起動できても、遅いと離脱の原因
静的ファイルキャッシュもスピード改善に大きく貢献
モバイルアプリに比べて容量が抜群に小さい
Web訪問だけでインストールが可能
ex) Twitter, Google Analytics
ez) 日経ビジネス, WordPress系ほとんど
https://ohoshi.com
ブラウザ
サーバーサイド
記事2
データ
記事2
ちょうだい
記事2
データ
+
テンプ
レート
記事
テンプ
レート
記事
↓生成
表示
DB
サーバー
ネットワーク
初回
2回目以降
https://ohoshi.com/
ブラウザ
サーバーサイド
記事リスト
データ
記事リスト
ちょうだい
JavaScriptでHTMLを組み立てて
表示
DB
サーバー
ネットワーク
初回
2回目以降
記事リスト
データ
記事2
データ
記事2が見たいな
差分のみ更新
SPA
MPA
○初回のみ
静的ファイル全て
○2回目以降
必要なデータのみ
○常に
静的ファイル
遷移先のHTML
- 滑らかなUIを実現できる
- 必要なファイルは
全てブラウザで持てる
- JavaScriptをフル活用
- 常に全力
- 遅くなりがち
開発難易度は
SPA > MPA
SPA
MPA
- Web -> モバイルアプリへの橋渡し
- Webアプリをユーザーに近づける
ブラウザのロードマップをチェック!
<ここ二ヶ月で実装される機能>
○ HTMLVideoElement.playsInline
→Video再生時自動Full Screenに
○ PaymentRequest.onshippingaddresschange event
→Web決済API利用時の配送先住所変更Option
○ Web Share API Lebel 2
→ネイティブアプリと同様のShare UI
メディア・コンテンツ自体の価値が高まる可能性が高いので
収益向上は明るいです
(自分のブログをPWA化してTagservices経由で広告配信してます)
(いまはPage Speedのために中止してます)
※ただし、SPAになるかどうかはきちんと聞く必要あり
が一番スタートしやすく分かりやすい
1. 常時SSL通信
2. manifest.json準備
3. Service Worker記述
(残り30%はキャッシュ・ビジネス)
かつ、互いを補完し合う存在
○はじめてのプログレッシブウェブアプリ
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
○PWAチェックリスト
https://developers.google.com/web/progressive-web-apps/checklist
○Service Workerでキャッシュハンドリング(基礎編)
https://www.ohoshi-tech.io/2019/05/03/service-worker-1/
○PWAの第一歩 manifest.json
https://notate.sh/post/qzkEkPpzwKjEtLJYlD1i
○動画たち
https://www.youtube.com/watch?v=z2JgN6Ae-Bo&list=LL5oiSdyCO_DIhWEcBsBbHJQ&index=15&t=0s
https://www.youtube.com/watch?v=Da0EjdG5DlE&list=LL5oiSdyCO_DIhWEcBsBbHJQ&index=14&t=0s
https://www.youtube.com/watch?v=we3lLo-UFtk&list=LL5oiSdyCO_DIhWEcBsBbHJQ&index=13&t=1715s