|
Description:
|
|
# ep28 Monthly Web 201710
第 28 回のテーマは 2017 年 10 月の Monthly Web です。
Monthly Web のモチベーションについては以下。
ep25 Monthly Web 201707
## Show Note
### Chrome 動向
- Chrome 62 Stable
- New in Chrome 62
- https://developers.google.com/web/updates/2017/10/nic62
- Network Information API Improve
- navigator.connection.type/effectiveType
- OpenType variable fonts
- capture media streams from HTML Media elements
- Web Audio API でエフェクトとかかけた結果を WebRTC とかできる
- Payment Request API is now available on Chrome for iOS
- WebVR origin trial
- Chrome 63 Beta
- Changes
- https://blog.chromium.org/2017/10/chrome-63-beta-dynamic-module-imports_27.html
- Chromium Blog: Chrome 63 Beta:
- Dynamic module imports
- async iterators/generators
- Device Memory API
- (Android) 許可の UI が変更
- 下からにゅっと出すパネルだと、 90 % が dismiss することがわかった
- 63 からダイアログをモーダルにすることにした
- https://twitter.com/grigs/status/922524110961307649
- font-variant-east-asian
- Generic Sensor API の Origin Trial
- What's New In DevTools (Chrome 63)
- https://developers.google.com/web/updates/2017/10/devtools-release-notes
- Workspaces 2.0
- Push/Background custom simulation
- (こぼれ話)公開されたが、動画にネオナチな主張によく使われるミームが使われてていったん取り下げになったりした
- Deprecations and removals in Chrome 63
- https://developers.google.com/web/updates/2017/10/chrome-63-deprecations
- Removing ::shadow and /deep/ in Chrome 63
- 下の Developer Updates で
- Chrome 64 Dev
- Chrome 64 Canary
- V8 (http://bit.ly/v8apichanges)
- V8 Release 6.3 (chrome 63)
- https://v8project.blogspot.jp/2017/10/v8-release-63.html
- Optimize
- Dynamic module import via `import()`
- Promise.prototype.finally
- async iterators/generators.
- Optimizing ES2015 proxies
- https://v8project.blogspot.jp/2017/10/optimizing-proxies.html
- An Internship on Laziness: Lazy Unlinking of Deoptimized Functions
- https://v8project.blogspot.jp/2017/10/lazy-unlinking.html
- developer updates
- Animating a Blur
- https://developers.google.com/web/updates/2017/10/animated-blur
- ぼかし効果の最適化方法の話
- The Intl.PluralRules API
- https://developers.google.com/web/updates/2017/10/intl-pluralrules
- 複数形単位の翻訳の話
- Exceeding the buffering quota
- https://developers.google.com/web/updates/2017/10/quotaexceedederror
- appendBuffer しすぎるとあふれるが、いつ溢れるかは実装依存
- 細かいチャンクにバラしてから追加などのワークアラウンド
- 実装上の注意について
- Promise.prototype.finally
- https://developers.google.com/web/updates/2017/10/promise-finally
- 最後に finally できる話
- Removing ::shadow and /deep/ in Chrome 63
- https://developers.google.com/web/updates/2017/10/remove-shadow-piercing
- ShadowDOM v0 の ::shadow と /deep/ が削除
- open/close をちゃんと使おう
- Using Trusted Web Activity
- https://developers.google.com/web/updates/2017/10/using-twa
- Digital Asset Links でリンクされてれば URL bar が表示されなくなる
- 別ページに行ったら普通の Custom Tab
- Intents (https://bit.ly/blinkintents)
- Ship: RegExp named captures
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/kZFj6oseQck/g4KwgCaUBAAJ
- Ship: CSS transform-box
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/4ZWHz8tCONI/XBTvQtw2BAAJ
- Ship: delegateStickyUserActivation
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/F4h7sdBdiBM/oVnhPTV5BAAJ
- Implement and Ship: 'unsafe-hashed-attributes' in CSP3
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/bUAhkdsrmqE/nimnFDG3BAAJ
- unsafe-inline できない場合、埋め込んだコードのハッシュでホワイトリストする用
- Implement and Ship: Adding new MHTML headers to support sharing of MHTML pages
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/GkAQbgmElK8/zx8KPu8WCgAJ
- https://docs.google.com/document/d/1FvmYUC0S0BkdkR7wZsg0hLdKc_qjGnGahBwwa0CdnHE/edit
- Implement and ship: Fractional coordinates in PointerEvents of type mouse
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/ssfd-_V26Ls/YwcZTqyqBgAJ
- マウスポインタのイベントを小数に?
- Implement and Ship: WebAudio: AudioParam Setter is setValueAtTime
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/y4s3-aXbMOw/9s34pPQVBgAJ
- Implement and Ship: Parse floats/decimals in CSS RGB and RGBA functions
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/zH51Atd-Vag/BMY1tOGaBAAJ
- `rgb()` 内の数値はこれまで整数だったんだけど小数もとれるように
- Intent to implement and ship: import.meta.url
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/Hq3cVNto74c/x7tNhmZUBQAJ
- ちゃんと入ってた
- Implement and ship: HTTP/2 push header validation
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/5_aP_stqndw/jlvJjoOEBQAJ
- Push 時に Vary や Range をちゃんとみるように
- Implement: image async attribute
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/9i6wgXv7c7c/0kiqdQkhBQAJ
- Implement: saveData attribute in Network Information API
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/IrIwAdMWhAE/B0A23MQhBQAJ
- Implement: Simple User Activation
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/bJ2icZEANV4/5VlT_RKrBgAJ
- https://docs.google.com/document/d/1erpl1yqJlc1pH0QvVVmi1s3WzqQLsEXTLLh6VuYp228/edit
- Implement: Web Lifecycle - to enable system initiated Discarding & Stopping
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/1WFVPbRL640/TPPG9gs5AwAJ
- Implement and Experiment: Single buffered canvas
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/DCPyE6rPFpA/sqZwKAWXBAAJ
- Intent to Implement: Fetch API: keepalive
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/AUAIHVF63SM/naGVAnoBAwAJ
- https://docs.google.com/document/d/1iHJtFa3jOo5n9QXHb6Ok5nK8kavXSk2DrLoubPWi9ys/edit
- Beacon API は POST のみだが、 GET (analytics) や HEAD (ads) のニーズが
- Beacon は拡張し辛いので、 `fetch()` でやろう。しかし keep-alive が無いので入れよう
- Blink の Beacon 実装が fetch の層を通らずダイレクトにネットワークしてるので直す
- Ship: text-decoration-skip-ink: auto;
- Deprecate and Remove: text-decoration-skip:
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/47BHtmz0jVY/itAC_xpwBgAJ
- text-decoration-skip: ink を廃止して、 text-decoration-skip-ink が新設される
- Deprecate and Remove: legacy touch event APIs on desktop devices
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/KV6kqDJpYiE/YFM28ZNBBAAJ
- Remove: ImageCapture.setOptions()
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/tPbZ0eaO-yw/JM04acXKAgAJ
- Remove: window.event for Shadow DOM
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/a9SmvyKUX4w/Yi1a8GlXBQAJ
- FYI: Small changes to localStorage/sessionStorage methods in M63
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/uptbsZKhUxg/xTZalM25BAAJ
- 仕様と違ってた部分を改善
- メソッドを全部 NotEnumerable に
- getter/setter などもあったが、無い場合 undefined を返すなど、メソッドと挙動が違ったので、 null を返す getItem() などのメソッドに統一
- Ship: CSS Paint API
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/Jex3idOld48/8C2mDsSjBQAJ
- Worklet がらみで議論が足りてなかったので止まってたが、月末に動きが
- Secure Contexts に限定するように変更して、 ship する予定
- https://bugs.chromium.org/p/chromium/issues/detail?id=779938
- 手書きみたいな線を引くデモ
- blog
- Other
- blink-dev で arch team のスライドまとめ
- https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/edit
- Loading Tokyo Team weekly snippet (Sep 30 - Oct 6)
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/xEC0qbm9_0Q/T57qMRUZAgAJ
- 東京チームの進捗
- ES Module Performance (次述)
- Module loading performance
- https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/edit
- 100 以上もしくは依存のネストが 5 以上の場合は Bundle を強く推奨
- NW コストだけではなく、 Renderer Process と IO を行う Browser Process との IPC も結構ある。
- Jumbo: Fully supported in Blink + Some requests
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/F4JYqAY1dgM/b-hopZvmBgAJ
- Jumbo = unity build implementation in Chromium
- DOM & HTML team: Quarterly Report [2017/Q3-]
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/wrLgwlkKaR8/tgWoLv8EAwAJ
- Worker status: presentations at BlinkOn8, perf benchmarks for PWA
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/d2TohcNYY2M/nNY23FbyAwAJ
- Loading Team weekly snippet
- Oct 9 - Oct 13:
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/dMBXu1F1vwU/bGh6zqn5AwAJ
- Oct 16 - Oct 20:
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/fsUz-I3hc1g/bMAmAbEhBgAJ
- Oct 23 - Oct 27:
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/pEIIfzW-y1k/cyHS0SpoBQAJ
- Layout Team Weekly Snippets
- October 2, 2017
- https://groups.google.com/a/chromium.org/d/msg/layout-dev/lBzoGbRJWFQ/JhcmNYWGCAAJ
- October 9, 2017
- https://groups.google.com/a/chromium.org/d/msg/layout-dev/d85DZbyeelo/rpAYSCrPBgAJ
- October 16, 2017
- https://groups.google.com/a/chromium.org/d/msg/layout-dev/3dR4cA_xUbw/u-gd4BWAAwAJ
- October 30, 2017
- https://groups.google.com/a/chromium.org/d/msg/layout-dev/Nw05Wt_5TgI/A26jABl_BgAJ
- How payment methods work in the Payment Request API
- https://medium.com/dev-channel/how-payment-methods-work-in-the-payment-request-api-54b8f2ee03c5
- AMP: Two years of user-first webpages
- https://amphtml.wordpress.com/2017/10/19/amp-two-years-of-user-first-webpages/
- 2500 万ドメイン 40 億ページで、 Google からの読み込み中央値 0.5s
- アクセス 10% 増、滞在時間 2 倍、コンバージョン 20% 増 etc
- Promise.prototype.finally
- https://developers.google.com/web/updates/2017/10/promise-finally
- Introducing the Chrome User Experience Report
- https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html
- 有効にしたユーザから収集している Chrome のレポートが公開された
- BigQuery で色々見られるように
- Will Blink Introduce DOMJIT Technique?
- https://groups.google.com/a/chromium.org/d/msg/blink-dev/_S9TWojVP90/BJolSK6yBAAJ
- 一度やったが良い結果が出ず ship しなかった
- ので答えは NO
- "We've heard that some people want guaranteed access to URL when in PWAs. This is now in canary and we want feedback!
- https://twitter.com/owencm/status/913059860215762944
- PWA だと URL バーなかったりするのが問題だよねという声に答えようとしているよという話
### Firefox 動向
- Firefox 56 Stable
- Last Stop before Quantum
- https://hacks.mozilla.org/2017/10/firefox-56-last-stop-before-quantum/
- Firefox 57 Beta
- Firefox 58 Nightly
- These Weeks in Firefox: Issue 25
- https://blog.nightly.mozilla.org/2017/10/11/these-weeks-in-firefox-issue-25/
- Intents
- Unship: rel=preload for firefox 57 (CSS loaded with are not applied)
- https://groups.google.com/d/msg/mozilla.dev.platform/aNUUx0S6PxE/3E3TkBXtAgAJ
- https://www.fxsitecompat.com/en-CA/docs/2017/css-loaded-with-link-rel-preload-are-not-applied/
- 56 で入ったが、 preload された CSS がうまく当たらないバグが出た
- cacheable なリソースにしか適用されていなかったので 57 で unship
- non-cacheable なリソースにも適用できるように直して 58 で戻したい
- Ship: PerformanceNavigationTiming
- https://groups.google.com/d/msg/mozilla.dev.platform/1OZrP1hR_SE/d_2TOCIeAgAJ
- Ship: Pointer Events (Desktop)
- https://groups.google.com/d/msg/mozilla.dev.platform/RPELgLHAhjM/gmkupELMAgAJ
- Implement and Ship: PerformanceResourceTiming.workerStart
- https://groups.google.com/d/msg/mozilla.dev.platform/lw0ylqXLil0/PjYSsoHkAAAJ
- Implement and ship: CSP exemptions for content injected by privileged callers
- https://groups.google.com/d/msg/mozilla.dev.platform/EVKMSAY__lA/8b1ctuJgBwAJ
- Implement: CSS media queries, interaction media features
- https://groups.google.com/d/msg/mozilla.dev.platform/WhXB19qGVkI/J5rGuFydCAAJ
- any-hover/any-pointer
- Implement: scroll-boundary-behavior
- https://groups.google.com/d/msg/mozilla.dev.platform/3hujzpw-LDA/pKl0V27zAwAJ
- Other
- Mozilla Awards Over Half a Million to Open Source Projects
- https://blog.mozilla.org/blog/2017/10/03/mozilla-awards-half-million-open-source-projects/
- $125,000: webpack の WebAssembly サポート
- $100,000: RiseUp の email service のセキュア化
- $50,000: Phaser (HTML5 games engine) version 3 開発
- $70,000: mod_md (Apache の ACME モジュール) の開発
- Treating data URLs as unique origins for Firefox 57
- https://blog.mozilla.org/security/2017/10/04/treating-data-urls-unique-origins-firefox-57/
- The whole web at maximum FPS: How WebRender gets rid of jank
- https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/
- Paint/Composite の詳細から WebRender でどう変わるのか
- An Introduction to CSS Grid Layout
- https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-1/
- https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-2/
- How we rebuilt the viewsourceconf.org website
- https://hacks.mozilla.org/2017/10/how-we-rebuilt-the-viewsourceconf-org-website/
- Static, Offline First, Mobile First, SVG, No Script, HTTPS, Do Not Track なサイト
- Browser Architecture Newsletter 4
- https://mozilla.github.io/firefox-browser-architecture/newsletter/2017/10/19/browser-architecture-newsletter-4.html
- Bringing Mixed Reality to the Web
- https://blog.mozilla.org/blog/2017/10/20/bringing-mixed-reality-web/
- Add Progressive Web Apps to your Home screen in Firefox for Android
- https://hacks.mozilla.org/2017/10/progressive-web-apps-firefox-android/
- Android 版 Firefox 58 で Add to Home Screen などが機能するように
- 59 では Background Sync のサポートも検討中
- ほかにも Payment Request API や Web Share API も検討中
- Saying Goodbye to Firebug
- https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/
- 2006 年に始まった Firebug が役目を終える
- OSS としては残る
- WebRTC video may stop in low-bandwidth conditions
- https://www.fxsitecompat.com/en-CA/docs/2017/webrtc-video-may-stop-in-low-bandwidth-conditions/
- WebRTC で帯域がサチって一度止まった映像が復帰しない問題、 56.0.2 では修正済み。
- Object.prototype.watch has been removed
- https://www.fxsitecompat.com/en-CA/docs/2017/object-prototype-watch-has-been-removed/
- Use the standard Proxy or Reflect object instead
- HTMLMediaElement.mozSrcObject has been removed
- https://www.fxsitecompat.com/en-CA/docs/2017/htmlmediaelement-mozsrcobject-has-been-removed/
- Use the standard srcObject property instead
- These Weeks in Firefox: Issue 26
- https://blog.nightly.mozilla.org/2017/10/26/these-weeks-in-firefox-issue-26/
- Stylo is built as default even if Fennec/Android
- https://groups.google.com/d/msg/mozilla.dev.platform/CogfmMY2bLA/ZJWkXGRBCAAJ
- Android 版 Firefox でも Stylo をビルドするように(58)
- 59 でデフォルト有効を目指しているよう
### Safari 動向
- Safari Technology Preview 41
- https://webkit.org/blog/7989/release-notes-for-safari-technology-preview-41/
- Added support for `min()` and `max()` in `calc()`
- Added a small optimization for async generators
- Added support for Elliptic Curve P-521
- etc
- Safari Technology Preview 42
- https://webkit.org/blog/8001/release-notes-for-safari-technology-preview-42/
- Implemented `PaymentRequest.canMakePayment()`
- Implemented `PaymentRequest.show()` and `PaymentRequest.hide()`
- Remove `constant()` in favor of `env()`
- WHATWG/W3C 動向参照
- Added support for DOM aborting
- AbortController/AbortSignal class はあるが fetch はキャンセルできない
- Introduced import.meta
- まだ中身は空
- Added support for ``
- Implemented font-display loading behaviors
- Other
- WebKit Build Archives
- https://webkit.org/blog/7978/introducing-webkit-build-archives/
- WebKit Nightly とは別に最新版の成功ビルドが個別に落とせるようになった
- 自動アップデートなどもないので、コントリビュータに便利
- 新しい機能を試したいなら STP 使ってねとのこと
- Web App Manifest Standard
- https://lists.webkit.org/pipermail/webkit-dev/2017-October/029694.html
- 実装開始らしい
- Touch Bar の API
- https://lists.webkit.org/pipermail/webkit-dev/2017-October/029693.html
- HTML の ` |