Pete is a Developer Advocate
Chrome 77 is rolling out now! There’s a better way to track the performance of your site with Largest Contentful Paint. Forms get some new capabilities. Native lazy loading is here. The Chrome DevSummit is happening November 11-12 2019. And plenty more. Let’s dive in and see what’s new for developers in Chrome 77!
The new Native File System API enables developers to build powerful web apps that interact with files on the user's local device, like IDEs, photo and video editors, text editors, and more. 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.
Access to the user’s contacts has been a feature of native apps since (almost) the dawn of time. The Contact Picker API is a new, on-demand picker that allows users to select an entry or entries from their contact list and share limited details of the selected contact(s) with a website. It allows users to share only what they want, when they want, and makes it easier for users to reach and connect with their friends and family.
Chrome 76 is rolling out now! It adds support for the
prefers-color-scheme media query, bringing dark mode to websites. An install button in the omnibox to make installation of Progressive Web Apps on desktop easier. A way to prevent the mini-infobar from appearing on mobile. Increases the frequency with which WebAPKs are updated. And plenty more. Let’s dive in and see what’s new for developers in Chrome 76!
When a Progressive Web App is installed on Android, Chrome automatically requests and installs a WebAPK of your app. Starting in Chrome 76, Chrome will check for updates more frequently, ensuring icons, titles, colors, and other key properties to rolled out to your users faster.
In Chrome 76, we're making it easier for users to install Progressive Web Apps on the desktop by adding an install button to the address bar. If a site meets the Progressive Web App installability criteria, Chrome will automatically show an install icon in the address bar, making it easy for users to install your PWA.
Chrome 75 is rolling out now. There’s a new way to reduce latency on
canvas elements. Web apps can now share files to other installed apps using the system level share sheet. All of talks from Google I/O are on our YouTube channel. And plenty more. Let’s dive in and see what’s new for developers in Chrome 75!
If your PWA has use cases where it’s helpful for a user to install your app, for example if you have users who use your app more than once a week, you should be promoting the installation of your PWA within the web UI of your app. We have new recommendations on how you can promote the installation of your app.
Just in time for Google I/O, Chrome 74 is landing now! It adds support for private class fields; allows you to detect when the user has requested a reduced motion experience; adds support for CSS transition events, and plenty more. Let’s dive in and see what’s new for developers in Chrome 74!
Chrome 73 makes creating portable content easier with signed HTTP exchanges. Dynamically changing styles becomes way easier with constructable style sheets. And adds support for Progressive Web Apps on Mac, bringing support for PWAs to all desktop and mobile platforms, making it easy to create installable apps, delivered through the web. Let’s dive in and see what’s new for developers in Chrome 73!
As the capability gap between web and native gets smaller, it becomes easier to offer the same experience for both web and native users. This may lead to cases where users have both the web and native versions installed on the same device. Apps should be able to detect this situation. The
getInstalledRelatedApps API is a new web platform API that allows your web app to check to see if your native app is installed on the users device, and vice versa.
To avoid draining the battery, most devices will quickly fall asleep when left idle. While this is fine for most of the time, there are some applications that need to keep the screen or the device awake in order to complete some work. The Wake Lock API provides a way to prevent the device from dimming or locking the screen or prevent the device from going to sleep when an application needs to keep running.
The Badging API is a new web platform API that allows installed web apps to set an application-wide badge, shown in an operating-system-specific place associated with the application, such as the shelf or home screen. Badging makes it easy to subtly notify the user that there is some new activity that might require their attention, or it can be used to indicate a small amount of information, such as an unread count.
The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button.
Chrome 71 makes displaying relative time values easier with the new
Intl.RelativeTimeFormat() API. You can specify which side of the text the underline should appear on for text that flows vertically. And using the speech synthesis API now requires user activation before your computer starts talking to you! Let’s dive in and see what’s new for developers in Chrome 71!
Chrome 70 adds support for Desktop Progressive Web Apps on Windows and Linux, support for Public Key Credentials to the Credential Management API, allows you to provide a
name to dedicated
workers and plenty more. Let’s dive in and see what’s new for developers in Chrome 70!
It’s been ten years since Chrome was first released. A lot has changed since then, but our goal of building a solid foundation for modern web applications hasn’t! In Chrome 69 there’s support CSS Scroll Snapping, support for notches, web locks, and a few cool new CSS4 features. Let’s dive in and see what’s new for developers in Chrome 69!
Chrome 68 brings changes to the Add to Home Screen behavior on Android, giving you more control. The page lifecycle API tells you when your tab has been suspended or restored. And the Payment Handler API makes it possible for web-based payment apps to support the Payment Request experience. Let’s dive in and see what’s new for developers in Chrome 68!
Starting in Chrome 68 on Android, the Add to Home Screen behavior is changing to give you more control over when and how to prompt the user. If your site meets the add to home screen criteria, Chrome will no longer automatically show the add to home screen banner. Instead, you'll need to call
prompt() on the saved
beforeinstallprompt event to show the add to home screen dialog prompt to your users
Chrome 67 brings Progressive Web Apps to the desktop. Adds support for the generic sensor API, which makes it way easier to get access to device sensors like the accelerometer, gyroscope and more. And adds support for BigInts making dealing with big integers way easier. Let’s dive in and see what’s new for developers in Chrome 67!
Progressive Web Apps work on the desktop, including Chrome OS, Mac, Linux, and Windows.
Chrome 65 adds support for the new CSS Paint API, which allows you to programmatically generate an image. You can use the Server Timing API to provide server performance timing information via HTTP headers, and the new CSS display: contents property can make boxes disappear! Let’s dive in and see what’s new for developers in Chrome 65!
Chrome 64 adds support for ResizeObservers, which will notify you when an element’s content rectangle has changed its size. Modules can now access to host specific metadata with import.metadata The pop-up blocker gets strong and plenty more. Let’s dive in and see what’s new for developers in Chrome 64!
Chrome 62 improves the network information API with network quality indicators, support for OpenType Variable Fonts has landed and you can now capture and process media streams from HTMLMediaElements with the Media Capture from DOM elements API.
With Chrome 60, you can now measure time to first paint and time to first contentful paint with the Paint Timings API. You can control how fonts are rendered with the font-display CSS property. WebAssembly has landed and there's plenty more!
With Chrome 59, you can run Chrome in an automated environment without a user interface or peripherals; notifications on macOS are shown directly by the native macOS notification system; you can now capture full resolution photos with the image capture API, and there’s plenty more!
When the user adds your Progressive Web App to their home screen on Android, Chrome automatically generates an APK for you, which we sometimes call a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.
With Chrome 58, Progressive Web Apps are more immersive with display: fullscreen. IndexedDB 2.0 is now supported and sandboxed iFrames get more options. Pete LePage has all the details and how you can use these new developer features in Chrome 58.
With Chrome 57, you can now use
display: grid for grid based layouts, use the media session API to customize the lock screen and notifications with information about the media being played, and more. Pete LePage has all the details and how you can use these new developer features in Chrome 57!
With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API. CSS
position: sticky; is back - making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.
With Chrome 55, you can write promise-based code as if it were synchronous, using
await. PointerEvents provide a unified way of handling all input events. And persistent storage graduates from it’s origin trial.
With Chrome 54, you can now create your own custom HTML tag with and make re-usable web components with Custom Elements v1; it’s easier to send messages between open windows or tabs on the same origin with the
BroadcastChannel API; media experience get better on Android and foreign fetch is now available as an origin trial.
We recently made some big changes to WebFundamentals, improving navigation, adding lots of new content, and making it easier for you to contribute.
Widgets you can use to simplify your writing and development
This is the page description placed in the head.
This is the page description placed in the head.
This is the page description placed in the head.
In this codelab, you'll build an installable, Progressive Web App, which loads quickly, even on flaky networks, and when launched looks like any other installed app.
Add to Home Screen gives you the ability to let users quickly and seamlessly add your web app to their home screens without leaving the browser.
Use theme-color to set the toolbar color in Chrome for Android.
On devices with phone capabilities, make it easy for users to directly connect with you by simply tapping a phone number, more commonly known as click to call.
Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass in mobile devices.
Forms are hard to fill out on mobile. The best forms are the ones with the fewest inputs.
A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes. With responsive web design not only can our layouts change based on device characteristics, but images as well.
Much of the web isn't optimized for those multi-device experiences. Learn the fundamentals to get your site working on mobile, desktop, or anything else with a screen.
Responsive web design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices