「PWA Night CONFERENCE 2020」に参加してきました

  • PWA Night CONFERENCE 2020に参加してきました。

conf2020.pwanight.jp

  • GoogleMicrosoftの中の人にも登壇していただき最新の情報を紹介してもらえて勉強になりました
  • 通常版では何かのテーマにフォーカスすることが多いですが、こういった機会で改めて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

PWA

  • 2015年にGoogleのエンジニアがブログで紹介したのが最初
  • 個別の技術は前からあったがPWAとくくることで広まった
  • 従来のWebとは違うものという印象を与えてしまって面も
    • Webの進化の流れのひとつでしかない
    • 今あるWebに少しずつ追加していくことができる

PWAのいいところ

  • ホーム画面に追加した簡単にアクセスできる
  • アプリストアからもインストールできたらいいのに
    • Progressive Web Apps in the Microsoft Store
      • PWAのアプリを見つけたら自動でMicrosoft Storeにのせられる
      • オプトアウトとかもできる
    • Googleは?
      • TWA(Trusted Web Activities)

TWA (Trusted Web Activities)

  • 特徴
    • AndroidアプリにPWAを埋め込むことができる技術
    • ブラウザとストレージが共有できる
    • Google Play Storeにのせられる
  • Webとストアでどう違うか?
    • OYOの例
    • コンバージョンはストアの方が高い
    • ログイン率も高い
  • Google Playの規約とかどうなるの?
    • 規約に沿わないといけない
    • ストアからインストールしたアプリから課金などしたら手数料も必要
  • どうつくるか

developers.google.com developers.google.com web.dev

Project Fugu

www.chromium.org

Origin Trials

developers.chrome.com

  • Webの機能は性質上必ずどこかのブラウザベンダーが先行する
  • URLをホワイトリスト化して特定のURLだけ通常のChromeでも使えるようにする

BadgingAPI

web.dev

  • インストールしたPWAにバッヂを付けられる
    • 通知何件的なあれ
  • navigator.setAppBadge(42)みたいな感じで実装する
  • FireFoxからも好感触らしいので広まってくるかも

Shortcuts

github.com

  • ホーム画面のアイコン長押しすると特定の機能に直接アクセスできる
  • Microsoftから提案
  • web app manifestで定義することになる

Web Share

web.dev

  • Webページをアプリに連携して共有したい
  • インテントを送るためのAPI
  • navigator.share

Web Share Target API

web.dev

  • 他のアプリが送ってきたインテントを受け取って何かしたい
  • web app manifestに受け取るURLなど書く
    • そこで受け取れるのでその後の処理を実装する

web.dev

SMS Receiver API

web.dev

  • インドなんかはほとんどのサービスが電話番号で認証
    • SMSでワンタイムコードを受け取って認証
  • OTPを入力するのを簡単にするAPI
  • GoogleAppleと交渉して進行中
  • Appleの提案
    • autocomplete="one-time-code"

github.com

Clipboard API

web.dev

  • クリップボードに追加された画像も扱えるようにする
  • パスワードコピーしてて勝手に扱われるようなことあったら困る
    • ユーザの許可がないと扱えないように

Contact Picker

web.dev

  • アドレス帳の情報を扱うAPI
    • ユーザにWebに渡したい情報を選んでもらってそれを扱う
    • ネイティブアプリだとまるごとサーバにアップロードなんてあるけどWebではそんなことはできないように

Native File System

web.dev

  • File System APIというのもあった
    • Chromeだけで使えた
    • 特定の領域のFileだけを使える
  • OSのファイルシステム全てにアクセスできる
    • ユーザが選んだファイルであればどこにあるものでもアクセスできる

Web Authentication

developers.google.com

  • バイス公開鍵暗号方式を組み合わせてセキュアな認証を実現する
  • セキュリティキーなどがキーペア生成して公開鍵をアプリへ
  • スマホを認証器として使うと生体+所持の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

MiniApp

  • アプリの中にアプリをインストールできるエコシステム
  • WebViewでWebアプリの中にアプリをインストールできる
  • この機能を持ったアプリをスーパーアプリと呼ばれる
  • 仕様の標準化が進んでいる

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 〜こえのブログ最新事例〜

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使ってキャッシュ
  • Perf Budget
    • 最初ははやくてもだんだん遅くなってくる
    • LightHouseなどで継続的な計測
      • 点数よりもメトリクスが重要
      • 競合と比較
        • 20%はやいと体感できるレベルで違う
    • 目標値を設定
      • FCPやTTIまでの時間
      • リソースのファイルサイズ
      • この数値(予算)を超えないようにしていく
      • 超える場合は予算を増やしたり改善を目指したり
    • CIで回して変化があったらすぐに判断できるようにする
  • Writing Tests
    • unit testing
    • visual refression tesingしてる
  • Accessibility
    • color contrast
      • 屋外で見づらいとかみんな関係あるところ
    • Accessibility Tools
      • Accessibility TreeというChrome拡張
      • VisBugというChrome拡張
    • キーボードのAccessibility
      • どこにいるかoutlineが表示されてるか
      • modal開いた時にそのなかで操作できるか
    • prefers-reduces-motion
      • アニメーション無効化してる人にはその対応も
    • DarkMode
      • prefer-color-schemesで切り替え
  • Wake Lock
    • 無操作でも画面が暗くならないようにする機能

