const lf = new Intl.ListFormat('en');
lf.format(['dogs']);
// → 'dogs'
lf.format(['dogs', 'cats']);
// → 'dogs and cats'
lf.format(['dogs', 'cats', 'hamsters']);
// → 'dogs, cats, and hamsters'

For more information, read our Web Fundamentals article.

Service worker improvements

FetchEvent.resultingClientId

FetchEvent.resultingClientId, set on navigation requests or requests for workers, is the ID of the client, either a document or a worker, and is created by the request. It's useful for associating the main resource request from a document with subsequent subresource requests from the same document, for example, for logging and metrics purposes.

FetchEvents on requests for same-origin favicons.

Previously, technical limitations prevented service workers from receiving FetchEvent objects for favicon requests. Now, service workers will receive FetchEvent objects as long as the request URL is on the same origin as the service worker.

MediaStreamTrack resizeMode constraint

A new property controls how the browser derives the resolution of a MediaStreamTrack. There are two supported values:
  • "none": the track has the native resolution provided by the camera, its driver, or the operating system.
  • "crop-and-scale": the browser may use cropping and re-scaling to adjust the resolution of the video produced by the camera.
This feature allows applications to improve consistency across browsers, and to use only native resolutions when desired.

RTCPeerConnection.connectionState and RTCPeerConnection.onconnectionstatechanged

Chrome now supports RTCPeerConnection.connectionState, which is an aggregate value computed from the transport states of the peerconnection's underlying ICE and DTLS transports. It's intended to provide a more complete overview of the connection state than RTCPeerConnection.iceConnectionState, which is only supposed to be based on the ICE transports.

Well-formed JSON.stringify

A Stage 3 ECMAScript proposal changes JSON.stringify() to prevent it from returning ill-formed Unicode strings. Previously, JSON.stringify() would output lone surrogates themselves if the input contained any. With this change, JSON.stringify() outputs escape sequences
for lone surrogates, making its output valid Unicode (and representable in UTF-8). The example below demonstrates how this works in practice.

JSON.stringify("\uD800");
  • Previously, this returned '"�"'
  • Starting in Chrome 72, this returns '"\ud800"'

Worker unhandled exception propagation

