|
Description:
|
|
# ep60 Monthly Web 201911
第 60 回のテーマは 2019 年 11 月の Monthly Web です。
### Chrome 動向
- Stable: 78
- *Chrome Dev Summit 2019*
- https://developer.chrome.com/devsummit/
- Chromium Blog: Chrome Dev Summit 2019: Elevating the Web Together
- https://blog.chromium.org/2019/11/chrome-dev-summit-2019-elevating-web.html
- Highlights from Chrome Dev Summit 2019
- https://bitsofco.de/chrome-dev-summit-2019/
- *Keynote*
- https://www.youtube.com/watch?v=F1UP7wRCPH8
- LayoutNG
- 約 10 %のレイアウトバグの修正
- 最大 5 %の描画パフォーマンスの向上
- 複雑な言語におけるパフォーマンスの改善(RTL など)
- emoji の描画が速くなった
- http archive に記録されている z-index の最大値: 780 桁の 99999... !important
- ブラウザ上でコードを変更しながら Lighthouse のスコアを改善するデモ
- 3 つの重要なゴール
- Better performance
- More accessible
- More safe and trustworthy
- 各種 API の紹介
- WebP in its 10th year
- https://www.youtube.com/watch?v=-wrXKvnPfZg
- PhotoShop, AndroidStudio, Squoosh, Gimp, ImageMagick などで WebP を出力できる
- Chrome's ecosystem collaboration
- https://www.youtube.com/watch?v=64MqeSKs8Fo
- User-first interactive sites with AMP
- https://www.youtube.com/watch?v=FiZSaqJR9mM
- Speed highlights
- https://www.youtube.com/watch?v=5_Ns2xfBMLw
- Trust & safety highlights
- https://www.youtube.com/watch?v=vZUDAdIozXM
- Web as a building block for user experience
- https://www.youtube.com/watch?v=2x046UBf2xI
- *HTML isn't done!*
- https://www.youtube.com/watch?v=ZFvPLrKZywA
- Edge & Chrome form control collaboration
- chrome://flags/#form-controls-refresh
- High contrast mode
- `@media(forced-colors: active)`
- `forced-color-adjust: auto | none`
- Stylability
- 多くの開発者が form elements をスクラッチで書き直している
- まずは select, checkbox, radio の stylability にフォーカスしていく
- Extensibility
- select, option を拡張が拡張できるように今後していく
- New components
- Display Locking is available in Origin Trial
- *Intent to explain: Demystifying the Blink shipping process*
- https://www.youtube.com/watch?v=y3EZx_b-7tk
- Intent to Implement と読んでいたものを Intent to Prototype に変更
- フラグ付きで試験的に提供するだけで、強いコミットメントではないことを明確にしたかった
- Bridging the native app gap
- https://www.youtube.com/watch?v=JKVZMqpiY7w
- *PWA and the installable web*
- https://www.youtube.com/watch?v=Hp_dQvQyYEI
- OYO の事例 by Mukund, Product Manager for OYO Consumer Experience
- もとのサイトに比べて、 Chrome の PWA では 4.4 倍、 Trusted Web Activity では 6.6 倍の conversion があった。
- TWA のアプリは 900KB 未満の app size
- Next-generation web styling
- https://www.youtube.com/watch?v=-oyeaIirVC0
- Adaptive Loading - improving web performance on slow devices
- https://www.youtube.com/watch?v=puUPpVrIRkc
- The main thread is overworked & underpaid
- https://www.youtube.com/watch?v=7Rrv9qFMWNM
- Speed tooling evolutions: 2019 and beyond
- https://www.youtube.com/watch?v=iaWLXf1FgI0
- What's new in sign-up and sign-in
- https://www.youtube.com/watch?v=WxXF17k1dko
- SMS Receiver API
- Web Authentication API
- *Protecting users on a thriving web*
- https://www.youtube.com/watch?v=WnCKlNE52tc
- ユーザーがどこにいるか、ウェブサイトがユーザーから何を得ているかを明確にすることがゴール
- IDN spoofing の対策
- spoofy IDN を検知したら警告を出す
- https://h2o.examp1e.net/
- URL はセキュリティの文脈では有用な指標ではない
- scheme や www はユーザーにとって必要性の低い情報の為非表示にする
- Suspicious Site Reporter extension
- https://chrome.google.com/webstore/detail/suspicious-site-reporter/jknemblkbdhdcpllfgbfekkdciegfboi
- scheme や www が表示されるようになり、なりすましやフィッシングなどの悪意のあるサイトを報告することができる
- Advancing the web framework ecosystem
- https://www.youtube.com/watch?v=QDljY2I1Pfw
- Oh the things you'll compile - modern WebAssembly
- https://www.youtube.com/watch?v=kZrl91SPSpc
- In which we make loading disappear with 'portal' and friends
- https://www.youtube.com/watch?v=X2zqwMBBvIs
- Chrome extensions and the world of tomorrow
- https://www.youtube.com/watch?v=7-ALJiZCI6w
- What's new in Canvas - Offscreen Canvas and Text Metric use cases
- https://www.youtube.com/watch?v=ePaUrMCL7g4
- How to make your content shine on Google Search
- https://www.youtube.com/watch?v=4pOH8Smd0Xs
- Designing for speed and hacking user perception
- https://www.youtube.com/watch?v=0-3GBgRg9ow
- PWAs and capability highlights
- https://www.youtube.com/watch?v=go27Hs5Qsds
- 3D, VR and AR on the web
- https://www.youtube.com/watch?v=wPfODr2e5Xw
- Ready player web: Building modern web games
- https://www.youtube.com/watch?v=5_ySzSDnyYI
- You should focus - supporting different devices on the web
- https://www.youtube.com/watch?v=RijDDniAHyg
- Getting permission: Patterns for making fluent permission requests
- https://www.youtube.com/watch?v=riKmez3sHaM
- BlinkOn11
- Video
- https://www.youtube.com/playlist?list=PL9ioqAuyl6UI6MmaMnRWHl2jHzflPcmA6
- *Keynote*
- 日本でのモバイルデータ通信の紹介
- 月末になるにつれ、 4G 対応デバイスでの Web ページのロード数が減少する
- 1 ページあたりのロード時間は増加する
- Chromium: The past 6 months
- Updates
- *Chromium Blog: Chrome 79 Beta: Virtual Reality Comes to the Web*
- https://blog.chromium.org/2019/10/chrome-79-beta-virtual-reality-comes-to.html
- *Virtual Reality Comes to the Web*
- Support for rendersubtree Attribute
- Wake Lock API based on Promises
- Adaptive Icon Display for Installed PWAs on Android
- Autofocus Support for any Focusable HTML/SVG Element
- Compute img/video Aspect Ratio from Width Or Height HTML Attributes
- *font-optical-sizing*
- *list-style-type: ``*
- Reject `Worklet.addModule()` with a More Specific Error
- Retrieve a Service Worker Object Corresponding to a Worker Itself
- Stop Evaluating Script Elements Moved Between Documents During Fetching
- Remove: -webkit-appearance Keywords for Arbitrary Elements
- Deprecations and removals in Chrome 78
- https://developers.google.com/web/updates/2019/10/chrome-79-deps-rems
- -webkit-appearance
- Intents
- Ship: getTransfrom() for OffscreenCanvasRenderingContext2D
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/HT7REXjYLUM/qjnN8Bp5EAAJ
- Ship: ARIA Attribute Reflection for Elements (without relationship properties)
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/882iPcdnNQs/UP-PI8H2DwAJ
- JS から ARIA 属性を操作
- Ship: Default Accessibility Semantics for Custom Elements (without relationship properties)
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/BcWAX13du9w/wlp9E1YGEAAJ
- custom element に ElementInternals I/F を経由して role や prop などを追加できる
- *Ship: CSS intrinsic-size*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/CQVTVOYx1XI/zSEBfVhKBQAJ
- 仕様上 Not Ready for Implementation になってるのに出ている
- コメントで指摘されており、この intents は *撤回された*
- Ship: MediaCapabilities: encrypted (EME) decodingInfo()
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/0yw8CuNaQEw/ppTxJme2EQAJ
- Ship: DOMMatrix setTransform/getTransform on OffscreenCanvas
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/B7ob7aCGYlk/COlabs8SBQAJ
- Ship: :focus-visible pseudo-class
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/XKNtAVyO4AY/ujOrvaYsBwAJ
- Ship: getInstalledRelatedApps
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/wB7mDJqrUZ8/Ga2LMxdfBwAJ
- *Ship: Contacts API*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/7UX5LNeAaCk/JBWfbrheBwAJ
- Ship: [Payments] shipping address and contact info delegation
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/9sZrotql9I8/JIGupWGaCAAJ
- Ship: ActiveText, Field, and FieldText system colors
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/zv6k2X7Wr1M/Xu2GcClIBgAJ
- *Ship: JS String.prototype.replaceAll*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/raep1X9R_SE/V8ofHrBdAgAJ
- Ship: HTMLVideoElement.getVideoPlaybackQuality()
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/fgE0Ua9ZSU8/3XM9bU1LAgAJ
- Ship: HrefTranslate HTMLAnchor attribute
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/gDLl4fKCr8Y/35aaeQ0fAgAJ
- Implement and Ship: Promise.any
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/xioEDzu3wXc/DiHmRDVTAAAJ
- Implement and Ship: Support for CSS image-orientation property
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/jPgnRoivOis/AmQfHDtEBgAJ
- Prototype and ship: Improved compositing operations for root element
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/4DC56FN3paU/hsxA9P3_AQAJ
- Prototype and Ship: Protect Resource Timing's workerStart behind a Timing-Allow-Origin check
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/30mN_Ec4JBY/R3VKx-9mAQAJ
- Prototype and Ship: ResizeObserver updates
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/_j6K_xSxWj0/fbn4kzx9AgAJ
- *Implement and Ship: SubmitEvent interface*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/AZO9T-eHy4E/nv4aQN9oAwAJ
- submit event に submitter (submit した button etc) が入る
- Implement and Ship: buffered flag for longtasks
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/cX5ahS7nCFw/WHmxn8-uAwAJ
- Prototype and Ship: Implement ServiceWorkerContainer.onmessageerror and ServiceWorkerGlobalScope.onmessageerror
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ardH9JE8P3c/yETDTdeQAwAJ
- Implement: MediaCapabilities: Query Spatial Audio with decodingInfo()
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/yYJ0f99smmQ/s7-CKpNmEAAJ
- Implement: fetch() upload streaming
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/hqzIf3gdahs/SzVoOzenBQAJ
- *Implement: Window Placement*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/SFyBx9MrGRo/ucdX5HGWBQAJ
- Implement: CSS Spatial Navigation (only spatialNavigationSearch API)
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Mjm4FzfxekY/YR8d2FdfBwAJ
- Experiment: CacheStorage Code Cache Hint
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/exoGLTG8m-c/5EUdD5zYBQAJ
- Experiment: Contacts API Address/Icon support
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/F8fT0EhW9XA/v0ol03HPBgAJ
- Experiment: Content Index API
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/AJpqos6iG5Y/7pGU2RRcBAAJ
- Change:
- Unship:
- *Unship: HPKP (dynamic key pinning)*
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/AyMlrNHYepE/B5bgjjsiBwAJ
- Remove:
- *Renaming Intent to Implement => Intent to Prototype*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/-cO4R73AHos/EoBtspToBQAJ
- Deprecate/Remove: [un]registerProtocolHandler() APIs in non-secure contexts
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/0bfCDijaUzs/kBVBFK4uCQAJ
- Deprecate and Remove: [un]registerProtocolHandler() APIs in non-secure contexts
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/1AOWqzgFQiw/kOFdnDR5CQAJ
- Deprecate and Remove: non-origin-clean ImageBitmap serialization and transferring
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Z1XdYf6SjDU/lG9Jkej1BQAJ
- AMP
- v8
- Outside the web: standalone WebAssembly binaries using Emscripten · V8
- https://v8.dev/blog/emscripten-standalone-wasm
- V8 release v7.9 · V8
- https://v8.dev/blog/v8-release-79
- Other
- *Virtual reality comes to the web*
- https://web.dev/vr-comes-to-the-web/
- *Google Developers Blog: 10 shortcuts made possible by .new*
- https://developers.googleblog.com/2019/10/10-shortcuts-made-possible-by-new.html
- Playlist.new: Spotify.
- Story.new: Medium
- Canva.new: Canva.
- Webex.new: Cisco Webex.
- Link.new: Bitly.
- Invoice.new: Stripe.
- Api.new: RunKit.
- Coda.new: Coda.
- Music.new: OVO Sound.
- Cal.new: Google Calendar.
- Google Developers Blog: New Analytics updates in Actions on Google Console
- https://developers.googleblog.com/2019/10/new-analytics-updates-in-actions-on.html
- Chromium Blog: Intent to Explain: Demystifying the Blink Shipping Process
- https://blog.chromium.org/2019/11/intent-to-explain-demystifying-blink.html
- Chromium Blog: Moving towards a faster web
- https://blog.chromium.org/2019/11/moving-towards-faster-web.html
- *Chromium Blog: Making new experiences possible on the web*
- https://blog.chromium.org/2019/11/making-new-experiences-possible-on-web.html
- WebAssembly
- Advanced Capabilities
- Progressive Web Apps
- の 3 つを軸にアプリとのギャップを埋めていく
- Official Google Webmaster Central Blog [EN]: Get faster with the new Speed report in Search Console
- https://webmasters.googleblog.com/2019/11/search-console-speed-report.html
- Getting Started with Web Serial
- https://developers.google.com/web/fundamentals/codelabs/web-serial/
- Creating Delightful User Experiences Using AMP On Adobe Experience Manager
- https://blog.amp.dev/2019/11/19/creating-delightful-user-experiences-using-amp-on-adobe-experience-manager/
- *Rendering Weekly, November 19, 2019*
- https://groups.google.com/a/chromium.org/forum/#!msg/layout-dev/-CX18RgwMis/YQhiuSzCAwAJ
- 議事録っぽい?続くのだろうか?
- The Chromium Chronicle: GWP-ASan: Detect bugs in the wild
- https://developers.google.com/web/updates/2019/11/chromium-chronicle-8
### Firefox 動向
- Stable: 70
- Updates
- *Upcoming notification permission changes in Firefox 72*
- https://hacks.mozilla.org/2019/11/upcoming-notification-permission-changes-in-firefox-72/
- https://blog.mozilla.org/futurereleases/2019/11/04/restricting-notification-permission-prompts-in-firefox/
- Permission Prompt は非常に人気がなかった
- ユーザインタラクションからではない Prompt はほぼ無視されてた
- インタラクションからの Prompt は許可されることが多い
- これを踏まて変更
- 70 で Prompt の Not Now を Never にする
- 72 でインタラクションのない Prompt は出さず URL bar のアイコンにする
- These Weeks in Firefox: Issue 68
- https://blog.nightly.mozilla.org/2019/11/13/these-weeks-in-firefox-issue-68/
- Extensions in Firefox 71
- https://blog.mozilla.org/addons/2019/11/12/extensions-in-firefox-71/
- Intents
- *Ship: Add image/webp to default Accept header*
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/UTHTGok5x4o/ZGRKyFLAAQAJ
- Ship: Require user interaction for notification permission prompts
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/Mezd5pLjnJU/jaqcJyngAgAJ
- *Ship: CSS Shadow Parts.*
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/dWnXJtFKY0I/WiwbWH8MAAAJ
- Ship: [css-transforms-2] Individual Transform Properties (i.e. translate, rotate, scale)
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/4oyeCHOqt4I/ebrHWT8iBwAJ
- Ship: motion path module level 1
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/nOOIRsuxvuc/spfjWTwiBwAJ
- *Ship: String.prototype.replaceAll()*
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/YhvEXIF3SIw/Mn8qXjVTAAAJ
- Unship: HTTP Refresh header support when the content is handled as a download
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/MIiej_8ajVQ/hryqeRa5AQAJ
- *Unship: DTLS 1.0 for WebRTC*
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/wUoBf0FqqcE/d2QvOvCQBQAJ
- Prototype: Delegate and restrict permission in third party context
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/BdFOMAuCGW8/-fqk-MWIAQAJ
- Site Compat
- Requesting notification permission will soon require user interaction
- https://www.fxsitecompat.dev/en-CA/docs/2019/requesting-notification-permission-will-soon-require-user-interaction/
- Requesting notification permission and screen capture now requires user interaction (Affecting)
- https://www.fxsitecompat.dev/en-CA/docs/2019/requesting-notification-permission-and-screen-capture-now-requires-user-interaction/
- Vibration API can no longer be used from cross-origin ``
- https://www.fxsitecompat.dev/en-CA/docs/2019/vibration-api-can-no-longer-be-used-from-cross-origin-iframe/
- DH algorithm support has been removed from Web Crypto API
- https://www.fxsitecompat.dev/en-CA/docs/2019/dh-algorithm-support-has-been-removed-from-web-crypto-api/
- *HTTP Public Key Pinning is no longer supported*
- https://www.fxsitecompat.dev/en-CA/docs/2019/http-public-key-pinning-is-no-longer-supported/
- image/webp has been added to default HTTP Accept header
- https://www.fxsitecompat.dev/en-CA/docs/2019/image-webp-has-been-added-to-default-http-accept-header/
- Other
- Validating Delegated Credentials for TLS in Firefox
- https://blog.mozilla.org/security/2019/11/01/validating-delegated-credentials-for-tls-in-firefox/
- Announcing the Bytecode Alliance: Building a secure by default, composable future for WebAssembly - Mozilla Hacks - the Web developer blog
- https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/
- https://blog.mozilla.org/blog/2019/11/12/new-bytecode-alliance-brings-the-security-ubiquity-and-interoperability-of-the-web-to-the-world-of-pervasive-computing/
- https://www.fastly.com/blog/fastly-partners-form-open-source-bytecode-alliance
- WASM/WASI ベースのソフトウェア基盤開発をすすめるアライアンス
- Member
- Mozilla
- Fastly
- Intel
- Red Hat
- Project
- Wasmtime
- Lucet
- WebAssembly Micro Runtime
- Cranelift
- Updates to the Mozilla Web Security Bounty Program
- https://blog.mozilla.org/security/2019/11/19/updates-to-the-mozilla-web-security-bounty-program/
- NodeJS vendoring policies; feedback requested
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/E3gMQMp1jzI/I5QajwhdAAAJ
- Soft code freeze for Firefox 72 starts November 25
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/f4171vFyaHg/33eTGrlHAAAJ
- How I made the Firefox Protection report screen reader accessible
- https://marcozehe.de/2019/11/25/how-i-made-the-firefox-protection-report-screen-reader-accessible/
### Safari 動向
- Stable:13.0.3
- Updates
- *Release Notes for Safari Technology Preview 96*
- https://webkit.org/blog/9658/release-notes-for-safari-technology-preview-96/
- Enabled the Web Animations JavaScript API by default (r251237)
- Implemented AuthenticatorCancel (r251295)
- Added strictness to request's Content-Type (r251490)
- Fixed setting border-radius on ` |