Get started with Web Bundles | Web Platform

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/web-platform/web-bundles"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/web-platform/web-bundles" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/web-platform/web-bundles" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/web-platform/web-bundles?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/web-platform/web-bundles?hl=vi" /><title>Get started with Web Bundles  |  Web Platform  |  Chrome for Developers</title> <meta property="og:title" content="Get started with Web Bundles  |  Web Platform  |  Chrome for Developers"><meta name="description" content="Web Bundles enable you to share websites as a single file over Bluetooth and run them offline in your origin&#39;s context."> <meta property="og:description" content="Web Bundles enable you to share websites as a single file over Bluetooth and run them offline in your origin&#39;s context."><meta property="og:url" content="https://developer.chrome.com/docs/web-platform/web-bundles"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2019-11-11", "headline": "Get started with Web Bundles" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Web Platform", "item": "https://developer.chrome.com/docs/web-platform" },{ "@type": "ListItem", "position": 3, "name": "Get started with Web Bundles", "item": "https://developer.chrome.com/docs/web-platform/web-bundles" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/case-studies" track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs" track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights audit </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/new" track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Web Platform" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/docs/web-platform" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Web Platform" > Web Platform </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/web-platform" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-position="nav - web platform" track-metadata-module="primary nav" aria-label="Web Platform, selected" data-category="Site-Wide Custom Events" data-label="Tab: Web Platform" track-name="web platform" > Web Platform </a> </tab> <tab > <a href="https://developer.chrome.com/docs/web-platform/new-in-chrome" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform/new-in-chrome" track-type="nav" track-metadata-position="nav - new releases" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New releases" track-name="new releases" > New releases </a> </tab> <tab > <a href="https://developer.chrome.com/docs/web-platform/webgpu" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform/webgpu" track-type="nav" track-metadata-position="nav - webgpu" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: WebGPU" track-name="webgpu" > WebGPU </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Web Platform" track-name="web platform" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Web Platform </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform/new-in-chrome" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New releases" track-name="new releases" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New releases" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New releases </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform/webgpu" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: WebGPU" track-name="webgpu" data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebGPU" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebGPU </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Chrome concepts</span> </div></li> <li class="devsite-nav-item"><a href="/docs/web-platform/chrome-release-channels" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/chrome-release-channels" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/chrome-release-channels" ><span class="devsite-nav-text" tooltip>Chrome release channels</span></a></li> <li class="devsite-nav-item"><a href="/docs/web-platform/chrome-flags" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/chrome-flags" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/chrome-flags" ><span class="devsite-nav-text" tooltip>Chrome flags</span></a></li> <li class="devsite-nav-item"><a href="/docs/web-platform/chrome-variations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/chrome-variations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/chrome-variations" ><span class="devsite-nav-text" tooltip>Chrome variations</span></a></li> <li class="devsite-nav-item"><a href="/docs/web-platform/origin-trials" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/origin-trials" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/origin-trials" ><span class="devsite-nav-text" tooltip>Understand origin trials</span></a></li> <li class="devsite-nav-item"><a href="/docs/web-platform/third-party-origin-trials" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/third-party-origin-trials" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/third-party-origin-trials" ><span class="devsite-nav-text" tooltip>Third-party origin trials</span></a></li> <li class="devsite-nav-item"><a href="/docs/web-platform/origin-trial-troubleshooting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/origin-trial-troubleshooting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/origin-trial-troubleshooting" ><span class="devsite-nav-text" tooltip>Troubleshoot origin trials</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Features and APIs</span> </div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Shipped to the web platform</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/web-platform/bfcache-notrestoredreasons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/bfcache-notrestoredreasons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/bfcache-notrestoredreasons" ><span class="devsite-nav-text" tooltip>Back/forward cache notRestoredReasons API</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/web-platform/compute-pressure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/compute-pressure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/compute-pressure" ><span class="devsite-nav-text" tooltip>Compute Pressure API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/conditional-focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/conditional-focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/conditional-focus" ><span class="devsite-nav-text" tooltip>Conditional focus API</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/early-hints" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/early-hints" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/early-hints" ><span class="devsite-nav-text" tooltip>Early Hints</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/handwriting-recognition" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/handwriting-recognition" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/handwriting-recognition" ><span class="devsite-nav-text" tooltip>Handwriting Recognition API</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/long-animation-frames" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/long-animation-frames" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/long-animation-frames" ><span class="devsite-nav-text" tooltip>Long Animation Frames API (LoAF)</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/navigation-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/navigation-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/navigation-api" ><span class="devsite-nav-text" tooltip>Navigation API</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/page-lifecycle-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/page-lifecycle-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/page-lifecycle-api" ><span class="devsite-nav-text" tooltip>Page Lifecycle API</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/document-picture-in-picture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/document-picture-in-picture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/document-picture-in-picture" ><span class="devsite-nav-text" tooltip>Picture-in-Picture for any Element</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/prerender-pages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/prerender-pages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/prerender-pages" ><span class="devsite-nav-text" tooltip>Prerender with the Speculation Rules API</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/screen-sharing-controls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/screen-sharing-controls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/screen-sharing-controls" ><span class="devsite-nav-text" tooltip>Privacy-preserving screen sharing controls</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/region-capture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/region-capture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/region-capture" ><span class="devsite-nav-text" tooltip>Region Capture</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/element-capture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/element-capture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/element-capture" ><span class="devsite-nav-text" tooltip>Element Capture</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/capture-handle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/capture-handle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/capture-handle" ><span class="devsite-nav-text" tooltip>Tab sharing with Capture Handle</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/virtual-keyboard" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/virtual-keyboard" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/virtual-keyboard" ><span class="devsite-nav-text" tooltip>VirtualKeyboard API</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>View Transitions API</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/web-platform/view-transitions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/view-transitions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/view-transitions" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/view-transitions/same-document" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/view-transitions/same-document" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/view-transitions/same-document" ><span class="devsite-nav-text" tooltip>Same-Document View Transitions for SPA</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/view-transitions/cross-document" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/view-transitions/cross-document" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/view-transitions/cross-document" ><span class="devsite-nav-text" tooltip>Cross-Document View Transitions for MPA</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/web-platform/webgpu" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/webgpu" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/webgpu" ><span class="devsite-nav-text" tooltip>WebGPU</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Origin trials</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/web-platform/captured-surface-control" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/captured-surface-control" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/captured-surface-control" ><span class="devsite-nav-text" tooltip>Captured Surface Control</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/web-platform/launch-handler" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/launch-handler" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/launch-handler" ><span class="devsite-nav-text" tooltip>Launch Handler API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/web-platform/soft-navigations-experiment" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/soft-navigations-experiment" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/soft-navigations-experiment" ><span class="devsite-nav-text" tooltip>Soft navigation experiment</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>AI trials</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/ai/translator-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ai/translator-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ai/translator-api" ><span class="devsite-nav-text" tooltip>Translator API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/ai/language-detection" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ai/language-detection" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ai/language-detection" ><span class="devsite-nav-text" tooltip>Language Detector API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/ai/summarizer-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ai/summarizer-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ai/summarizer-api" ><span class="devsite-nav-text" tooltip>Summarizer API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Deprecating</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/web-platform/deprecating-unload" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/deprecating-unload" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/deprecating-unload" ><span class="devsite-nav-text" tooltip>Deprecating the unload event</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>No longer pursuing</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/web-platform/declarative-link-capturing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/declarative-link-capturing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/declarative-link-capturing" ><span class="devsite-nav-text" tooltip>Declarative link capturing</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/web-platform/storage-foundation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/storage-foundation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/storage-foundation" ><span class="devsite-nav-text" tooltip>Storage foundation API</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/web-platform/notification-triggers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/notification-triggers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/notification-triggers" ><span class="devsite-nav-text" tooltip>Notification triggers</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/web-platform/web-bundles" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/web-bundles" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/web-bundles" ><span class="devsite-nav-text" tooltip>Web bundles</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Best practices</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/web-platform/best-practices/url-protocol-handler" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/best-practices/url-protocol-handler" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/best-practices/url-protocol-handler" ><span class="devsite-nav-text" tooltip>URL protocol handler registration for PWAs</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/best-practices/webcodecs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/best-practices/webcodecs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/best-practices/webcodecs" ><span class="devsite-nav-text" tooltip>Video processing with WebCodecs</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Version History API</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/web-platform/versionhistory/guide" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/versionhistory/guide" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/versionhistory/guide" ><span class="devsite-nav-text" tooltip>Guide</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/versionhistory/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/versionhistory/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/versionhistory/reference" ><span class="devsite-nav-text" tooltip>Reference</span></a></li><li class="devsite-nav-item"><a href="/docs/web-platform/versionhistory/examples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web-platform/versionhistory/examples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web-platform/versionhistory/examples" ><span class="devsite-nav-text" tooltip>Examples</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/origintrials" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /origintrials" track-type="bookNav" track-name="click" track-metadata-eventdetail="/origintrials" ><span class="devsite-nav-text" tooltip>Sign up for origin trials</span></a></li> <li class="devsite-nav-item devsite-nav-external"><a href="https://chromestatus.com/features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://chromestatus.com/features" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://chromestatus.com/features" ><span class="devsite-nav-text" tooltip>Chrome Platform status</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-external"><a href="https://www.chromium.org/chromium-projects/" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://www.chromium.org/chromium-projects/" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://www.chromium.org/chromium-projects/" ><span class="devsite-nav-text" tooltip>Chromium projects</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights audit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights audit </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/web-platform" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Web Platform" > Web Platform </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Get started with Web Bundles </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>Share websites as a single file over Bluetooth and run them offline in your origin's context</p> <p><style> .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } </style> <div class="dcc-authors" translate="no"> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Yusuke Utsunomiya" src="https://web.dev/images/authors/uskay.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Yusuke Utsunomiya </span> <div class="dcc-author__links"> <a href="https://twitter.com/uskay" aria-label="Yusuke Utsunomiya on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://blog.uskay.io/" aria-label="Yusuke Utsunomiya's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Kenji Baheux" src="https://web.dev/images/authors/kenjibaheux.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Kenji Baheux </span> <div class="dcc-author__links"> </div> </div> </div> </div></p> <aside class="warning"><b>Warning:</b> The experimental implementation of navigation to Web Bundles was <a href="https://chromestatus.com/feature/5377722941440000">removed</a> from Chrome in February 2023.</aside> <p>Bundling a full website as a single file and making it shareable opens up new use cases for the web. Imagine a world where you can:</p> <ul> <li>Create your own content and distribute it in all sorts of ways without being restricted to the network</li> <li>Share a web app or piece of web content with your friends via Bluetooth or Wi-Fi Direct</li> <li>Carry your site on your own USB or even host it on your own local network</li> </ul> <p>The Web Bundles API is a bleeding edge proposal that lets you do all of this.</p> <h2 id="browser_compatibility" data-text="Browser compatibility" tabindex="-1">Browser compatibility</h2> <p>The Web Bundles API is currently only supported in Chromium-based browsers behind an experimental flag.</p> <h2 id="introducing_the_web_bundles_api" data-text="Introducing the Web Bundles API" tabindex="-1">Introducing the Web Bundles API</h2> <p>A Web Bundle is a file format for encapsulating one or more HTTP resources in a single file. It can include one or more HTML files, JavaScript files, images, or stylesheets.</p> <p>Web Bundles, more formally known as <a href="https://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html">Bundled HTTP Exchanges</a>, are part of the <a href="https://github.com/WICG/webpackage">Web Packaging</a> proposal.</p> <figure> <img src="/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png" alt="A figure demonstrating that a Web Bundle is a collection of web resources." width="800" height="466" srcset="https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_36.png 36w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_48.png 48w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_72.png 72w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_96.png 96w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_480.png 480w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_720.png 720w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_856.png 856w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_960.png 960w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_1440.png 1440w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_1920.png 1920w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="dcc-caption"> How Web Bundles work </figcaption> </figure> <p>HTTP resources in a Web Bundle are indexed by request URLs, and can optionally come with signatures that vouch for the resources. Signatures allow browsers to understand and verify where each resource came from, and treats each as coming from its true origin. This is similar to how <a href="/blog/signed-exchanges">Signed HTTP Exchanges</a>, a feature for signing a single HTTP resource, are handled.</p> <p>This article walks you through what a Web Bundle is and how to use one.</p> <h2 id="explaining_web_bundles" data-text="Explaining Web Bundles" tabindex="-1">Explaining Web Bundles</h2> <p>To be precise, a Web Bundle is a <a href="https://cbor.io/">CBOR file</a> with a <code translate="no" dir="ltr">.wbn</code> extension (by convention) which packages HTTP resources into a binary format, and is served with the <code translate="no" dir="ltr">application/webbundle</code> MIME type. You can read more about this in the <a href="https://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html#top-level">Top-level structure</a> section of the spec draft.</p> <p>Web Bundles have multiple unique features:</p> <ul> <li>Encapsulates multiple pages, enabling bundling of a complete website into a single file</li> <li>Enables executable JavaScript, unlike MHTML</li> <li>Uses <a href="https://tools.ietf.org/id/draft-ietf-httpbis-variants-00.html">HTTP Variants</a> to do content negotiation, which enables internationalization with the <code translate="no" dir="ltr">Accept-Language</code> header even if the bundle is used offline</li> <li>Loads in the context of its origin when cryptographically signed by its publisher</li> <li>Loads nearly instantly when served locally</li> </ul> <p>These features open multiple scenarios. One common scenario is the ability to build a self-contained web app that's easy to share and usable without an internet connection. For example, say you're on an airplane from Tokyo to San Francisco with your friend. You don't like the in-flight entertainment. Your friend is playing an interesting web game called <a href="https://proxx.app/">PROXX</a>, and tells you that they downloaded the game as a Web Bundle before boarding the plane. It works flawlessly offline. Before Web Bundles, the story would end there and you would either have to take turns playing the game on your friend's device, or find something else to pass the time. But with Web Bundles, here's what you can now do:</p> <ol> <li>Ask your friend to share the <code translate="no" dir="ltr">.wbn</code> file of the game. For example the file could easily be shared peer-to-peer using a file sharing app.</li> <li>Open the <code translate="no" dir="ltr">.wbn</code> file in a browser that supports Web Bundles.</li> <li>Start playing the game on your own device and try to beat your friend's high score.</li> </ol> <p>Here's a video that explains this scenario.</p> <p><devsite-video video-id="xAujz66la3Y"></devsite-video></p> <p>As you can see, a Web Bundle can contain every resource, making it work offline and load instantly.</p> <aside class="note"><b>Note:</b> Currently Chrome 80 only supports unsigned bundles (that is, Web Bundles without origin signatures). Bundling PROXX without signatures doesn't work well due to web worker cross-origin issues. Chrome is working on fixing this. In the meantime, check out <a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/master/content/browser/web_package/using_web_bundles.md#Dealing-with-Common-Problems-in-Unsigned-Bundles">Dealing with Common Problems in Unsigned Bundles</a> to learn how to avoid cross-origin issues.</aside> <h2 id="building_web_bundles" data-text="Building Web Bundles" tabindex="-1">Building Web Bundles</h2> <p>The <a href="https://github.com/WICG/webpackage/tree/master/go/bundle"><code translate="no" dir="ltr">go/bundle</code></a> CLI is currently the easiest way to bundle a website. <code translate="no" dir="ltr">go/bundle</code> is a reference implementation of the Web Bundles specification built in <a href="https://golang.org/">Go</a>.</p> <ol> <li><a href="https://golang.org/doc/install">Install Go</a>.</li> <li><p>Install <code translate="no" dir="ltr">go/bundle</code>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Bash"><code translate="no" dir="ltr">go<span class="devsite-syntax-w"> </span>get<span class="devsite-syntax-w"> </span>-u<span class="devsite-syntax-w"> </span>github.com/WICG/webpackage/go/bundle/cmd/... </code></pre></devsite-code></li> <li><p>Clone the <a href="https://github.com/developit/preact-todomvc">preact-todomvc</a> repository and build the web app to get ready to bundle the resources.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Bash"><code translate="no" dir="ltr">git<span class="devsite-syntax-w"> </span>clone<span class="devsite-syntax-w"> </span>https://github.com/developit/preact-todomvc.git <span class="devsite-syntax-nb">cd</span><span class="devsite-syntax-w"> </span>preact-todomvc npm<span class="devsite-syntax-w"> </span>i npm<span class="devsite-syntax-w"> </span>run<span class="devsite-syntax-w"> </span>build </code></pre></devsite-code></li> <li><p>Use the <code translate="no" dir="ltr">gen-bundle</code> command to build a <code translate="no" dir="ltr">.wbn</code> file.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Bash"><code translate="no" dir="ltr">gen-bundle<span class="devsite-syntax-w"> </span>-dir<span class="devsite-syntax-w"> </span>build<span class="devsite-syntax-w"> </span>-baseURL<span class="devsite-syntax-w"> </span>https://preact-todom.vc/<span class="devsite-syntax-w"> </span>-primaryURL<span class="devsite-syntax-w"> </span>https://preact-todom.vc/<span class="devsite-syntax-w"> </span>-o<span class="devsite-syntax-w"> </span>todomvc.wbn </code></pre></devsite-code></li> </ol> <p>Congratulations! TodoMVC is now a Web Bundle.</p> <p>There are other options for bundling and more are coming. The <code translate="no" dir="ltr">go/bundle</code> CLI lets you build a Web Bundle using a HAR file or a custom list of resource URLs. Visit the <a href="https://github.com/WICG/webpackage/tree/master/go/bundle">GitHub repo</a> to learn more about <code translate="no" dir="ltr">go/bundle</code>. You can also try out the experimental Node.js module for bundling, <a href="https://www.npmjs.com/package/wbn"><code translate="no" dir="ltr">wbn</code></a>. Note that <code translate="no" dir="ltr">wbn</code> is still in the early stages of development.</p> <h2 id="playing_around_with_web_bundles" data-text="Playing around with Web Bundles" tabindex="-1">Playing around with Web Bundles</h2> <p>To try out a Web Bundle:</p> <ol> <li>Go to <code translate="no" dir="ltr">about://version</code> to see what version of Chrome you're running. If you're running version 80 or later, skip the next step.</li> <li>Download <a href="https://www.google.com/chrome/canary/">Chrome Canary</a> if you're not running Chrome 80 or later.</li> <li>Open <code translate="no" dir="ltr">about://flags/#web-bundles</code>.</li> <li><p>Set the <strong>Web Bundles</strong> flag to <strong>Enabled</strong>.</p> <figure> <img src="/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1.png" alt="A screenshot of about://flags" width="800" height="315" srcset="https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_36.png 36w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_48.png 48w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_72.png 72w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_96.png 96w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_480.png 480w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_720.png 720w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_856.png 856w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_960.png 960w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_1440.png 1440w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_1920.png 1920w,https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-screenshot-aboutfla-d03d9ba273cb1_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="dcc-caption"> Enabling Web Bundles in <code translate="no" dir="ltr">about://flags</code> </figcaption> </figure></li> <li><p>Relaunch Chrome.</p></li> <li><p>Drag-and-drop the <code translate="no" dir="ltr">todomvc.wbn</code> file into Chrome if you're on desktop, or tap it in a file management app if you're on Android.</p></li> </ol> <p>Everything magically works.</p> <figure> <video controls playsinline autoplay loop muted> <source src="/static/docs/web-platform/web-bundles/video/web-dev-assets/web-bundles/preact-todomvc.mp4" type="video/mp4"> </video> <figcaption class="dcc-caption"> The Preact implementation of TodoMVC working offline as a web bundle </figcaption> </figure> <p>You could also try out other sample web bundles:</p> <ul> <li><a href="https://storage.googleapis.com/web-dev-assets/web-bundles/web.dev.wbn">web.dev.wbn</a> is a snapshot of the entire web.dev site, as of 2019 October 15.</li> <li><a href="https://storage.googleapis.com/web-dev-assets/web-bundles/proxx.wbn">proxx.wbn</a>: <a href="https://web.dev/articles/proxx-announce">PROXX</a> is a Minesweeper clone that works offline.</li> <li><a href="https://storage.googleapis.com/web-dev-assets/web-bundles/squoosh.wbn">squoosh.wbn</a>: <a href="https://squoosh.app">Squoosh</a> is a convenient and fast image optimization tool that lets you do side-by-side comparisons of various image compression formats, with support for resizing and format conversions.</li> </ul> <aside class="note"><b>Note:</b> Currently you can only navigate into a Web Bundle stored in a local file, but that's only a temporary restriction.</aside> <h2 id="send_feedback" data-text="Send feedback" tabindex="-1">Send feedback</h2> <p>The Web Bundle API implementation in Chrome is experimental and incomplete. Not everything is working and it might fail or crash. That's why it's behind an experimental flag. But the API is ready enough for you to explore it in Chrome. Feedback from web developers is crucial to the design of new APIs, so please try it out and tell the people working on Web Bundles what you think.</p> <ul> <li>Send general feedback to <a href="mailto:webpackage-dev@chromium.org">webpackage-dev@chromium.org</a>.</li> <li>If you have feedback on the spec visit <a href="https://github.com/WICG/webpackage/issues/new">https://github.com/WICG/webpackage/issues/new</a> to file a new spec issue, or email <a href="mailto:wpack@ietf.org">wpack@ietf.org</a>.</li> <li>If you find any issues in Chrome's behavior visit <a href="https://crbug.com/new">https://crbug.com/new</a> to file a Chromium bug.</li> <li>Any contributions to the spec discussion and tooling are also more than welcome. Visit the <a href="https://github.com/WICG/webpackage">spec repo</a> to get involved.</li> </ul> <p><strong>Acknowledgements</strong></p> <p>We would like to give a big shout-out to the wonderful Chrome engineering team, <a href="https://github.com/irori">Kunihiko Sakamoto</a>, <a href="https://twitter.com/horo">Tsuyoshi Horo</a>, <a href="https://twitter.com/toyoshim">Takashi Toyoshima</a>, <a href="https://twitter.com/kinu">Kinuko Yasuda</a> and <a href="https://twitter.com/jyasskin">Jeffrey Yasskin</a> that worked hard contributing to the spec, building the feature on Canary and reviewing this article. During the standardization process <a href="http://danyork.me/">Dan York</a> has helped navigate the IETF discussion and also <a href="https://twitter.com/dauwhe">Dave Cramer</a> has been a great resource on what publishers actually need. We also want to thank <a href="https://twitter.com/_developit">Jason Miller</a> for the amazing preact-todomvc and his restless effort on making the framework better.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2019-11-11 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2019-11-11 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Web Platform", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="EkL+R1EQwLV3PGf17ObH1THyBbAP32"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_view_transitions","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__developers_footer_image","Profiles__enable_stripe_subscription_management","Profiles__enable_release_notes_notifications","Search__enable_dynamic_content_confidential_banner","OnSwitch__enable","CloudShell__cloud_shell_button","Cloud__enable_cloudx_ping","Profiles__enable_completecodelab_endpoint","Search__enable_suggestions_from_borg","Cloud__enable_free_trial_server_call","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_recognition_badges","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_firebase_utm","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_explain_this_code","Concierge__enable_pushui","Experiments__reqs_query_experiments","MiscFeatureFlags__emergency_css","MiscFeatureFlags__enable_variable_operator","DevPro__enable_developer_subscriptions","Profiles__enable_page_saving","TpcFeatures__enable_unmirrored_page_left_nav","BookNav__enable_tenant_cache_key","Profiles__enable_awarding_url","MiscFeatureFlags__developers_footer_dark_image","Profiles__enable_completequiz_endpoint","Cloud__enable_cloud_facet_chat","Search__enable_page_map","MiscFeatureFlags__enable_project_variables","Profiles__enable_join_program_group_endpoint","Cloud__enable_cloudx_experiment_ids","Profiles__enable_profile_collections","Cloud__enable_cloud_shell","Search__enable_ai_eligibility_checks","DevPro__enable_cloud_innovators_plus","Profiles__require_profile_eligibility_for_signin","CloudShell__cloud_code_overflow_menu","Profiles__enable_public_developer_profiles","Profiles__enable_complete_playlist_endpoint","Analytics__enable_clearcut_logging","Profiles__enable_dashboard_curated_recommendations","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_llm_concierge_chat"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Get started with Web Bundles | Web Platform | Chrome for Developers