Patterns for promoting PWA installation
How to promote installation of Progressive Web Apps and best practices.
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.
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
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.
Introduction to Raphaël.js
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
Rendering on the Web
Recommendations for implementing logic and rendering in apps.
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.
Resolution
Resolution is the amount of information in a frame of video.
"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.
Play safely in sandboxed IFrames
Securely hosting user data in modern web applications
How to securely display user-controlled content on web applications.
The Credential Management API
Sign in Users
Save Credentials from Forms
Introduction to semantics
Introduction to semantics and assistive technology
Sending messages with web push libraries
Serve responsive images
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.
The service worker lifecycle
A deep-dive into the service worker lifecycle.
Service worker mindset
Working with service workers is new and unfamiliar for many web devs. This post provides some tips for wrapping your mind around them.
Service worker registration
Best practices for timing your service worker registration.
What makes for a good sign-out experience?
Practical developer guidance about what to do when a user logs out of the website.
Sign-up form best practices
Help your users sign up, sign in and manage their account details with a minimum of fuss.
Signed Exchanges (SXGs)
An SXG is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered.
How to set up Signed Exchanges using Web Packager
Learn how to serve signed exchanges (SXGs) using Web Packager.
Simplify paint complexity and reduce paint areas
Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
Scroll snapping after layout changes
Starting in Chrome 81, scrollers remain snapped when the page layout changes. In other words, you no longer need to add event listeners to force resnapping.
Social discovery
You can influence the way your site appears when shared via social media by adding a few lines of code to each page. This can help bring more people to your site by providing previews with richer information than would otherwise be available.
Avoiding Unnecessary Paints - Animated GIF Edition
Accelerated Rendering in Chrome
Parallaxin'
Deep dive into the murky waters of script loading
Avoiding unnecessary paints
Keeping things fresh with stale-while-revalidate
stale-while-revalidate helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future.
Stick to Compositor-Only Properties and Manage Layer Count
Compositing is where the painted parts of the page are put together for displaying on screen.
Style focus
The focus indicator identifies the focused element. For users who can't or don't use a mouse, this indicator is extremely important, as it acts as a stand-in for their mouse-pointer.
Splash vector graphics on your responsive site
Handle range requests in a service worker
Make sure your service worker knows what to do when a partial response is requested.
Four common types of code coverage
Learn what code coverage is and discover four common ways to measure it.