Pete is a Developer Advocate
Badging for App Icons
The Badging API 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.
New in Chrome 77
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 Native File System API: Simplifying access to local files
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.
A Contact Picker for the Web
Access to the user’s contacts has been a feature of native apps since (almost) the dawn of time. The Contact Picker API is an on-demand API 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.
New in Chrome 76
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!
Updating WebAPKs More Frequently
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.
Address Bar Install for Progressive Web Apps on the Desktop
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.
New in Chrome 75
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!
How do I notify users that my PWA is installable?
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.
New in Chrome 74
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!
New in Chrome 73
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!
New in Chrome 72
In Chrome 72, creating public class fields in JavaScript is now much cleaner, you can see if a page has been activated with the new User Activation API, localizing lists becomes way easier, and there’s plenty more. Let’s dive in and see what’s new for developers in Chrome 72!
Check If Your Native App Is Installed With getInstalledRelatedApps()
As the capability gap between web and native gets smaller, it gets easier to offer the same experience for both web and native users. This may lead to cases where users have both web and native versions of the same app 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.
I’m Awake! Stay Awake with the WakeLock API
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.
Registering as a Share Target with the Web Share Target API
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.
New in Chrome 71
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!
New in Chrome 70
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!
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 Desktop
Progressive Web Apps work on the desktop, including Chrome OS, Mac, Linux, and Windows.
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 Update or Case Study
This is the page description placed in the head.
Writing an Article
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 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
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 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.
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