- PWA Night vol.1 ~PWAのミライや活用方法をみんなで考えよう~に参加してきました。
- PWAだけにフォーカスした勉強会は今まであまりなかったのでとても楽しかったです。毎月開催ということで今後も期待しています。
- PWAの良さはだいぶ広まってきましたが、TWAにするとアイコンにバッヂをつけられるなど更に便利なところもあるということでもっと深く調べてみたいなと思いました。
- ネイティブ vs PWAの文脈で語られる場面が多かったですが、対立するものではなく選択肢が増えたということなんじゃないかと思うので、アプリの性質や戦略に応じて使いこなせていけるといいのかなと感じました。
タイトル | 発表者 |
---|---|
PWAの今とこれから | 宍戸さん@Google |
PWA はビジネス的に美味しいか? | 橋本さん@パラダイスウェア |
リーンスタートアップとPWA~Webサービス立上げ時こそPWAを検討したい!~ | 角谷さん@TAM |
PWA×CMS活用アイデア | 早瀬さん@シックス・アパート |
PWAの今とこれから
- 宍戸さん@Google
PWAの効果
- PWAにすると平均コンバージョン率+20%
- 統計のデータ
- スターバックス
- ブラウザで注文して店舗で受け取る
- payment request
- add to home screen
- デスクトップ版もワンソースで
- Google Maps Go
- アプリ版は機能が多くて重い
PWAの特徴
- 高速な表示
- 信頼性
- エンゲージメント性
高速な表示
- 53%の人は表示3秒遅れると離脱
- 79%はパフォーマンス悪いサイトに戻らない
- 表示が1秒遅れるとコンバージョン率7%下がる
信頼性
- ServiceWorker
- ブラウザに対して一つ起動できる
- リクエストをキャッシュしたり加工したり
- Workbox
- ServiceWorkerをラップするライブラリ
- オフライン時はフォールバックページを返す
- メジャーなブラウザではServiceWorkerは動作する
エンゲージメント性
- ホームスクリーン追加
- manifest.json
- Androidだとホームに追加のバナーが勝手に出てしまう
beforeinstallPrompt
イベントを拾うことで制御できるappinstalled
イベントでインストール完了をひろえる
- プッシュ通知
- 通知がほしいと思える場面で許可プロンプト出すと良い
- ログイン
- 支払い
- Payment Request API
- ブラウザに記憶させた支払い情報を使ってフォームを統一
今後
- モバイルのユーザ数がのびてる
- デスクトップものびてる
- デスクトップPWA
- Cross Browser & Cross OS
- PWAをGooglePlayで配信
- WebViewではない
- ChromeCustomTabsを使ってる
- => TWA
- TWA(Trusted Web Activities)
- 開発者が保証されたWebページをAndroidのネイティブと同じように開くことができる
- Wake Look
- Badgingも使える
PWA はビジネス的に美味しいか?
- 橋本さん@パラダイスウェア
PWAのイメージ
- 従来のWeb -> PWA -> ネイティブアプリ
- PWA = アプリ未満
PWAのイメージ
B2B新規事業あるある
- 課題
- 要件定義に時間がかかるし仕様変更も多い
- システム間連携にコスト
- PWAを使うと
- プロトタイプ例
- Vue + Firebase + twilio(SMSでiOSの通知の代替)
リーンスタートアップとPWA~Webサービス立上げ時こそPWAを検討したい!~
- 角谷さん@TAM
不確実性の高い世の中
- 技術革新のスピード
- 顧客ニーズの変化周期の短縮化
- => 計画通りに行かない
- => リーンスタートアップ
リーンスタートアップ
ネイティブあるある
- 最初だけでなく全てがダブルコスト
- ちょっとしたことで予算がなくなる
- 審査があるからスピード感落ちる
PWA×CMS活用アイデア
- 早瀬さん@シックス・アパート
PWAのメリット
- 読み込み速い
- オフラインで動く
- インストール不要
- プッシュ通知