- PWA Night CONFERENCE 2020に参加してきました。
- GoogleやMicrosoftの中の人にも登壇していただき最新の情報を紹介してもらえて勉強になりました
- 通常版では何かのテーマにフォーカスすることが多いですが、こういった機会で改めてPWAの現状を認識できたのも良かったです
タイムテーブル
| 時間 | タイトル | 発表者 |
|---|---|---|
| 13:10- | 基調講演：Edge of the web | えーじ |
| 14:05- | スケーラブルPWA 〜こえのブログ最新事例〜 | 原 一成 |
| Webでできる体験を考える会 | 折原 レオナルド賢 | |
| 14:40- | 日経電子版のモバイル/PC版統合と今後の取り組み | 酒井 宙幸 |
| ScrapboxでのServiceWorkerとCacheの活用 | 飯塚 大貴 | |
| 15:20- | Why PWA should be on strategy map for eCommerce companies in 2020. | Patrick Friday |
| PWA x PlayCanvasについて | 羽賀 流登 | |
| 15:55- | AMP + PWAで実現するストレスのないページロード | 清水 智公 |
| 進化するHTTP | 奥 一穂 | |
| 16:35- | PWAに取り組む前に知っておきたいSPAとSEO | 関 憲也 |
| まもなくやってくるVue.js 3 | 川口 和也 | |
| 17:10- | Taking your web app offline (in a good sense) | Maxim Salnikov |
| Unlocking new capabilities for PWA | 吉井 健文 | |
| 18:00- | エンディング講演：PWA on Windows | 物江 修 |
基調講演：Edge of the web
- えーじさん(Google)
PWA
- 2015年にGoogleのエンジニアがブログで紹介したのが最初
- 個別の技術は前からあったがPWAとくくることで広まった
- 従来のWebとは違うものという印象を与えてしまって面も
- Webの進化の流れのひとつでしかない
- 今あるWebに少しずつ追加していくことができる
PWAのいいところ
- ホーム画面に追加した簡単にアクセスできる
- アプリストアからもインストールできたらいいのに
- Progressive Web Apps in the Microsoft Store
- PWAのアプリを見つけたら自動でMicrosoft Storeにのせられる
- オプトアウトとかもできる
- Googleは？
- TWA(Trusted Web Activities)
- Progressive Web Apps in the Microsoft Store
TWA (Trusted Web Activities)
- 特徴
- AndroidアプリにPWAを埋め込むことができる技術
- ブラウザとストレージが共有できる
- Google Play Storeにのせられる
- Webとストアでどう違うか？
- OYOの例
- コンバージョンはストアの方が高い
- ログイン率も高い
- Google Playの規約とかどうなるの？
- 規約に沿わないといけない
- ストアからインストールしたアプリから課金などしたら手数料も必要
- どうつくるか
- llama-pack github.com
developers.google.com developers.google.com web.dev
Project Fugu
Origin Trials
BadgingAPI
- インストールしたPWAにバッヂを付けられる
- 通知何件的なあれ
navigator.setAppBadge(42)みたいな感じで実装する- FireFoxからも好感触らしいので広まってくるかも
Shortcuts
- ホーム画面のアイコン長押しすると特定の機能に直接アクセスできる
- Microsoftから提案
- web app manifestで定義することになる
Web Share
Web Share Target API
- 他のアプリが送ってきたインテントを受け取って何かしたい
- web app manifestに受け取るURLなど書く
- そこで受け取れるのでその後の処理を実装する
SMS Receiver API
- インドなんかはほとんどのサービスが電話番号で認証
- SMSでワンタイムコードを受け取って認証
- OTPを入力するのを簡単にするAPI
- GoogleがAppleと交渉して進行中
- Appleの提案
autocomplete="one-time-code"
Clipboard API
- クリップボードに追加された画像も扱えるようにする
- パスワードコピーしてて勝手に扱われるようなことあったら困る
- ユーザの許可がないと扱えないように
Contact Picker
- アドレス帳の情報を扱うAPI
- ユーザにWebに渡したい情報を選んでもらってそれを扱う
- ネイティブアプリだとまるごとサーバにアップロードなんてあるけどWebではそんなことはできないように
Native File System
- File System APIというのもあった
- Chromeだけで使えた
- 特定の領域のFileだけを使える
- OSのファイルシステム全てにアクセスできる
- ユーザが選んだファイルであればどこにあるものでもアクセスできる
Web Authentication
- デバイスと公開鍵暗号方式を組み合わせてセキュアな認証を実現する
- セキュリティキーなどがキーペア生成して公開鍵をアプリへ
- スマホを認証器として使うと生体+所持の2要素担保できる
- サーバ側の実装複雑にはなるけど今後広まってきそうな技術
Whats comming next?
Privacy Aware Web
- プライバシーをより大事に扱うという流れ
- Third party cookies
- First party
- アクセスしてるサイト
- Third party
- アクセスしてるサイトでないところ
- リソースをとりにいくときにCookieが送られてしまう
- それを制限していく
- iframeで埋め込んだページへのアクセスなんかも制限されることに
- ソーシャルログインによるID連携も壊れてしまうかも
- SameSite属性のデフォルト値が変わる
- Chrome80から
- 新しいCookie設定
Set-cookie: SameSite=None;Secureの準備を始めましょう
- https://developers-jp.googleblog.com/2019/11/cookie-samesitenone-secure.html
- First party
MiniApp
- アプリの中にアプリをインストールできるエコシステム
- WebViewでWebアプリの中にアプリをインストールできる
- この機能を持ったアプリをスーパーアプリと呼ばれる
- 仕様の標準化が進んでいる
https://w3c.github.io/miniapp/white-paper/w3c.github.io
まとめ
- PWA is just a branding Believe in the web
- Many new powerful features are coming to the web
- Get ready for the privacy aware web and mini apps ecosystem
スケーラブルPWA 〜こえのブログ最新事例〜
- 原 一成さん(CyberAgent)
PWA
- UXにフォーカスしたWebアプリ
- 好ましくない例
- ローディングが長い
- 意図しないレイアウトの変更
- モバイルなのにPC版の画面
- Googleの定義
- Reliable
- Fast
- Engaging
PWAの事例
- こえのブログ
- 喋った内容を投稿して公開できるサービス
- Webで実現している
- 音声のファイルが重い
- wasmで処理
- WebWorkerを活用
- IndexedDBに保存
工夫したところ
- Single Origin with HTTPS
- App Strategy
- すでにAmebaのアプリがあるけどWebで
- 試験的なものなので素早く提供したかった
- アプリに入れるとアプリ自体のサイズがかさんでしまうという懸念もあった
- Polyfill
- 最新のブラウザには最小限のファイルを
- 古いブラウザにはpolyfillを含んだファイルを
- パフォーマンス
- 速くて困ることはない
- Googleでは速度が遅いとそれを表示するようなことも検討
- キャッシュ
- CDN
- できるだけ長くキャッシュして速く返せるように
- DBの値が変わったらすぐに更新できるように
- キャッシュヒット率98%
- クライアントキャッシュ
- ServiceWorkerでCacheAPI使ってキャッシュ
- CDN
- Perf Budget
- 最初ははやくてもだんだん遅くなってくる
- LightHouseなどで継続的な計測
- 点数よりもメトリクスが重要
- 競合と比較
- 20%はやいと体感できるレベルで違う
- 目標値を設定
- FCPやTTIまでの時間
- リソースのファイルサイズ
- この数値(予算)を超えないようにしていく
- 超える場合は予算を増やしたり改善を目指したり
- CIで回して変化があったらすぐに判断できるようにする
- Writing Tests
- unit testing
- visual refression tesingしてる
- Accessibility
- Wake Lock
- 無操作でも画面が暗くならないようにする機能
日経電子版のモバイル/PC版統合と今後の取り組み
- 酒井 宙幸さん(日本経済新聞社)
日経電子版リニューアル
- 2010/3創刊
- 2019/10トップ画面を中心にリニューアル
- PCとモバイルの統合
モバイル版とPC版
- モノリスな構成
- middlewareできゃっしゅなど
- 2017年モバイル版のみリニューアル
- サーバサイドをマイクロサービス化
- Fastlyでルーティング
課題
- PC版とモバイル版でアーキテクチャが変わった
- 開発チームが分断
- なにかするために両方でやらないといけない
- 業務知識も分散
- PC版パフォーマンス低下
- 10年運用しているとパフォーマンス低下は避けられない
- デザインと機能の一貫性
- PC版とモバイル版でカラースキームやコンポーネントが統一されていない
- どちらかにあったもう片方にない機能
課題の改善
- 目指す姿
- Fastly + マイクロサービスで統一
- 高いパフォーマンス
- 生産性の高いチーム
- 一貫性のあるデザイン機能
- 統合プロジェクトの第一ゴール
- トップ画面の統合
- パフォーマンス
- リリースは無事できたが思っていたよりパフォーマンス上がらず
- パフォーマンスのモニタリング
- SpeedCurveだけでなくLighthouseCIも導入
- CIでCircleCIからLighthouseを動かすようにする
- 手動でやるのではなく自動で常に計測できるようにしたかった
- 本番環境では引き続きSpeedCurve
- 投機的なprecacheは外れることもある
- その失敗は通信量保存料などコストになる
- CTR(クリック率)に基づくprecache
- 実際成功率がどうだったかも見て改善していく
AMP + PWAで実現するストレスのないページロード
- 清水 智公さん(Google)
Webにアクセスするユーザが求めるもの
- 例えば乗換案内ならどういう経路がいいのかが知りたい
- 検索がしたいわけでもないしページが表示されるのを待ちたいわけでもない
- ローディング速度が遅いとユーザは離れていく
パフォーマンスの計測
- Lighthouseで計測
- ChromeのDevtoolsのAudits
- 指標
- 8種類
- Largest Contentful Paint
- ロードのタイミング
- lazyload
- 重いライブラリを削る
AMP
- AMP
- HTMLフレームワーク
- AMPが提供するHMTLタグ(WebComponents)がある
- Reactなどを使ってても部分的に使うこともできる
- VanillaJS
- すべて自前で
- JS Library(Reactなど)
- データのバインディングなどライブラリがやってくれる
- その分お作法にのっとらないといけなくなるので自由度が多少減る
- AMP
- JSを書かずにタグを書くだけで最適化されたものをつかえる
- その分JS書けず自由度が下がる
- AMPにないコンポーネントを使いたくなったらどうする?
<amp-script>- 自由度はさがるがJSを書くこともできる
- AMPはローディングを最適化する上での１つの手段として使える
AMPとPWA
- AMPはPWA対応している
<amp-install-serviceworker>- 設定周りもいい感じにやってくれる
- 自分で書くこともできる
AMPとPWAによる最適化
- AMPを使うと
- DCL-FCPが速くなる
- DCLはあまり変わらない
- AMP + PWA
- DCLまでが早くなる
- Cacheを使うことでダウンロード時間短縮
まもなくやってくるVue.js 3
- 川口 和也さん(PLAID)
Vue
- 2016/10: v2.0
- 2020/Q1: v3.0
Vue3.0
- 変更点たくさんある
Vue3.0の新機能
コンポジションAPI
- 関数ベースで提供されるAPI群
- テストがしやすくなる
- コードの見通しがよくなる
サスペンス
- 非同期処理を効率的に扱う
- 並列で複数通信して完了したらコンポーネントを表示するといった場面で効果的
Vue2.0からの変更点
Single File Component
- スコープ付きCSSの仕様変更
- Vue独自の拡張擬似クラス
>>>や/deep/はしばらく警告出すけど廃止
まとめ
Unlocking new capabilities for PWA
- 吉井 健文さん(DeNA)
PWA
Web NFC
- NFC Tagに書き込んだりできる
- 動画や音声なども保存できる
- 今はAndroidのChromeでflagを有効化すると使える
- 使うためにはpermissionが必要
- 端末の設定で無効化されていることもあるので注意
- Media Recorderで情報を記録する
デモ
エンディング講演：PWA on Windows
- 物江 修さん(Microsoft)
新しいEdge
- Edgeの種類
- 最新のEdge
- ダウンロード
- WindowsUpdate
- 日本では2020/4/1以降
- Enterpriseなどは自動更新されない
- 古い方と共存は基本できない
- レガシーEdgeとの違い
| Rendering Engine | JS Engine | |
|---|---|---|
| 旧 | EdgeHTML | Chakra |
| 新 | Blink | V8 |
WindowsにおけるPWA
- 従来
- UWPでラップしてストアからインストール
- 今後
- ブラウザからインストールできる
- PWAの動き
- タスクバーへピン留め
- スタートメニューに追加
- データ上限なし(キャッシュいくらでも入る
- ミニマルUIで戻るや検索や印刷ボタン出る
- 認証情報の継承
- 通知の受信(開発中)
- プロセスはタブ単位に見ることができる
MicrosoftによるPWAの取り組み
Microsoft Store
- Microsoft StoreからPWAを配布できる
- セルフパブリッシング
- 開発者アカウント作って申請
- 自動インデックス
- BingがクロールしてPWAを検出すると勝手に配信
- manifest.jsonがちゃんと書かれてるかチェックされる
- 現状ストアから落としてきて動くPWAはEdgeHTMLなので注意
- セルフパブリッシング
- ストアに公開して何が嬉しい？
- ダウンロードした人の属性などひろえる
- アプリ内課金
- プロモーションの機会
