Profiling Web Audio apps in Chrome
Learn how to profile the performance of Web Audio apps in Chrome using `about://tracing` and the **WebAudio** extension in Chrome DevTools.
Progressively enhance your Progressive Web App
Progressive enhancements ensure your PWA remains useful on all modern browsers, while delivering an advanced experience on browsers that support newer web capabilities.
JavaScript Promises: an introduction
Promises simplify deferred and asynchronous computations. A promise represents an operation that hasn't completed yet.
Patterns for promoting PWA installation
How to promote installation of Progressive Web Apps and best practices.
Photoshop's journey to the web
Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a publi
Codelab: Build a push notification client
A step-by-step interactive tutorial that shows you how to build a client that subscribes the user to push notifications, displays push messages as notifications, and unsubscribes the user from push notifications.
Common Issues and Reporting Bugs
There are right ways of using notifications, and ways of using them better. Learn what makes a good notification. We won't just show you what to do. We'll show you how to do it.
Common notification patterns
Displaying a Notification
Push notifications FAQ
Push events
How push works
Notification behavior
Push notifications overview
An overview of what push notifications are, why you might use them, and how they work.
Permission UX
Codelab: Build a push notification server
A step-by-step interactive tutorial that shows you how to build a server that manages push notification subscriptions and sends web push protocol requests to a push service.
Subscribe a user to push notifications
Basics of UX
The Web Push Protocol
A step-by-step interactive tutorial that shows you how to build a server that manages push notification subscriptions and sends web push protocol requests to a push service.
What makes a good Progressive Web App?
What makes a good, or great Progressive Web App?
Address Bar Install for Progressive Web Apps on the Desktop
Progressive Web Apps are easy to install with a new install button in Chrome’s address bar (omnibox).
How do I notify users that my PWA is installable?
How to promote installation of Progressive Web Apps and best practices.
PWA with offline streaming
Building a PWA with offline streaming has its challenges. In this article you will learn about the APIs and techniques that provide users with a high-quality offline media experience.
PWAs in app stores
Progressive Web Apps can be submitted to app stores like the Android Play Store or the Microsoft Store and more.
PWAs on Oculus Quest 2
The Oculus Quest 2 is a virtual reality (VR) headset created by Oculus, a division of Meta. Developers can now build and distribute 2D and 3D Progressive Web Apps (PWA) that take advantage of Oculus Quest 2's multitasking feature. This article describes the experience and how to build, sideload, and test your PWA on the Oculus Quest 2.
Quarantine your site
Take your site offline while you fix the problems.
Speed up navigations in React with Quicklink
quicklink is a library to achieve faster subsequent page-loads by prefetching in-viewport links during idle time.
Measure performance with the RAIL model
RAIL model enables designers and developers to reliably target the performance optimization work that has the highest impact on user experience. Learn what goals and guidelines the RAIL model sets out and which tools you can use to achieve them.
Introduction to Raphaël.js
Read files in JavaScript
How to select files, read file metadata and content, and monitor read progress.
Ready Player Web
The Web platform is very mature for game development nowadays. The key to building a modern web game is embracing the best practices of game design and monetization. This post provides provides guidance towards this goal.
Reduce JavaScript payloads with tree shaking
Knowing where to begin optimizing your application's JavaScript can be daunting. If you're taking advantage of modern tooling such as webpack, however, tree shaking might be a good place to start!
Reduce the scope and complexity of style calculations
Badly-timed or long-running JavaScript that triggers visual changes on your site can be a common cause of performance issues. Minimize its impact where you can.
Reduce web font size
This post explains how to reduce the size of the WebFonts that you use on your site, so that good typography doesn't mean a slow site.
Referer and Referrer-Policy best practices
Consider setting a referrer policy of `strict-origin-when-cross-origin`. It retains much of the referrer's usefulness, while mitigating the risk of leaking data cross-origins.
Registering a custom protocol handler
Registering a web-based payment app
Learn how to register a web-based payment app to a customers' browser. You'll also learn how to debug them.
Remove unused code
Analyze your JavaScript bundle to detect and remove unused code.
Rendering on the Web
Recommendations for implementing logic and rendering in apps.
Rendering performance
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
Replace animated GIFs with video for faster page loads
Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only to find out that GIF was really a video? There's a good reason for that. Animated GIFs can be downright huge! By converting large GIFs to videos, you can save big on users' bandwidth.
Request a review
You must request a review from Google to have your page or site unflagged as dangerous or possibly deceptive to users.
requestAutocomplete
Perform efficient per-video-frame operations
Register a callback that runs in the rendering steps, when a new video frame is sent to the compositor.
ResizeObserver: it's like document.onresize for elements
`ResizeObserver` notifies you when an element's content rectangle changes size so that you can react accordingly.
Resolution
Resolution is the amount of information in a frame of video.
Responsive 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
Create sites that respond to the needs and capabilities of the device they're viewed on.
Right-sized AI: Good for business, users, and the planet
Take a more sustainable approach to AI, which also benefits from lower latency, decreased costs, and increased offline access.
Route-level code splitting in Angular
Learn how to make your initial app bundle smaller by using route-level code splitting.
Route prefetching in Next.js
Route preloading strategies in Angular
Learn how to use Angular's preloading strategies for faster apps.
Same-origin policy
A browser can load and display resources from multiple sites. If there is no restriction on interactions between those resources, and if a script is compromised by an attacker, the script could expose everything on a user's browser.
"Same-site" and "same-origin"
"same-site" and "same-origin" are frequently cited but often misunderstood terms. This page explains what they are and how they are different.
SameSite cookie recipes
Sites can now explicitly mark their cookies for cross-site usage. Learn how to mark up your cookies to ensure that your first-party and third-party cookies continue to work after this change is implemented.
SameSite cookies explained
Learn to mark your cookies for first-party and third-party usage with the SameSite attribute. You can enhance your site's security by using SameSite's Lax and Strict values to improve protection against CSRF attacks. Specifying the new None attribute lets you explicitly mark your cookies for cross-site usage.
Play safely in sandboxed IFrames
Safe DOM manipulation with the Sanitizer API
The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page.
Scaling multithreaded WebAssembly applications with mimalloc and WasmFS
WasmFS and the mimalloc feature in Emscripten can help a lot with allocation and I/O performance. This guide shows how these features can lead to speed improvements of 10 times or more in some cases.
Schemeful Same-Site
The definition of "same-site" is evolving to include the URL scheme, so links between HTTP and HTTPS versions of a site now count as cross-site requests. Upgrade to HTTPS by default to avoid issues where possible or read on for details of what SameSite attribute values are needed.