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