The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Articles by Pete LePage

Pete is a Developer Advocate

http

New in Chrome 69

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!

New in Chrome 68

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!

Changes to Add to Home Screen Behavior

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

New in Chrome 67

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 on the Desktop

Desktop progressive web apps can be 'installed' on the users device much like native apps. They're fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs. They're reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.

New in Chrome 66

Chrome 66 makes CSS manipulation easier with the new CSS Typed Model Object, access to the clipboard is now asynchronous, there’s a new rendering context for canvas elements, and a better way to process Audio using JavaScript. Let’s dive in and see what’s new for developers in Chrome 66!

New in Chrome 65

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!

New in Chrome 64

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!

New in Chrome 63

Chrome 63 allows you to import JavaScript modules dynamically. My favorite interview coding question becomes a piece of cake with async iterators and generators. And you can override the browser's default overflow scroll behavior with the CSS overscroll-behavior property.

New in Chrome 62

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.

New in Chrome 61

Chrome 61 now supports JavaScript modules natively, unifying the way modular JavaScript can be written. You can now use navigator dot share to trigger the native Android share dialog. And the WebUSB API has landed, allowing web apps to access user permitted USB devices. And, there's plenty more.

New in Chrome 60

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!

New in Chrome 59

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!

WebAPKs on Android

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.

New in Chrome 58

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.

New in Chrome 57

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!

New In Chrome 56

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.

New In Chrome 55

With Chrome 55, you can write promise-based code as if it were synchronous, using async and await. PointerEvents provide a unified way of handling all input events. And persistent storage graduates from it’s origin trial.

New In Chrome 54

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.

Updates to developers.google.com/web

We recently made some big changes to WebFundamentals, improving navigation, adding lots of new content, and making it easier for you to contribute.

Widgets

Widgets you can use to simplify your writing and development

Writing an Article

This is the page description placed in the head.

Writing an Update or Case Study

This is the page description placed in the head.

Markdown syntax

This is the page description placed in the head.

Video: Web Push Notifications (I/O 2016)

Your First Progressive Web App

In this codelab, you'll build a Progressive Web App, which loads quickly, even on flaky networks, has an icon on the homescreen, and loads as a top-level, full screen experience.

Add to Home Screen

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.

Support for theme-color in Chrome 39 for Android

Use theme-color to set the toolbar color in Chrome for Android.

Click to Call

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 Orientation & Motion

Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass in mobile devices.

Create Amazing Forms

Forms are hard to fill out on mobile. The best forms are the ones with the fewest inputs.

Images

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.

Responsive Web Design Patterns

Responsive web design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices

Responsive Web Design Basics

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.

CSS Background shorthand coming to mobile WebKit browsers

Introducing Video Player Sample