ep68 Monthly Web 202005
- published_at
- 2020-06-01
- guest
- @myakura
- toc
-
headings
Theme
第 68 回のテーマは 2020 年 5 月の Monthly Web です。
Show Note
Chrome 動向
- Stable: 83
-
Updates
-
New in Chrome 83
- https://developers.google.com/web/updates/2020/05/nic83
- Trusted types
- Updates to form controls
- Origin trials
- Measure memory with
measureMemory()
- Updates to the Native File System API
- New cross-origin policies
- Web vitals
- Barcode Detection API
- @supports CSS selectors.
- New ARIA annotations for comments, suggestions, and text highlights (similar to
<mark>
). - prefers-color-scheme
- modules in shared workers.
-
Chromium Blog: Chrome 84 Beta: Web OTP, Web Animations, New Origin Trials and More
- https://blog.chromium.org/2020/05/chrome-84-beta-web-otp-web-animations.html
- Web OTP API
- Web Animations
- App shortcuts
- Autoupgrade Image Mixed Content
- Blocking Insecure Downloads from Secure (HTTPS) Contexts
- ReportingObserver on Workers
- Resize Observer Updates
- revert Keyword
- Unprefixed Appearance CSS Property
- Unprefixed ruby-position CSS Property
- Web Authenticator API: Cross-origin iframe Support
- Private Methods and Accessors
- Weak references
-
Deprecations, and Removals
- @import rules in
CSSStyleSheet.replace()
Removed - Remove TLS 1.0 and TLS 1.1
- @import rules in
-
New Origin Trials
- Cookie Store API
- Idle Detection
- Origin Isolation
- WebAssembly SIMD
-
Completed Origin Trials
- Content Indexing API
- Wake Lock API Based on Promises
-
Deprecations and removals in Chrome 84
- https://developers.google.com/web/updates/2020/05/chrome-84-deps-rems
- @import rules in CSSStyleSheet.replace() removed
- Remove TLS 1.0 and TLS 1.1
-
What's New In DevTools (Chrome 84)
- https://developers.google.com/web/updates/2020/05/devtools
- Fix site issues with the new Issues tab
- View accessibility information in the Inspect Mode tooltip
- Performance panel updates
- Layout Shift events in the new Experience section
- More accurate promise terminology in the Console
- Support for the revert keyword
- Image previews
- Color Picker now uses space-separated functional color notation
- Deprecation of the Properties pane in the Elements panel
- App shortcuts support in the Manifest pane
- Chromium Blog: Introducing Web Vitals: essential metrics for a healthy site
- Chromium Blog: Protecting Chrome users from abusive notifications
-
Chromium Blog: Resuming SameSite Cookie Changes in July
- https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html
- 延期されていた SameSite=Lax by default を 7/14 の M84 で再開する計画
- Chromium Blog: Protecting against resource-heavy ads in Chrome
- Chromium Blog: A safer and more private browsing experience with Secure DNS
- Chromium Blog: Celebrating 10 years of WebM and WebRTC
- Chromium Blog: web.dev LIVE: A digital event over three days and three time zones
-
Web Vitals
- https://web.dev/vitals/
- LCP + FID + CLS
-
Optimize Largest Contentful Paint
- https://web.dev/optimize-lcp/
- View Port の最大コンテンツ要素が表示されるまでの時間
- Preload や SW によるキャッシュヒットなどが有効
-
Optimize First Input Delay
- https://web.dev/optimize-fid/
- ユーザの操作に応答できるようになるまでの時間
- JS の実行を減らす
- async/defer, dynamic import, minimize
-
Optimize Cumulative Layout Shift
- https://web.dev/optimize-cls/
<img>
<video>
<iframe>
などが表示されレイアウトがずれること- あらかじめ領域を確保しておくことで防げる
<img>
では width/height から自動でアスペクト比が算出される- font の FOUT/FOIT も preload / font-display: optional
- Defining the Core Web Vitals metrics thresholds
- Chromium Blog: The Science Behind Web Vitals
- Tools to measure Core Web Vitals
- Getting started with measuring Web Vitals
- Best practices for measuring Web Vitals in the field
-
Official Google Webmaster Central Blog: Evaluating page experience for a better web
- https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
- Core Web Vitals のスコアを Page Experience に入れる
- Top Story に乗る条件から AMP を外す
- という変更を来年以降に行い、ロールアウトの半年前には再度通知する
-
Making your website "cross-origin isolated" using COOP and COEP
- https://web.dev/coop-coep/
- Why you need "cross-origin isolated" for powerful features
-
Chromium lands Flexbox gap
- https://web.dev/flexbox-gap/
- Flexbox でも Grid の gap プロパティが使えるように
-
Persistent storage
- https://web.dev/persistent-storage/
- Storage API の永続キャッシュと権限について
-
権限の付与は以下を考慮して Chrome が自動でプロンプトを出す
- site-engagement があるか
- installed/bookmarked されてるか
- notification permission があるか
- 永続としてマークされると、領域が圧迫されても消えない
- 実際領域の圧迫で消えることはほとんどない
- ユーザが自分で消すことの方が一般的
-
Handling Heavy Ad Interventions
- https://developers.google.com/web/updates/2020/05/heavy-ad-interventions
- 重たい広告を自動で削除する Intervention について
-
基準
- 60s 以上メインスレッドを占有
- 30s のウインドウ内で 15s 以上メインスレッド占有を
- 4MB 以上帯域を占有
- 削除したら Intervention Report を飛ばす
-
New in Chrome 83
-
Intents
- Ship: Gutters in flexbox: row-gap and column-gap properties
- Ship: Forced Colors Mode
-
Ship: App Shortcuts Menu
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/FgzYX7AFbUQ/f2i0-f-BAQAJ
- installed app にショートカットアイコンを追加できる
- Ship: Promise.any
- Ship: Logical Assignment
- Ship: Layout Instability Shifted Element Surfacing
- Ship: Event Timing
- Ship: Web Bluetooth Remote GATT Characteristic Write With/Without Response
-
Implement and Ship: CSS advanced
attr()
function - Implement and Ship: Update the behavior of the "disabled" attribute for HTMLLinkElement
- Implement and Ship: Battery status API gated by feature policy
-
Implement and Ship: WebAuthn
getPublicKey[Algorithm]()
andgetAuthenticatorData()
-
Intent to Implement and Ship: WebAuthn
getPublicKey[Algorithm]()
andgetAuthenticatorData()
- Implement and Ship: CSS Color Adjust: Remove 'only' and support used 'dark' for preferred 'light' for color-scheme
-
Prototype: Federated Learning of Cohorts
- https://groups.google.com/a/chromium.org/g/blink-dev/c/DpZZG5K1PWs/m/IJT1W69wCAAJ
- ユーザの興味関心を荒く収集し Ad. サーバなどに送るための API
- Prototype: optional total field in PaymentRequest
-
Prototype: Beforematch event
- https://groups.google.com/a/chromium.org/g/blink-dev/c/QKUZ_ALJdM8/m/d0Qu1wJcAQAJ
- 検索や id, scroll to text frag でヒットした時に移動する前に発火するイベント
- Prototype: Subresource loading with Web Bundles
- Prototype: API for receiving multicast
- Prototype: Client-side video editing (MediaBlob)
-
Prototype: CSS advanced
attr()
function (Was: Intent to Implement and Ship) - Prototype: Adding adaptivePtime to RTCRtpEncodingParameters.
-
Experiment: Cookie Store API
- https://groups.google.com/a/chromium.org/g/blink-dev/c/bBdx2xIB7OQ/m/k2fMXf-WAAAJ
- document.cookie の代替 API
- document/service worker 両方から触れる
- sw からはより細かい粒度で判断できる
- 将来的に cookie を無くし state token していく上での布石でもある(cooki を考え直す機会)
- Experiment: Origin isolation
- Experiment: Trust Token API
-
Experiment:
fetch()
upload streaming- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/l7QI1bsq80Y/Z1TJ0nplAQAJ
- ReadableStream で chunked upload
- Experiment: QuicTransport
- Extend Origin Trial: performance.measureMemory
- Extend Experiment: PointerLock unadjusted mouse movement
- Change:
- Unship:
- Remove:
-
Blink launch process update
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/R8oZsw6RLGs/l0KOUyuWAQAJ
- intents の公開や Chrome Status への反映などを行ってきた
- chromium を利用したプロジェクトや、関わる人も多くなった
- Chrome Status を Web Status (仮称)として刷新することに
- ドメインも変わる
- Chrome の UMA で取得するメトリクスは chromestatus.com で維持
- Planning isolation requirements (COOP/COEP) for SharedArrayBuffer
- A few clarifications for the API owners process
- Important: change to the "browser signals" section of the intent-to-ship process
-
v8
- V8 release v8.3 · V8
-
Up to 4GB of memory in WebAssembly · V8
- https://v8.dev/blog/4gb-wasm-memory
- WASM で 4G までのメモリが扱えるようになった
- そこに向かって発生した変更のまとめ
- 64bit メモリのサポートにより 4G 超えるアクセスも計画にある
- Understanding the ECMAScript spec, part 4 · V8
- High-performance garbage collection for C++ · V8
-
Other
- Preparing for AppCache removal
- More variable font options for the macOS system-ui font in Chromium 83
- Get things done quickly with app shortcuts
- Wake Lock API case study: 300% increase in purchase intent indicators on BettyCrocker.com
- Detect inactive users with the Idle Detection API
- What's New in Lighthouse 6.0
- Web Animations API improvements in Chromium 84
- Profiling Web Audio apps in Chrome
- AMP + Web Vitals - a better web, together - The AMP Blog
- Creating accessible sites with AMP - The AMP Blog
- Web Stories, powered by AMP - The AMP Blog
- Infinite recommendations with a new and improved amp-next-page - The AMP Blog
- AMP: a well-lit path to optimizing for Google's page experience signal - The AMP Blog
Firefox 動向
- Stable: 76
-
Updates
-
Firefox 76: Audio worklets and other tricks - Mozilla Hacks - the Web developer blog
- https://hacks.mozilla.org/2020/05/firefox-76-audio-worklets-and-other-tricks/
-
Fresh in Dev Edition: CSS Compatibility Panel
- CSS のブラウザ対応が表示される
- Audio worklets
- devtools updates
- Firefox 77 Beta and Developer Edition are out, COVID-19 continues to affect the development
- These Weeks in Firefox: Issue 74 - Firefox Nightly News
-
Firefox 76: Audio worklets and other tricks - Mozilla Hacks - the Web developer blog
-
Intents
- Ship: "JS BigInt to I64 integration" WebAssembly proposal
- Ship: :read-only / :read-write pseudo-classes
- Ship: RegExp Named Capture Groups
- Ship: ParentNode#replaceChildren
- Ship: and Link: rel=preload support on Nightly and Early Beta
- Prototype: CSS aspect-ratio in [css-sizing-4]
- Prototype: ::file-chooser-button
- Prototype: Schemeful Cookie Same-Site
- Prototype: WebAssembly SIMD
-
Other
- May 2020 CA Communication - Mozilla Security Blog
- Welcome Adam Seligman, Mozilla's new Chief Operating Officer - The Mozilla Blog
- High Performance Web Audio with AudioWorklet in Firefox - Mozilla Hacks - the Web developer blog
- Gecko Web Platform Update (2020-05-15)
- Soft code freeze for Firefox 78 starts May 28
- Protecting Search and Browsing Data from Warrantless Access - The Mozilla Blog
- The USA Freedom Act and Browsing History - The Mozilla Blog
- Mozilla's journey to environmental sustainability - The Mozilla Blog
- Sharing data on Italy's mid-pandemic internet outage - Data@Mozilla
- How does the Glean SDK send gzipped pings - Data@Mozilla
- Extensions in Firefox 77
- L10n Report: May 2020 Edition
- An opportunity for openness and user agency in the proposed Facebook-Giphy merger - Open Policy & Advocacy
- Mozilla Mornings on advertising and micro-targeting in the EU Digital Services Act - Open Policy & Advocacy
- Today is Global Accessibility Awareness Day! - Mozilla Accessibility
- Firefox Reality for HoloLens 2
- Firefox Reality 10
Safari 動向
- Stable: 13.1
-
Updates
-
Release Notes for Safari Technology Preview 106
- https://webkit.org/blog/10580/release-notes-for-safari-technology-preview-106/
- Enabled async frame and overflow scrolling by default on macOS (r260276)
- Implemented
jump-*
functions forsteps()
timing functions (r261046) - Added support for
:where()
pseudo class (r260319) - Fixed
:is()
and:where()
to not allow pseudo-elements when parsing (r260338) - Fixed border-radius failing to clip composited iframe contents (r260950)
- Enabled BigInt (r260345)
- Changed BigInt constructor to accept larger integers than safe-integers (r260863)
- Added support for Intl.RelativeTimeFormat (r260349)
- Redesigned for-of iteration for arrays (r260323)
- Enabled using credentials for same-origin CSS mask images (r260598)
-
Release Notes for Safari Technology Preview 107
- https://webkit.org/blog/10585/release-notes-for-safari-technology-preview-107/
- Changed the initial value of transform-box to be view-box to fix some SVG animations (r261752)
- Changed the cursor to update during the rendering steps, rather than on a 20ms timer (r261741)
- Fixed repaint issues when the login field collapses on music.apple.com (r261979)
- Fixed text clipped when rendered with fonts which have a negative line gap metric (r261573)
- Fixed table sizing when max-width is used (r261924)
- Changed to ignore a poster set after playback begins (r261341, r261576)
- Implemented Intl.Locale (r261215)
- Implemented BigInt.asIntN and BigInt.asUintN (r261156, r261199)
- Enabled logical assignment operators (r261728)
- Ensured IntlCollator.prototype.resolvedOptions returns relevant locale extension keys in alphabetical order (r261182)
- Enabled clipboard API access when pasting from a menu item or key binding (r261825)
- Implemented accessibility of HTML 5.1 Drag & Drop (r261248)
-
Release Notes for Safari Technology Preview 106
-
Position
-
Webkit-dev から Position Request についてだけ抜粋
- 返信は apple の開発者個々人の意見や、 apple 外の人からもくる
- 単純に Yes/No にまとめることはできない
- [webkit-dev] Position on emerging standard: WebCodecs
- [webkit-dev] Position on User-Agent Client Hints
- [webkit-dev] Request for position on named pages and page-orientation
- [webkit-dev] Request for position on content-visibility
- [webkit-dev] Position on emerging standard: Declarative Shadow DOM
- [webkit-dev] Request for position on First-Party Sets
- [webkit-dev] Position on emerging standard: HTMLLinkElement "disabled" attribute behavior
- [webkit-dev] Request for position on Schemeful Same-Site
- [webkit-dev] Position on WebXR Anchors Module
-
Webkit-dev から Position Request についてだけ抜粋
- Other
Edge 動向
- Stable: 83
-
Build
-
MyBuild - Home
- https://mybuild.microsoft.com/
-
Live Session
- MyBuild - Moving the web forward with Microsoft Edge and Chromium
- MyBuild - WebView2: Bringing the best of the web to your native apps
- MyBuild - Microsoft Edge: What's New for Web Developers
- MyBuild - Focus Group: Microsoft Products for Web Developers
- MyBuild - Learn Studio Session: Build a WebAssembly app with Blazor & VS Code
- MyBuild - From code to scale! Build a static web app in minutes
- MyBuild - Modern Web UI with Blazor WebAssembly
- MyBuild - Expert Q&A: WinRTC, Open Source WebRTC Library
- MyBuild - Building a Web for Everyone
- MyBuild - Modern Web UI with Blazor WebAssembly
- MyBuild - Learn Studio Session: Create a website in Azure
- MyBuild - Moving the web forward with Microsoft Edge and Chromium
-
MyBuild - Home
-
Updates
-
Everything new from Microsoft Edge at Build 2020
- https://blogs.windows.com/msedgedev/2020/05/19/microsoft-edge-news-developers-build-2020/
- Edge リリース後初の Build カンファレンス
-
What's new for web developers
- WebView2 preview expands to include .NET and UWP (WinUI) development
- Improvements to the Microsoft Edge Add-ons site make searching and finding extensions easier
- Making PWAs feel more at home on Windows 10
- Try out experimental web platform features with Origin Trials
-
New features for every user
- Collections in Microsoft Edge is getting smarter with a new Pinterest integration
- Sidebar search provides a faster, more contextual way to look things up
-
New features for information workers and IT Pros
- New syncing and customization options for IT professionals
- Data security gets a boost with Windows Information Protection
- Easily move between work and personal profiles
- Microsoft Search in Bing puts your work results all in one place
-
Origin Trials - Microsoft Edge Developer
- https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/
- Edge も Origin Trials を始める
- Chrome と仕組みは同じ
- VirtualKeyboardPolicy と PenButtonEvents からから
-
Making the web more accessible and inclusive for all with Microsoft Edge
- https://blogs.windows.com/windowsexperience/2020/05/21/making-the-web-more-accessible-and-inclusive-for-all-with-microsoft-edge/
- Chromium に取り組み始めてから、 150 以上の a11y 機能改善を実施した
- 「Immersive Reader で開く」ができるように
- Immersive Reader で翻訳できるように
- Read Aloud で読み上げ
- Picture Dictionary の搭載により、単語の隣にそれを示す絵が出る
- Introducing an improved spellcheck experience in Microsoft Edge - Microsoft Edge Blog
-
Introducing the new surf game in Microsoft Edge - Microsoft Edge Blog
- https://blogs.windows.com/msedgedev/2020/05/26/surf-game-edge-stable/
- edge://surf でサーフィンゲームができる
- Hi Reddit! We're the team behind Microsoft Edge and we're back for our third AMA. Ask us anything! : MicrosoftEdge
-
Everything new from Microsoft Edge at Build 2020
-
Chakra
- Release ChakraCore v1.11.19 · microsoft/ChakraCore
-
Other
- Using multiple profiles at work and at home is now easier with Microsoft Edge - Microsoft Edge Blog
- Browser Basics: User Gestures | text/plain
- A bit of GREASE keeps the web moving | text/plain
WHATWG/W3C 動向
- Recommendation
-
Proposed Recommendation
- Call for Review: JSON-LD 1.1 Specifications are W3C Proposed Recommendations
- Call for Review: DOM Review Draft - Published 18 June 2019 is a W3C Proposed Recommendation
- Candidate Recommendation
-
Working Draft
- [CSSWG][css-text-decor-4] Updated WD of CSS Text Decoration L4
-
First Public Working Draft
- First Public Working Draft: Challenges with Accessibility Guidelines Conformance and Testing, and Approaches for Mitigating Them
- First Public Working Draft: Image Resource
- First Public Working Draft: CSS Box Sizing Module Level 4
- Chartering
-
Other
- Migrating "A Well-Known URL for Changing Passwords" to WebAppSec
- HTTP Priority - proposal to support headers
-
W3C opens Advisory Board (AB) election
- https://www.w3.org/blog/news/archives/8519
- Tantek Ç elik (Mozilla)
- Heejin Chung (Samsung)
- Klaus Peter Hoeckner (Hilfsgemeinschaft)
- Tatsuya Igarashi (Sony)
- Florian Rivoal (W3C Invited Expert)
- Tzviya Siegman (Wiley)
- David Singer (Apple)
- Alan Stearns (Adobe)
- W3C Website Redesign Discovery Phase: New Survey
-
CfC: Renaming Feature Policy to Permissions Policy
- https://lists.w3.org/Archives/Public/public-webappsec/2020May/0008.html
- feature-policy が permission-policy に rename
- https://github.com/w3c/webappsec-feature-policy/pull/379
- design principles for new CSS features
- W3C Strategic Highlights, May 2020
TC39 動向
-
Meeting
-
2020-06
- 6/1-4, Remote で実施
- agendas/06.md at master · tc39/agendas
-
2020-06
- Proposals Diff
-
New Proposals
-
proposal-intl-enumeration: Return supported values of options, such as timeZone, calendars, numberingSystems, currencies, units, regions, scripts
- https://github.com/FrankYFTang/proposal-intl-enumeration
- サポートされている言語設定などを取得できる API
-
proposal-intl-enumeration: Return supported values of options, such as timeZone, calendars, numberingSystems, currencies, units, regions, scripts
- Other
IETF 動向
-
IETF108
- materials
-
httpwg
- https://github.com/httpwg/wg-materials/
- httpbis - Not having a session at IETF 108 2020)
-
wg-materials/interim-20-05 at gh-pages · httpwg/wg-materials
- https://github.com/httpwg/wg-materials/tree/gh-pages/interim-20-05
- interim はあった
- wg-materials/minutes.md at gh-pages · httpwg/wg-materials
- https://github.com/httpwg/wg-materials/blob/gh-pages/interim-20-05/minutes.md
- quicwg
- webtrans
- tlswg
- wpack
- privacypass
- dispatch
- secdispatch
- RFC
- IETF Last Call
- WG Last Call
- Call for Adoption
- I-D Action
-
Draft
- Channel Bindings for TLS 1.3
- JSResume: A JSON representation of resume data
- Questions Arising Concerning In-Person Meeting Cancellation
- End to End Media Encryption Procedures
- Notable CBOR Tags
- Changes to the RFC Series and RSE
- Other
セキュリティ動向
- Network-Layer DDoS Attack Trends for Q1 2020
周辺動向
- Can QUIC match the computational efficiency of TCP? Our research says yes.
- Does the QUIC handshake require compression to be fast?
- CUBIC and HyStart++ Support in quiche
- Making Video Intuitive: An Explainer
- The requestVideoFrameCallback API
イベント
-
5 月
- 20-22: MS build
-
6 月
- 22: WWDC20 - Apple Developer
-
7 月
- 30-2: web.dev LIVE
- 27-31: IETF 108 Online
- 8 月
-
9 月
- 7-11: SecWeb
- 9-10: Chromium Platform Security Summit
-
10 月
- 26-30: TPAC/2020 - W3C Wiki
-
11 月
- 14-20: IETF 109 Bangkok
Wrap Up
- Core Web Vitals 発表
- MS Build
- Edge の Origin Trials 開始
- Gecko Web Platform Update 開始
- Firefox Devtools が活発
- WebKit の Request for Position のトラッキング開始
- Feature Policy から Permission Policy への Rename