日経電子版のモバイル/PC版統合と今後の取り組み

日経電子版リニューアル

  • 2010/3創刊
  • 2019/10トップ画面を中心にリニューアル
  • PCとモバイルの統合

モバイル版とPC版

  • モノリスな構成
    • middlewareできゃっしゅなど
  • 2017年モバイル版のみリニューアル
    • サーバサイドをマイクロサービス化
    • Fastlyでルーティング

課題

  • PC版とモバイル版でアーキテクチャが変わった
    • 開発チームが分断
    • なにかするために両方でやらないといけない
    • 業務知識も分散
  • PC版パフォーマンス低下
    • 10年運用しているとパフォーマンス低下は避けられない
  • デザインと機能の一貫性
    • PC版とモバイル版でカラースキームやコンポーネントが統一されていない
    • どちらかにあったもう片方にない機能

課題の改善

  • 目指す姿
    • Fastly + マイクロサービスで統一
    • 高いパフォーマンス
    • 生産性の高いチーム
    • 一貫性のあるデザイン機能
  • 統合プロジェクトの第一ゴール
    • トップ画面の統合
  • パフォーマンス
    • できる限りサーバーサイドでレンダリング
    • 新規のコードはTypeScriptで統一
      • 既存部分も徐々に移行
    • handlbarsをやめてpreact(サーバーサイドでしか使ってない)
    • WebComponentsを採用
      • コンテンツの性質上動的なものが少ないのでFWは重厚すぎる
    • ServiceWorkerフルスクラッチから徐々にWorkbox
  • リリースは無事できたが思っていたよりパフォーマンス上がらず
  • パフォーマンスのモニタリング
    • SpeedCurveだけでなくLighthouseCIも導入
    • CIでCircleCIからLighthouseを動かすようにする
      • 手動でやるのではなく自動で常に計測できるようにしたかった
    • 本番環境では引き続きSpeedCurve
  • 投機的なprecacheは外れることもある
    • その失敗は通信量保存料などコストになる
    • CTR(クリック率)に基づくprecache
    • 実際成功率がどうだったかも見て改善していく

AMP + PWAで実現するストレスのないページロード

Webにアクセスするユーザが求めるもの

  • 例えば乗換案内ならどういう経路がいいのかが知りたい
    • 検索がしたいわけでもないしページが表示されるのを待ちたいわけでもない
    • ローディング速度が遅いとユーザは離れていく

パフォーマンスの計測

  • Lighthouseで計測
  • 指標
    • 8種類
    • Largest Contentful Paint
  • ロードのタイミング
    • lazyload
  • 重いライブラリを削る

AMP

  • AMP
    • HTMLフレームワーク
    • AMPが提供するHMTLタグ(WebComponents)がある
    • Reactなどを使ってても部分的に使うこともできる
  • VanillaJS
    • すべて自前で
  • JS Library(Reactなど)
    • データのバインディングなどライブラリがやってくれる
    • その分お作法にのっとらないといけなくなるので自由度が多少減る
  • AMP
    • JSを書かずにタグを書くだけで最適化されたものをつかえる
    • その分JS書けず自由度が下がる
  • AMPにないコンポーネントを使いたくなったらどうする?
    • <amp-script>
    • 自由度はさがるがJSを書くこともできる
  • AMPはローディングを最適化する上での1つの手段として使える

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

  • バイスにアクセスするローレベルなAPIも出てきている

Web NFC

  • NFC Tagに書き込んだりできる
    • 動画や音声なども保存できる
  • 今はAndroidChromeでflagを有効化すると使える
  • 使うためにはpermissionが必要
    • 端末の設定で無効化されていることもあるので注意
  • Media Recorderで情報を記録する
    • 大きい情報はNFCに記録できないのでindexedDBなどに入れておく
    • NFC Tagの一意なIDがとれるのでそれをキーにするとよい

デモ

vimeo.com

github.com

エンディング講演:PWA on Windows

新しい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なので注意
  • ストアに公開して何が嬉しい?
    • ダウンロードした人の属性などひろえる
    • アプリ内課金
    • プロモーションの機会

PWA builder

www.pwabuilder.com

  • 非PWAアプリに対して設定ファイルなどを生成してくれるサービス
    • PWA化したいページのURLを入力するとマニフェストを生成してくれる
    • イコン画像もアップロードすることで必要なサイズを生成してくれる
    • 設定ファイルの内容もGUIで指定できる
    • ServiceWorkerのコードも生成できる