Web 新プロダクト / 新技術#

web.dev というサイト
- https://web.dev
- フレームワーク、パフォーマンス、Web各種技術など載っているグーグルが作ったまとめサイト
- 全部無料で学べる
- 今フレームワークはReact.jsだけけど、今後追加予定
- 実践 Codelab、その場で試すことはできます
- 翻訳は今進行中らしい
Lighthouse Performance Budgets
- https://developers.google.com/web/tools/lighthouse/audits/budgets
- Lighthouseにパフォーマンス時間 / ファイル大きさ予算を設定し、Lighthouseが測ってくれる
PWA Desktop
- PWA 今デスクトップOSにインストールできます
Trusted Web Activity
- https://developers.google.com/web/updates/2019/02/using-twa
- Chrome Custom Tab のアップグレード版、タイトルバーがない
- よく見られるユースケースは、現存のアプリの中で、ファミリーアプリのウェブ版を入れて、ネイテイブ感を作る
- ウェブページにはschema urlでアプリにメッセージ送れます
- アプリは URL の後ろにパラメータ付けるならウェブページにメッセージ送れます
Perception Toolkit
- https://web.dev/perception-toolkit
- Shape Detection APIを使ってるツールキット
- バーコード、実物、画像を取得してウェブサイトのmetaから取った情報と比較して、関連カードを出す
- APIまだ使えないブラウザにWeb Assemblyを使う、互換性を保つ
Puppeteer with Firefox
- Firefoxが使えるようになりました
- npm i puppeteer-firefox

Web にもうすぐ使えるもの / 新Web API / 新 JavaScript API など#

Chrome Only (w3cにまだ書いてない)#

Lazy loading
- 画像とiframeの中 loading=“lazy” のアトリビュートを追加すると遅延ロードくれます
- Chrome 75 から
Portals
- https://web.dev/hands-on-portals
- 新たな要素、iframeみたい、埋め込む内容に切り替えるスムーズ体験を提供する
- Chrome Canary 使える
Web Packaging
- https://github.com/WICG/webpackage
- ウェブサイトをサインしてパッケージして、どこでもデプロイして、ブラウザはどこでも同じサイトとみなす（p2pの感じ）
- 例はまだない
Paint Holding
- 同じサイト画面遷移時白い画面は出ない
- Chrome Canary 見れる
Cookie は Chrome 76 からちょっと変わる
- https://web.dev/samesite-cookies-explained
- Same-Site使っていないCookieはSame-Site=LAXを適用する

Chrome今開発中もの

関連Session： What’s New with Chrome and the Web (Google I/O ’19)

独自APIを開発するから海外でも好評得ていないらしい…

Web API#

開発中
- ウェブシェア -> Web Share API (Shipped) -> Web Share Target (v2) (Working)
- media control on System level -> mediaSession API (Shipped)
- バーコード、画像、実物探知 -> Shape Detection API (FaceDetect / BarcodeDetect both shipped in Chrome Canary)
- App Badging (アプリアイコンの数字) -> window.Badge / window.ExperimentalBadge (Origin Trial 78)
- Wake Lock -> (Screen wake lock / System wake lock) -> Wake Lock (In Development)
- ファイル -> File Picker -> chooseFileSystemEntries (提案中 / In Development)
- シリアルデバイスサクセス（プリンターなど） -> Serial API (提案済み)
- HID デバイスアクセス -> WebHID (提案済み / In Development)
- 連絡帳サクセス -> Contacts Picker (提案済み / Experimenting)
- インストールしたフォントをアクセス -> 提案済み / In Development
もうすぐ実装します
- Clipboard API with Image （クリップボードAPIに画像も添付できる）
- SMS基づくOTP検証
- Notification Triggers API （時間基づくプッシュ通知）

上記内容年内実装 Chrome で試すまたフィードバックは下記サイトまで https://developers.chrome.com/origintrials

Web API は Project huguで確認できます Project hugu

Web API スケジュール

関連Session： Unlocking New Capabilities for the Web (Google I/O ’19)

JavaScript API / Syntax#

Class のプライベート属性 (実装済み) - working on privatter method and getters and setters
String.prototype.matchAll (実装済み)
Number spearater (Chrome 75)
BigInt (Chrome 74 と Firefox nightly と node 実装済み & transpiler available)
Array.prototype.flat (in chrome firefox safari node)
Entries から Object に転換する Object.entriesの逆操作 (in chrome firefox safari node )
globalThis (in chrome firefox safari node )
Array.sortの安定性を標準の中に書くように努力してる
多言語について
- Intl.RelativeTimeFormat -> today yesterday tomorrow (in chrome firefox node)
- Intl.ListFormat -> ex. A, B or C (in chrome node)
- Intl.DateTimeFormat -> ex. May, 5 (in chrome)
- Intl.Locale -> Internal Translation (in chrome node)
Promise.allSettled (in chrome 76 nightly) / Promise.any
WeakRef and finalizers (in chrome with flags) & 標準の中に書くように

関連Session： What’s new in JavaScript (Google I/O ’19)

経験シェアとパフォーマンス#

Chrome はフレームワークなどスケジュールAPIを提供したい、連続実行、レンダリングの時もユーザーの操作受けるように。

Scheduling API

Google はパフォーマンスにやり方とアドバイス

段階的SSR
JS完全ロード前のクリック事件を取るように
一定サイズの初期JS
インタラクション駆動型遅延ロード
依存関係グラフ、宣言型機能ロード、同時にデータを取る

Google Important Piece

Google のパフォーマンスアドバイス

遅延ロード
レスポンシブ画像（ピクセル密度による画像をロードする）
画像CDN
サードパーティのJSを遅延する
高価なライブラリを削除する
コード分割
Web Fontの白いフラッシュを避ける
Prefetch
Preconnect
Preload
クリティカルCSS（はじめの画面だけ必要のCSSをロードする）
gzip -> Brotli
端末、ブラウザによるJSをロードする

また、Lighthouse を使って、性能予算を設定する

Performance Suggestion

関連Session：
Elevating the Web Platform with the JavaScript Framework Community (Google I/O ’19)
Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19)