Modern Webを作ろう / Progressive Web Apps と AMP
- 宇都宮 佑亮氏(google)
ModernWeb
- Modern Web is now mainstream
- 去年のGoogleIOで繰り返し言われてた
- アプリからWebに帰ってきた
ユーザが求めるもの
- 速いWeb
- 古いWeb
- ロード遅い
- レスポンシブじゃない
- コンテンツ動き回る
速いとは？
- RAIL
- Response: 0.1
- Animation: 16
- Idle: 50
- load: 1
- https://developers.google.com/web/fundamentals/performance/rail?hl=ja
- Time to Interactive
- 5S
Webサイトを早く表示するためのフレームワーク
- PRPLパターン
- Push
- Render
- 必要なものは最初に一気に
<link rel="preload" ...>
- Pre-cache
- ServiceWorkerで先読み
- Lazy-Load
- ページ下部のコンテンツはLazyLoadで(特に画像)
- polifillもある
- https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja
AMP
アプリのようにリエンゲージ
- ModernWebはホームに追加できる
- アプリのように動く
- スプラッシュ画面もある
- manifest.jsonを書くとできるようになる
- ServiceWorkerは必須
- beforeinstallprompt
- ホーム追加のプロンプトが出る直前に発火するイベント
- プロンプト出したくない場面ではこれを監視しておくといい
オフライン対応
- オフライン時はフォールバックページを返す
- ServiceWorkerで実現
プッシュ通知
- パーミッション求めるプロンプト出すタイミング注意
- サイトに入ってすぐは悪い例
フォームの入力を自動で
- CredentialManagementAPI
- ブラウザに保存したID/PWを使って勝手にログインしておいてくれる
支払いフォーム
- PaymentRequestAPI
- https://polykart.store/
ModernWebとは
- PWAとは
- 新たなUXの基準
- プッシュ通知
- ホーム画面追加
- パフォーマンス
- 常にログオン
- 簡単な支払い
Whats Next
- ios11.3からServiceWorker使える
- プッシュ通知はできないっぽい
- MicrosoftStoreにPWAアプリを出せる
メルカリにおける PWA と AMP について
- 小嶋 仁司氏(メルカリ)
Mercari Web
- 流通量1日100万点
- 商品の詳細画面が1日100万ページ増えるということ
- アプリファーストから多様化へ
AMP
- 2016/7詳細ページをAMP化
- アクセス速度は向上した
- でもgoogleの検索からアイテム詳細に遷移する導線が少ない
- 2017/11カテゴリページをAMP化
- 比較的検索されやすいところから
- 自然検索流縫う45%増(他の要因もあるが)
PWA
プッシュ通知
- 2017/8プッシュ通知を実装
- 基本的にアプリと同一の内容
- ブラウザ経由でnotificationの許可の難易度の高さ
オフライン対応
- 検証中
- 対応はハードル低い
- キャッシュ戦略が重要
- リージョンのディレクトリ問題
- ServiceWorkerのスコープの問題でうまくいかないところがある
- http://tech.mercari.com/entry/2017/12/19/workbox
今後
- US Webから着手
- 通信弱いところから
- JP Webは体制整い次第
- mobile safariどうするか
これからのWebにおけるSSR / BFF について
BFF
BFFとは
- Backends for Frontends
- フロントエンドのためのバックエンドのこと
- APIを束ねたりページを作ったり
なぜBFF?
組織的な話
歴史的な話
- 名前がついただけで新しい話ではない
- まずはフロントエンドとバックエンドに分ける
- よりコンテクストを意識してマイクロサービス化を検討
SSR
SSRとは
- Server Side Rendering
- ClientSideでHTMLを作るのと同じロジックコンポーネントを使ってサーバ側でもやること
なぜSSR
SEOのため
- googleのクローラは100%JSを実行してくれる保証はない
First View Performance
- First View Performanceをより速くする
- FirstMeaningfulPaintまでの速度を上げたい
- SPAではFirstMeaningfulPaintとTimeToInteractiveはほとんど一緒
- ClientSideRenderingだけでは時間が無駄
- そこでSSR
- BBF導入するときはSSRまでセットのほうがビジネス的メリットが大きい