For dedicated workers, unhandled errors now propagate to the parent context and the error reporting process begins again one layer up (for example, to the window's onerror handler). This allows for errors to be propagated up to the original document, giving developers the freedom to choose when and how to handle worker errors.

Interoperability Improvements

Interoperable File.webkitRelativePath property

The File.webkitRelativePath
of the File interface previously returned a value different from other major browsers, now it returns the same value.

For example, if a user has the following local files:

/tmp/a/foo/bar/1.txt, /tmp/a/foo/2.txt

and they selected /tmp with a file chooser dialog, webkitRelativePath in Chrome was:

foo/bar/1.txt, foo/2.txt

Other browsers, which Chrome now matches, return this:

tmp/a/foo/bar/1.txt, tmp/a/foo/2.txt

Treat '#' as ending data URI body content

Chrome currently allows '#" symbols to exist in the body of a data URI in violation of the URL specification. More specifically, it treats a '#' as both part of the data body and the start of the URL fragment such that there is an overlap between the two components. Chrome now aligns with both the specification and Firefox by treating the first '#' of a data URL as the end of the data body and the start of the fragment.

Removals

Don't allow popups during page unload

Pages may no longer use window.open() to open a new page during unload. The Chrome popup blocker already prohibited this, but now it is prohibited whether or not the popup blocker is enabled. For now, enterprises can use the AllowPopupsDuringPageUnload policy flag to allow popups during unload. We expect to remove this flag in Chrome 82.

Note: This was originally targeted at Chrome 72, but was actually removed to Chrome 74.

Remove HTTP-Based Public Key Pinning

HTTP-Based Public Key Pinning (HPKP) was intended to allow websites to send an HTTP header that pins one or more of the public keys present in the site's certificate chain. Unfortunately, it has very low adoption, and although it provides security against certificate mis-issuance, it also creates risks of denial of service and hostile pinning. For these reasons, this feature is being removed.

Remove rendering FTP resources.

FTP is a non-securable legacy protocol. When even the linux kernel is migrating off of it, it's time to move on. One step toward deprecation and removal is to deprecate rendering resources from FTP servers and instead download them. Chrome will still generate directory listings, but any non-directory listing will be downloaded rather than rendered in the browser.

Deprecations

Deprecate TLS 1.0 and TLS 1.1

TLS (Transport Layer Security) is the protocol which secures HTTPS. It has a long history stretching back to the nearly twenty-year-old TLS 1.0 and its even older predecessor, SSL. Both TLS 1.0 and 1.1 have a number of weaknesses.
  • TLS 1.0 and 1.1 use MD5 and SHA-1, both weak hashes, in the transcript hash for the Finished message.
  • TLS 1.0 and 1.1 use MD5 and SHA-1 in the server signature. (Note: this is not the signature in the certificate.)
  • TLS 1.0 and 1.1 only support RC4 and CBC ciphers. RC4 is broken and has since been removed. TLS's CBC mode construction is flawed and was vulnerable to attacks.
  • TLS 1.0's CBC ciphers additionally construct their initialization vectors incorrectly.
  • TLS 1.0 is no longer PCI-DSS compliant.
Supporting TLS 1.2 is a prerequisite to avoiding the above problems. The TLS working group has deprecated TLS 1.0 and 1.1. Chrome has now also deprecated these protocols. Removal is expected in Chrome 81 (early 2020).

Deprecate PaymentAddress.languageCode

PaymentAddress.languageCode is the browser's best guess for the language of the text in the shipping, billing, delivery, or pickup address in the Payment Request API. The languageCode is marked at risk in the specification and has already been removed from Firefox and Safari. Usage in Chrome is small enough for safe deprecation and removal. Removal is expected in Chrome 74.



Modern navigation on the web
Today, moving from page to page on the web feels like a long, slow transition - users have to stare at a white screen as their site loads and if they’re on a bad network, they’re disappointed when they see...nothing.


We want to enable developers to deliver a zero-friction, seamless experience to their users on the web and we’re excited to share two new specifications that we’ve been working on - Web Packaging and Portals.


One way to make loading fast is to get content as close to the user as possible, such as in edge caches. But the rise in HTTPS had the side effect of making this harder to achieve. And while AMP enables us to have privacy preserving pre-rendering of content with lightning fast load times, it came with the nagging issue of the browser not showing the publisher’s URL. Building on the AMP model, we introduced Web Packaging that gives the browser a proof of origin for the resources that it renders. This is achieved through Signed Exchanges, a subset of the full Web Packaging proposal.


So as long as the package is properly signed with a key that corresponds to the domain, it is presented to the user as having come from that domain. This enables privacy-preserving preloading and makes edge caching much easier, because now your content can be distributed to multiple caches without the need for an explicit DNS relationship with that cache. And we’re excited to see that Signed Exchanges are already available for origin trial. One of the first places you can see this in action is with the Google Search developer preview for signed exchange AMP content.


While instant loading is great, Portals take away the entire perception of navigation between pages by enabling multi-page sites to act like single-page applications through the same level of fluid transitions. It’s best when seen in action:




It’s still early in the development of the spec and we’d love your feedback on how we can make them more relevant for your use case.


Smooth user experience without losing developer experience
Having buttery smooth interactions is important, and as Mariko said yesterday, you can never add enough butter. However this level of UX often comes with a bitter trade-off, one that none of us like - bad developer experience. But we believe that it IS possible to break this dead-lock and that is where we’ll be spending a lot of our time in the coming year.


The Houdini APIs, such as the CSS Paint API, Animation and Layout Worklets give developers an unprecedented level of control to build new and modern interfaces.





And to give developers a well-lit path and ensure that they don’t regress from their performance goals as they build in incremental features, we’re working to build Feature Policy that catch common mistakes and give developers a signal during staging and more importantly in production. For more on this, tune in to Jason’s talk later today.


Performance at scale
Focusing on performance is critical today. Frameworks play a very important role in achieving lasting improvements at scale. We’ve already seen some great work done by various frameworks over this past year, and we want to collaborate and support their efforts in 2019.


So we’re excited to announce that starting today, we’ll be making feedback from framework teams a standard part of the Chrome Intent to Implement process. We want to use this process to include the voice of frameworks within the features that we prioritize.


Secondly, to really strengthen this collaboration, we’re launching a fund with an initial amount of $200,000 to support the development of performance related features in third party frameworks. We’ll share performance goals that we’d love to see “on by default” in frameworks. We’re excited to see what the developer community will come up with given their experience working with frameworks and the wider ecosystem. And based on the potential impact of the proposal, we’ll support your work through direct funding.


We’ll have more to share on this in the coming weeks. In the meantime, developers can go to this link to register interest. Applicants can start an RFC on the github repo of the project they intend to modify and would be considered only if the project’s core maintainers sign-off on the feature.


Meanwhile, stay tuned on the livestream to watch the rest of the sessions of day two of Chrome Dev Summit 2018!


Posted by Malte Ubl and Nicole Sullivan




PageSpeed Insights provides the following information:
  • Lab Data. PSI fetches and analyzes the page using Lighthouse, which simulates how a mobile device loads a page. It computes a set of performance metrics for the page (such as First Contentful Paint and Time to Interactive) and summarizes these metrics with a performance score from 0-100. Scores are categorized into three levels; 90 and up is considered to be a good score.
  • Field Data. PSI also displays real-world performance metrics (First Contentful Paint and First Input Delay) for the page and its origin. (As a result, we’ve also deprecated the origin: query in PSI). Note that not all sites may have field data available for display. The data set relies on a version of the Chrome User Experience Report that is updated daily and is aggregated over the previous 28 days. Keep in mind that the metrics here may be different from the ones in the Lab Data section as they capture a wide spectrum of real-world network conditions and devices used by Chrome users.
  • Opportunities. PSI provides suggestions on how to improve the page’s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.
  • Diagnostics. This section provides additional information about how a page adheres to best practices for web development.

The PSI v5 API now returns this new analysis together with CrUX data, and all Lighthouse category data (Performance, Progressive Web App, Accessibility, Best Practices, and SEO) for a given URL.

We have more information about the changes in our FAQ. If you have any questions, please use Stack Overflow and tag your question with the pagespeed-insights tag.


Posted by Rui Chen and Paul Irish



Chrome’s 10th birthday gave us an opportunity to reminisce about how much Chrome and the web have evolved over the past decade. We love seeing how rich the content, apps, and games you build have become.


Amongst other updates that we’ve made to Chrome, one that we work very hard at is making the browser fast. We see speed as one of the defining and most important features of the web. No other platform can match how quickly a user can go from discovery to the actual experience and move between websites, but this breaks down if the sites take too long to load or if the UI is janky.


Thus, we'd like to collaborate even more with the web developer community in delivering delightfully fast experiences to our end users, from the moment they click on a link.



Fast from the first click
HTTPArchive shows that since 2011, sites are using on an average of 8x more JavaScript. We’re starting to see the CPU becoming one of the main performance bottlenecks, especially with more and more code often compiled and executed on under-powered mobile devices.


Businesses who focus on the first load (and beyond) are increasingly seeing great results by focusing on the use of Performance Budgets. These budgets can be based on the byte size of your JavaScript, CSS, images and other resources, as well as other loading metrics. For example, you could specify that Time-to-Interactive will not exceed 5s on an emulated 3G network and specific class of mobile phone.


Consistently staying within budget as you add features over time isn’t easy. After Wayfair noticed their own regressions, they built an internal performance budgeting system for their developers to track their performance scores. Since then, their page speeds have continuously become faster, and they’ve seen a year-over-year conversion rate increase of more than 10%.

Pinterest revamped their mobile web experience focusing on performance and saw an uplift in user sentiment and engagement. Their mobile website is now their top platform for sign-ups! You can see their journey here:


Buttery smooth beyond the click
Optimizing the loading speed of your webpage is important, but so is ensuring that the page delivers a smooth, interactive user experience as it loads and after it’s displayed. This means responding to all user input quickly, in less than a 1/10th of a second, and ensuring that the user interface doesn’t “jank”— meaning the UI doesn’t pause and then jump suddenly.


Over the past decade, we’ve been evolving Chrome so that it can off-load as much work as possible from the main thread. For example, now we decode images and parse JavaScript separately, and with Web Workers you can execute long running JavaScript without blocking up the UI.


How buttery smooth can you make your web apps today? Especially if you have non-trivial workloads? Our team set out to explore just this, and the end result is a new application launching today called Squoosh. This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work, including using Web Assembly to do more with codecs the browser doesn’t have baked in. Tune in to Jake and Mariko's session later today to learn how they did it.
But there is even more to do here, and we are excited about up-coming platform APIs, such as Worklets , Virtual Scroller, and even a scheduler, that help developers build smoother experiences more easily. You’ll hear more about many of these tools and techniques in our Day 2 keynote and beyond.



Capable with deeper integrations
We’ve seen that PWAs make it easy to delight your users, grow engagement and increase conversions. Now with deeper integrations to the host OS and the ability to load and run faster than ever, your PWAs can really shine, yet most of these integrations have been focused on mobile-first, or even mobile-only.


Over the last 6 months we’ve been renewing our investments in providing these same set of capabilities across all desktop platforms. Chrome OS has given us a fantastic surface to really push the boundaries of the web, and based on these learnings we are expanding our Desktop PWA support across Chrome for Windows and Linux, with Mac support targeted to land in Chrome 72.



As we bring more and more capabilities to both mobile and desktop, we want to include the voice of the community to ensure we prioritize features that are important to the community. So today we are sharing our plan to get the capabilities YOU need on the web, and how we can work together to make sure we are solving your real world needs.





Helping you as a web.dev
We know that you want one place that consolidates all the reference information for modern Web APIs, and this is why we continue to collaborate with MDN on improving the core reference documentation of the web.


We have also heard that you would like more hands on guidance on how to deliver on the principles that make a web experience great. So today, we’re excited to announce a new approach: web.dev.


Through a partnership with Glitch, a deep integration with our Lighthouse tool and best-practice guidance from our team, web.dev helps you improve your site through direct and targeted best-practice and the ability to monitor your sites over time to ensure that you are always able to keep your site fast, resilient and accessible.


As we were working on web.dev, we were inspired by other amazing content on the web that help you learn. Dave Geddes, who created Flexbox Zombies and CSS Grid Critters, created a new learning game. Service Workies helps you understand Service Workers soup to nuts. The first chapter of the adventure is rolling out in beta now. We partnered with Dave to make sure the full adventure can be free to all, so check it out now and whatever you do, listen to Grannie!


Web design, right in the browser


At Chrome Dev Summit we cover all of the updates to our developer centric tools and libraries that you know and love, but we also want to show you a new, early experiment that we would love your feedback on.


We remember the impact that Firebug had when it hit the scene, and how it showed how the browser could be the developer tool platform itself. Now we are also thinking about design on the web, and just as Lighthouse started as a Chrome extension to explore, we have another extension, Project Visbug, which allows you to design — right in the browser. You can download it now, but before you do see it in action right here:



Tune into our livestream or watch the videos on the Chrome Developers Youtube channel to follow the rest of the sessions of the day and watch this space for our Day 2 wrap up blog where we will have some more exciting announcements.


Posted by Ben Galbraith & Dion Almaer




However, we've learned since then that this approach did not go far enough. In fact, more than half of these abusive experiences are not blocked by our current set of protections, and nearly all involve harmful or misleading ads. These ads trick users into clicking on them by pretending to be system warnings or “close” buttons that do not actually close the ad. Further, some of these abusive ad experiences are used by scammers and phishing schemes to steal personal information.

Two types of abusive experiences where a deceptive site control appears to do one thing, but has a different behavior when clicked. One looks like a play button on a video but sends the user to an unwanted download when clicked (left), and the other looks like a close button but instead opens unwanted pop-up windows (right).



As a result, today we are announcing expanded efforts to better protect users against these abusive experiences. Starting in December 2018, Chrome 71 will remove all ads on the small number of sites with persistent abusive experiences. Site owners can use the Abusive Experiences Report in their Google Search Console to see if their site contains any of these abusive experiences that need to be corrected or removed. Site owners will have a 30 day window to fix experiences flagged by the Report before Chrome removes ads.



With Chrome, users are always in control and can disable abusive sites filtering by going to their Chrome Settings.



Stronger protections ensure users can interact with their intended content on the web, without abusive experiences getting in the way.



Posted by Vivek Sekhar, Product Manager