「PWA Night vol.1 ~PWAのミライや活用方法をみんなで考えよう~」に参加してきました

  • PWA Night vol.1 ~PWAのミライや活用方法をみんなで考えよう~に参加してきました。

pwanight.connpass.com

  • PWAだけにフォーカスした勉強会は今まであまりなかったのでとても楽しかったです。毎月開催ということで今後も期待しています。
  • PWAの良さはだいぶ広まってきましたが、TWAにするとアイコンにバッヂをつけられるなど更に便利なところもあるということでもっと深く調べてみたいなと思いました。
  • ネイティブ vs PWAの文脈で語られる場面が多かったですが、対立するものではなく選択肢が増えたということなんじゃないかと思うので、アプリの性質や戦略に応じて使いこなせていけるといいのかなと感じました。
タイトル 発表者
PWAの今とこれから 宍戸さん@Google
PWA はビジネス的に美味しいか? 橋本さん@パラダイスウェア
リーンスタートアップとPWA~Webサービス立上げ時こそPWAを検討したい!~ 角谷さん@TAM
PWA×CMS活用アイデア 早瀬さん@シックス・アパート

PWAの今とこれから

PWAの効果

  • PWAにすると平均コンバージョン率+20%
    • 統計のデータ
  • スターバックス
    • ブラウザで注文して店舗で受け取る
    • payment request
    • add to home screen
    • デスクトップ版もワンソースで
  • Google Maps Go
    • アプリ版は機能が多くて重い

PWAの特徴

  • 高速な表示
  • 信頼性
  • エンゲージメント性

高速な表示

  • 53%の人は表示3秒遅れると離脱
  • 79%はパフォーマンス悪いサイトに戻らない
  • 表示が1秒遅れるとコンバージョン率7%下がる

信頼性

  • ServiceWorker
    • ブラウザに対して一つ起動できる
    • リクエストをキャッシュしたり加工したり
  • Workbox
    • ServiceWorkerをラップするライブラリ
  • オフライン時はフォールバックページを返す
  • メジャーなブラウザではServiceWorkerは動作する

エンゲージメント性

  • ホームスクリーン追加
  • Androidだとホームに追加のバナーが勝手に出てしまう
    • beforeinstallPromptイベントを拾うことで制御できる
    • appinstalledイベントでインストール完了をひろえる
  • プッシュ通知
    • 通知がほしいと思える場面で許可プロンプト出すと良い
  • ログイン
    • 92%はID/パスワード思い出せないときに諦めてしまう
    • Credential Management API
    • Web Authentication API
  • 支払い
    • 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のイメージ

  • アプリよりも低工数(開発/運用)
  • 体制張りやすい
  • 後からアプリ化できる
  • 審査が必要ない
  • Google/Apple税も不要

B2B新規事業あるある

  • 課題
    • 要件定義に時間がかかるし仕様変更も多い
    • システム間連携にコスト
  • PWAを使うと
    • 早期に動くものが作れる
    • フロントとサーバを分離しやすい
  • プロトタイプ例
    • Vue + Firebase + twilio(SMSでiOSの通知の代替)

リーンスタートアップとPWA~Webサービス立上げ時こそPWAを検討したい!~

  • 角谷さん@TAM

不確実性の高い世の中

リーンスタートアップ

  • MVPを作る
    • 最低限実用に足る製品を作って成長させていく
  • MVPの種類
  • iOS/Androidアプリで完全版をいきなり作るのではなくPWAで小さく成長させていく

ネイティブあるある

  • 最初だけでなく全てがダブルコスト
  • ちょっとしたことで予算がなくなる
  • 審査があるからスピード感落ちる

PWA×CMS活用アイデア

PWAのメリット

  • 読み込み速い
  • オフラインで動く
  • インストール不要
  • プッシュ通知

PWAの要件

PWAの普及

  • PWAが思ったより普及してない理由
  • iOSの対応が充実すればとても便利になる

PWAを作るサービス

movabletype.net