|
Description:
|
|
# ep45 Monthly Web 201811
第 45 回のテーマは 2018 年 11 月の Monthly Web です。
## Show Note
### Chrome 動向
- Stable: 70.0.3538.110
- Chrome Dev Summit
- *Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web*
- https://blog.chromium.org/2018/11/chrome-dev-summit-2018-building-faster.html
- *Chrome Dev Summit 2018 Day 2: Ready for the next movement*
- https://blog.chromium.org/2018/11/chrome-dev-summit-2018-day-2-ready-for.html
- From Low Friction to Zero Friction with Web Packaging and Portals
- https://youtu.be/Ai4aZ9Jbsys
- virtual-scroller: Let there be less (DOM)
- https://youtu.be/UtD41bn6kJ0
- State of Houdini
- https://youtu.be/lK3OiJvwgSc
- Using WebAssembly and Threads
- https://youtu.be/zgOGZgAPUjQ
- State of the Union for Speed Tooling
- https://youtu.be/ymxs8OSXiUA
- Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
- https://youtu.be/25aCD5XL1Jk
- Chrome Dev Summit 2018 - Day 1 - Sabarinathan Masilamani - Medium
- https://medium.com/@nathan5x/https-medium-com-nathan5x-chrome-dev-summit-2018-day-1-e7a68ea4321a
- Updates
- *Signed HTTP Exchanges*
- https://developers.google.com/web/updates/2018/11/signed-exchanges
- blog
- *The Writable Files API: Simplifying local file access*
- https://developers.google.com/web/updates/2018/11/writable-files
- *Our commitment to a more capable web*
- https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html
- *Web Audio, Autoplay Policy and Games*
- https://developers.google.com/web/updates/2018/11/web-audio-autoplay
- Chrome 71 から、音声の自動再生ポリシーが変わる件の詳細
- ロード時に勝手に再生されるうざい Autoplay を止める
- 行動から、そのページに Autoplay を許すかを Media Engagement Index (MEI) に記録
- 例えば恒常的に 7 秒以上再生するなど
- それ以外は、 UserGesture が無いと resume できない
- Proxy で UserGesture を全部 resume に繋げるコード例が紹介されている
- What's New In DevTools (Chrome 72)
- https://developers.google.com/web/updates/2018/11/devtools
- Visualize performance metrics in the Performance panel.
- Highlight text nodes in the DOM Tree.
- Copy the JS path to a DOM node from the DOM Tree.
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu.
- Intents
- *Ship: CSS Properties and Values API Level 1*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/QjcyhPZ_sNI/SuB-GuNPDAAJ
- `CSS.registerProperty({name: "--my-font-size", syntax: "", initialValue: "0px"})`
- カスタムプロパティをアニメーションしたりできるようになる。
- Ship: IndexedDB database info enumeration function
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/xSf7B0aVxnI/0E05ZEB6DAAJ
- *Ship: Intl.ListFormat*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/_TllF9146H0/PgI3cqEMBAAJ
- `new ListFormat("en").format(["Alice", "Bob"]); // "Alice and Bob"`
- `new ListFormat("zh").format(["譚永鋒", "劉新宇"]); // "譚永鋒和劉新宇"`
- Ship: EME Encryption Scheme Query
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/T5FcVK8lwmk/uT-c4OciBgAJ
- Ship: Change default style of `` to [display: none]
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/-dmig28jgAo/zPP4gPlnBwAJ
- 今は display: inline なので、仕様に合わせる
- *Ship: First Input Timing*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LN92hkaKCzw/Y-ryVxu5AgAJ
- PerformanceObserver で First Input Timing が取れるように
- これにより First Input Delay が計算できる
- Chrome は、指標の 1 つとして First Input Delay を強く啓蒙しているので、優先的に ship したいらしい
- Ship: EME Extension - Policy Check
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/w0jNaAhyTV0/3oDkR_ASAQAJ
- Implement and Ship: Navigator Language for Workers
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/i8oTgTx2vxE/NKL6z6N1BgAJ
- Implement and Ship: fix IDL for PerformanceMark, PerformanceMeasure, and performance attribute in workers
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Z3RKovFsA1s/hOxO2vw3AQAJ
- Implement and Ship: Network Error Logging request_headers and response_headers fields
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/nvjV8p_DFM8/KzgQBKjmAAAJ
- Implement and Ship: RTCPeerConnection.connectionState and RTCPeerConnection.onconnectionstatechanged
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/lxHPNYoaEU8/0JFwF0ipCQAJ
- Implement and Ship: RTCRtpReceiver.getParameters()
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LXJUzctTVfM/p4J-WrzbBgAJ
- Implement and ship: DOMMatrixReadOnly.scaleNonUniform()
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/BJJKDby5p7w/vxmb9bnGAgAJ
- Implement and Ship: Additional encodings.networkPriority field in RtpSender[Get|Set]Parameters
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/bVNynDp9PHo/4D96etzMAAAJ
- Implement: FetchEvent Worker Timing
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/WS17dXHV6xQ/rOnUbU4CCgAJ
- *Implement: Contacts API*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/brKChSa9_d0/GmzVbvYcAAAJ
- コンタクト情報を取得する API
- https://github.com/beverloo/contact-api
- Implement: Feature policy control over `document.domain`.
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Ff6Ywg5vnh4/VbDH4X6wBQAJ
- *Implement: Form-associated custom elements*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/HW8j_JLLiPo/V_SmVZkwBgAJ
- Implement: Additional encodings.networkPriority field in RtpSender[Get|Set]Parameters
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/7SRh6Pl4iMA/MXPbE3FpBgAJ
- Implement: User Idle Detection
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/OuwzBmH02M4/5ChXdXZQBwAJ
- Implement: WebRTC RTCDtlsTransport object
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/HulsXXnvGdw/i7mxN_eABgAJ
- Implement: Storage Quota Usage Details
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/CwAwSbTUmeg/27O5K12iBgAJ
- Implement: Bidi Caret Affinity
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/NN6zKiULN4U/DaCDtRq9BAAJ
- Experiment: Configurable WebRTC jitter buffer max size
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/hE2B1iItPDk/d182qqdwAAAJ
- *(Reverse) Origin Trial for old Web Components*
- https://groups.google.com/a/chromium.org/forum/#!topic/experimentation-dev/lrmxlU-Ddxk
- Web Components の deprecate を Origin Trials で延命しながら行う件
- *Experiment: HrefTranslate HTMLAnchor attribute*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/4DZIDt9o1ME/L4878LGOBwAJ
- hrefTranslate でリンク先のコンテンツの言語を指定できる
- サーバ側で翻訳機を通しているコンテンツの UX がよくなるらしい
- Continue Experimenting: Web XR Device API
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/vWg9cs2t648/QaGw3B3cAAAJ
- Change:
- Unship:
- Remove:
- Deprecate and Remove: Rendering FTP resources.
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/eopgOoY1QLs/e1tIefOxAAAJ
- *Undeprecate: webkitURL on Window*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/EEo3kba4h2g/V7UbFAuoBQAJ
- deprecation がうまくいかなかった
- https://github.com/whatwg/url/issues/135
- https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/EsJE9wb321I
- *Out of Renderer CORS (Cross-Origin Resource Sharing) is now on 50:50 canary/dev finch*
- https://groups.google.com/a/chromium.org/forum/#!topic/network-service-dev/VdU2lGH_Mag
- fetch は renderer process から browser process に依頼される
- CORS チェックは renderer 側でやっていた
- これを browser 側に持っていく
- つまり CORS を off the main thread する
- browser 側でやることで、 renderer を騙せたとしても cors バイパスが成立しにくくなる
- by toyoshima-san
- Team Weekly Snippet
- Chrome Storage Team Weekly for 11/06/2018
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/u141Iev0HpI/Xw0lJDRmBwAJ
- v8
- Faster async functions and promises
- https://v8.dev/blog/fast-async
- async/await まわりの高速化とデバッグしやすさについて
- Other
- Streaming in the Shadow Reader
- https://amphtml.wordpress.com/2018/11/05/streaming-in-the-shadow-reader/
- PageSpeed Insights, now powered by Lighthouse
- https://webmasters.googleblog.com/2018/11/pagespeed-insights-now-powered-by.html
- *Developer Preview of better AMP URLs in Google Search*
- https://amphtml.wordpress.com/2018/11/13/developer-preview-of-better-amp-urls-in-google-search/
- AMP の Signed HTTP Exchange 対応の話
- https://g.co/webpackagedemo
- 検索のデモも公開されている
- *web.dev 公開*
- https://web.dev/
- Web のプラクティスを学ぶ新しいサイト
- ログインすると Lighthouse の結果を保存できる
- .dev ドメイン自体が取得可能になっていく
- https://get.dev/
- まずは trademark 持ってる人 (1/16~2/19)、そのあと一般
- 社内で .dev 勝手に使ってる人は対応
- web.dev status update, 11/12/18
- https://medium.com/dev-channel/web-dev-status-update-11-12-18-f9b42a693f65
- web.dev status update, 11/14/2018
- https://medium.com/dev-channel/web-dev-status-update-14th-nov-2018-18708787f239
- web.dev status update, 29th Nov 2018
- https://medium.com/dev-channel/web-dev-status-update-29th-nov-2018-8904b90bcdd2
- *Squoosh*
- https://squoosh.app/
- https://github.com/GoogleChromeLabs/squoosh
- WebP なども対応した画像圧縮ツール
- WASM でつくりブラウザで動く
- 確認しながらパラメータを決める GUI つき
- Progressively AMPlify EC-CUBE
- https://amphtml.wordpress.com/2018/11/20/progressively-amplify-ec-cube/
- AMP Project's new governance model now in effect
- https://amphtml.wordpress.com/2018/11/30/amp-projects-new-governance-model-now-in-effect/
- [ACTION REQUEST] Tell the World What You're Shipping in 72
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/mY-7hPEMq2k/0zwMRZEQAQAJ
- VisBug
- https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc
- https://medium.com/dev-channel/visbug-101-749f26a485c8
### Firefox 動向
- Stable: 63.0.3
- Updates
- *Encrypted SNI Comes to Firefox Nightly* (取りこぼし)
- https://blog.mozilla.org/security/2018/10/18/encrypted-sni-comes-to-firefox-nightly/
- ClientHello に含まれる SNI は平文なので、どこに接続しようとしてるかは漏れる
- これも暗号化したいので DNS で公開鍵を送って DH する
- それだけだと結局 DNS 見れば接続先はわかる
- そこで DoH ですよという話
- 提案は Kazuho さんたち
- *Next Steps in DNS-over-HTTPS Testing - Future Releases*
- https://blog.mozilla.org/futurereleases/2018/11/27/next-steps-in-dns-over-https-testing/
- DoH (Cloudflare) を使うと一定の改善は見込めた
- CDN は一番近い Edge を DNS で解決するが、 DoH だとそれがうまくいかない
- これをどうするか、 Akamai と協力して Firefox でテストしていくことに
- Intents
- Intent to ship: window.event
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/riVG9FqN9iM/U4PZJb0NBQAJ
- Intent to ship: set keyCode or charCode of "keypress" event to the other's non-zero value
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/IWLLJmoGroA/Im3fQSoNBQAJ
- Intent to ship: stop dispatching "keypress" events when pressed key (key combination) does not introduce text input
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/E8DyIJBhu1g/dggFj14MBQAJ
- Intent to ship: dispatching "keydown" and "keyup" events during IME composition
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/DrYa0gDxI5Q/5odWBZcLBQAJ
- *Implement and ship: CSS environment variables*
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/EVKyR1B87T0/_l-_qK8SAAAJ
- Iimplement and ship: Unprefix -moz-user-select, unship mozilla-specific values.
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/XfKl9Jt7ZQ8/2-wcUBEzBwAJ
- Implement and ship: overflow-wrap: anywhere
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/B36jo-tK9Wk/tssG8exBBgAJ
- Implement and ship: img decode API support
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/7l8FJCEwdaI/-C9kVDXzBQAJ
- Implement: Support Referrer Policy for ` |