Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

New in Chrome 78

Chrome 78 is rolling out now!

I’m Pete LePage, let’s dive in and see what’s new for developers in Chrome 78!

CSS Properties and Values API

CSS variables, technically called custom properties, are awesome. They let you define and use your own properties throughout your CSS. But, custom properties are not much more than a simple search and replace.

html {
  --my-color: green;
}
.thing {
  color: var(--my-color);
}

If you used a variable for a color, but assigned a URL as a value, the rule would just be silently discarded. With the CSS Properties and Values API, you can define a type and default fallback value for your custom properties.

html {
  --my-color: url(‘not-a-color’); // Oops, not a color!
}
.thing {
  color: var(--my-color);
}

Registering a property is as easy as calling window.CSS.registerProperty() and providing the name of the property you’re defining the type of property it is, if it should inherit, and it’s initial value.

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Take a look at Sam Richard's Smarter custom properties with Houdini’s new API article on web.dev for complete details.

Fresher service workers

Byte-for-byte checks are now performed for service worker scripts imported by importScripts(). In the past, the only way to force an installed service worker to pick up changes to an imported script was to change the imported script's URL, usually either by adding in a semver value or hash in the URL.

importScripts('https://example.com/v1.1.0/index.js'));
importScripts('https://example.com/index.abcd1234.js'));

Starting in Chrome 78, each time an update check is performed for a top-level service worker file, Chrome will also check whether or not the contents of any imported scripts have changed. If they have, it will trigger the full service worker update flow. This brings Chrome into conformance with the spec, and matches what Firefox and Safari do.

Jeff has all the details in Fresher service workers, by default, including some important things to know about how the HTTP cache impacts the update cycle.

New origin trials

Origin trials provide an opportunity for us to validate experimental features and APIs, and make it possible for you to provide feedback on their usability and effectiveness in broader deployment.

Experimental features are typically only available behind a flag, but when we offer an Origin Trial for a feature, you can register for that origin trial to enable the feature for all users on your origin.

Opting into an origin trial allows you to build demos and prototypes that your beta testing users can try for the duration of the trial without requiring them to flip any special flags in Chrome.

There’s more info on origin trials in the Origin Trials Guide for Web Developers. You can see a list of active origin trials, and sign up for them on the Chrome Origin Trials page.

Native File System

An Origin Trial for the Native File System API starts in Chrome 78 and is expected to run through Chrome 80.

The Native File System API enables developers to build powerful web apps that interact with files on the user's local device. After a user grants a web app access, this API allows web apps to read or save changes directly to files and folders on the user's device.

I’m really excited about all of the new experiences this enables, no more having to “upload” or “download” files I want to work with. Check out my post about the Native File System for all the details, including code, a demo, and how we’re working to keep users safe.

SMS Receiver

An Origin Trial for the SMS Reciver API starts in Chrome 78 and is expected to run through Chrome 80.

The SMS Receiver API, now available as an origin trial, lets your web app receive specially formatted SMS messages for your app's origin. From this, you can programmatically obtain an OTP from an SMS message and verify a phone number for the user more easily.

Eiji wrote Verify phone numbers on the web with the SMS Reciver API with all the details, and how to sign up for the origin trial.

Chrome Dev Summit 2019

Don’t forget to tune into the Chrome Dev Summit on November 11th and 12th, it’ll be streaming live, on the Chrome Developers YouTube channel.

Further reading

This covers only some of the key highlights. Check the links below for additional changes in Chrome 78.

Subscribe

Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you’ll get an email notification whenever we launch a new video, or add our RSS feed to your feed reader.

I’m Pete LePage, and as soon as Chrome 79 is released, I’ll be right here to tell you -- what’s new in Chrome!

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!