Google Chrome & PWAs
Updates worth mentioning for Progressive Web Apps
This is a Note: a sometimes short, sometimes incomplete, living document.
Sponsored by you: PayPal donation, or buying me a coffee.
Chrome 114 #
๐ช Popover API
๐ช CHIPS: Cookies Having Independent Partitioned State
๐งช Experiments
- Background Blur
Chrome 113 #
๐ผ๏ธ WebGPU API: to 3D rendering and AI/Machine Learning processing
Chrome 112 #
๐ CSS Nesting
๐จ Service Worker empty fetch event handler detection for performance
Chrome 111 #
๐ View Transitions API
๐จ CSS Color Level 4
๐ซ WebSQL removed for non-secure origins.
๐งช Experiments
- Document Picture in Picture
Chrome 110 #
๐ต Default Offline page for desktop. PWAs don't need a Service Worker for installation. More details
๐ Launch Handler API (Web App Manifest addition), lets you control how your PWA launches (existing window or a new window)
๐ซ WebSQL removed for non-secure origins.
Chrome 109 #
๐ต Default Offline page for Android. PWAs don't need a Service Worker for WebAPK installation. More details
๐บ Origin Private File System (OPFS) for Android
๐งฎ MathML Core
๐ณ Secure Payment Confirmation
Chrome 108 #
๐ Viewport size units
Chrome 107 #
๐บ Screen sharing updates
Chrome 106 #
๐งช Experiments
- PopUp API
Chrome 105 #
๐ซ CSS Container Queries
๐ช Window Controls Overlay API (desktop-only)
โ๏ธ Viewport-height new client hint
โ WebSQL starts deprecation process
๐ Updating app's name in the manifest triggers a change on mobile and desktop
๐ Protocol Handlers debugger in DevTools
๐งช Experiments
- Fetch with upload streams
Read More
Chrome 104 #
๐ถ Permissions Policy for Web Bluetooth API
๐ฆ Web Bundle
๐ Web Custom formats for Async Clipboard API
๐ Changing manifest's name or icon triggers a confirmation dialog on users to accept the change or uninstall the PWA icon (desktop only)
๐งช Experiments
- Shared Element Transitions
Read More
Chrome 103 #
๐ HTTP Status Code 103 Early Hints
๐
ฐ Local Font Access API
๐ AVIF files available for Web Share
Read More
Chrome 102 #
๐ Installed PWAs as File Handlers (desktop-only)
๐ Changes on Save Data Client Hint
๐ฅ
Capture Handle (desktop-only)
๐งช Experiments
- Navigation API
Read More
Chrome 101 #
โ Priority Hints
Read More
Chrome 100 #
๐บ Multi-Screen Window Placement, to know about connected displays and place windows on specific screens (useful for PWAs on desktop)
๐งช Experiments
- Digital Goods API 2.1 updated for PWAs in Play Store
Chrome 70-99 #
Chrome 99 #
๐จ CSS Cascade Layers
๐ Show Picker for Inputs
โ๏ธ Handwriting Recognition API (ChromeOS-only), to recognize text from drawings in real time
๐พ New Canvas2D API
๐งช Experiments
- Dark mode alternative colors in Web App Manifest (origin trial)
Chrome 98 #
๐จ COLRv1 Color Gradient Vector Font Support
๐ช New way to define if you want to open a popup window or a new tab (browser) or window (installed PWA) with window.open
๐งช Experiments
- New
dynamic-range
media query for HDR-display support (flag) - Region Capture API for cropping a video track derived from display-capture of the browsing context (useful to avoid infinite mirror effect when sharing the screen) (origin trial)
- New
color-scheme
meta tagonly light
, andcolor-scheme: only light
values available for opt-out the page or specific elements in the Android Auto-Dark theme experiment
Chrome 97 #
๐ Web Transport protocol now available from the Streams API and Datagrams API over HTTP/3
๐ซ Web SQL on third-party contexts is now removed
Chrome 96 #
๐ New id
property in Web App Manifest (desktop-only), to uniquely identify a PWA by a string to avoid implementation differences that lead to problems when you change manifest's URL or the start_url.
if you already published your PWA and users have installed it you shouldn't choose your own id now and you should use the one you see in DevTools to avoid issues with your current users on desktop.
๐ค Protocol Handler in Web App Manifest to register a PWA automatically to protocols or URI schemes (desktop-only, with a permission dialog shown on first usage after installation)
โฏ๏ธ Prefers-contrast media query
๐งช New Experiments (Origin Trial)
- Prority Hints
- Auto-dark theme (Android only), automatically generated dark theme to light themed apps
Chrome 95 #
๐ URLPattern, an API that standardizes routing matching for URLs
๐ EyeDropper API for selecting colors (desktop only)
๐ Note Taking Apps Manifest meta data (note_taking
member, ChromeOS only)
Chrome 94 #
๐ผ WebCodecs
๐ ApplicationCache support is removed
๐ก Canvas color management
๐ด Idle detection API
โจ VirtualKeyboard API
๐งช New Experiments (Origin Trial)
- WebGPU
Chrome 93 #
๐ Note Taking Apps Manifest meta data (note_taking
member, ChromeOS only)
๐ User Preference Media Features Client Hint, useful to know server-side if reduced animations are preferred or if dark mode is expected among other features
๐ข WebOTP for desktop if user is logged in with same user on Android
๐ Accent-color CSS
๐จ SVG support for the Clipboard API
โฏ๏ธ Theme Color meta tag support media queries, useful for defining a different color in dark mode
๐งช New Experiments (Origin Trial)
- Window Placement: new version of this experimental API to offer a good experience in a multi-window environment
- URL Protocol Handler Registration for PWAs (re-posted from Chrome 92)
- Window Controls Overlay for Installed Desktop Web Apps, useful for rendering content with HTML in the title bar
Chrome 92 #
๐ Video Conference actions for Media Session API
๐งช New Experiments (Origin Trial)
- File Handling API, register a PWA to open a file type within the OS
- Shared Elements Transitions for SPAs and MPAs
- URL Protocol Handler Registration for PWAs
[Read More] (https://blog.chromium.org/2021/06/chrome-92-web-apps-as-file-handlers-new.html)
Chrome 91 #
โ๏ธ Web Assembly SIMD, access to SIMD instructions that can increase performance with paralellism and a new 128-bit value type
๐ช PWA Run on Startup (Desktop-only), after installing a PWA you can go to chrome://apps
, right-click on a PWA and confirm you want to run it automatically on start-up
๐ Clipboard Read File access (Desktop-only)
๐ Gravity Sensor, measures the force of gravity on x, y and z axes (more accurate than calculating the data from accelerometer)
๐ Suggested file name and location for File System Access API (Desktop-only)
๐ WebSockets over HTTP/2; it will decrease the time to open a WebSocket reducing RTTs
๐ข CSS @counter-style
๐ค Form Controls Visual Refresh (Android-only)
๐ข WebOTP for cross-domain iframes (Android-only)
๐งช New Experiments (Origin Trial)
- Handwriting Recognition API (ChromeOS-only), to recognize text from drawings in real time
- WebTransport, a client-server bidirectional API using UDP-like datagrams and cancellable streams (both for unreliable and reliable data)
- Declarative Link Capturing (ChromeOS-only), to capture links within the OS using a new member of the Web App Manifest:
capture_links
with the possible valuesnone
,new-client
, andexisting-client
- Compute Pressure API, to anticipate and react to system load changes
- WebXR Plane Detection, to know about flat surfaces present in the userโs environment
Chrome 90 #
๐ฅ AV1 Encoder (Desktop-only) to encode video in AV1 client-side (useful for video conferencing or PWAs recording video or screencasts)
๐ width and height on <source>
within <picture>
elements will be used for Responsive Images
๐ก WebXR AR Light Estimation (Android-only)
โ Feature Policy is now Permissions Policy
๐ Typed URLs will try HTTPS first, improving performance on HTTPS websites, reducing performance on HTTP websites
๐งช New Experiments with Flags
- New PWA Install Sheet (Android-only) changing "Add to Homescreen" with "Install" and rendering description and screenshots; it replaces the old mini infobar (see this thread)
- Access read-only files form the clipboard
- Device Attributes Web API (Chrome-OS) to read information such as device's serial number on managed apps
- WebXR Depth API
Chrome 89 #
๐ฅ New "Install" icon on desktop when the PWA criteria passes
๐ต๏ธโ Display Override (Desktop-only), a new property supported in the Web App Manifest that overrides the display
default fallback chain. You can express an array of possible display values in display_override
, in order of preference. If none is supported, the browser will fallback to the display
value. For example:
{
"display_override": ["minimal-ui", "fullscreen"],
"display": "standalone",
}
In the previous example, Chrome 89 on desktop will try to use minimal-ui
as first preference; if not available, it will try fullscreen
and then standalone
.
This is going to be more useful when new display modes will become available in the future, such as tabbed mode. Today, it can be used to promote minimal-ui
on desktop while keeping standalone
on mobile.
โฌ๏ธ Installability criteria warning. From this version, PWAs with a service worker and a fetch event handler, without a real offline experience will see a warning in the Issues DevTools panel. This will affect installability in case it's not solved before August 2021.
๐น Web HID (Desktop-only) for interacting with human interface devices (HID) other than standard keyboards, mice, and gamepads.
๐ท WebNFC (Android-only) lets you read and write NFC (Near Field Communications) tags when in proximity to the user (up to 10 cm) using the NFC Data Exchange binary message format only.
๐ Web Serial (Desktop-only) for talking to hardware without drivers over a serial port in your computer or through an emulated serial connection based on Bluetooth or USB, including 3D printers, micro-controllers, Arduino and experimental hardware. Read more
๐ฏ Lighthouse 7 is included in DevTools which changes the PWA audit report
๐ WebShare and WebShare target now available on Chrome OS and Windows.
๐ Digital Goods API for Chrome-OS in origin trial (See Chrome 88 for more details on this)
โฝ๏ธ Memory Consumption will let us use performance.measureUserAgentSpecificMemory()
function to get an estimate of the memory usage of our web app
Chrome 88 #
๐ Digital Goods API for Trusted Web Activities (Android-only): in short, PWAs published in the Play Store can access Play Billing API to sell digital content and subscriptions
Chrome 87 #
๐ท Camera Pan, Tilt and Zoom (PTZ) API for Cameras and Webcams. On Android, zoom is supported for now. See web.dev article
๐ต๏ธโ Display Override, a new property supported in the Web App Manifest that if available will be used before the display property. You can express an array of possible display values in display_override
, in order of preference. If none is supported, the browser will fallback to the display
. For example:
{
"display_override": ["minimal-ui", "fullscreen"],
"display": "standalone",
}
This is going to be useful when new display modes will become available in the future, such as tabbed mode. It can also be useful today to define 'minimal-ui' for Android and desktop, and leave a fallback of standalone on Safari for iOS and iPadOS that is not supporting 'minimal-ui' and it falls back to browser instead. Check spec draft for more info
๐ช Cookie Store API for reading and writing cookies easily with JavaScript
๐ Is Input Pending an API to query in a long running task if there is an input pending to be processed that can help in UX and performance
๐ฐ Range Requests on Service Workers are now supported (for transfering data in chunks)
๐ Faster back and forward navigation, it will be enabled gradually to all users before 88. Check this article for more info
๐งช New Experiments in Origin Trials or Flag
- Font Access API: access data to local fonts installed in the system.
- WebXR Depth API: access to depth buffer info from the environment for Augmented Reality
Chrome 86 #
๐ File System Access (desktop-only). It let the PWA show a native file or directory picker to get granted read/write permissions on those elements. This API was previously known as Native File System API; it was renamed to avoid "non-inclusive language." You will see the usage of both names today in different places at this point; more info at web.dev
๐จ CSS: new :focus-visible pseudo-class and ::marker pseudo-element
โ๏ธ Pointer Events v3: added support for more inclination meta-data when using a stylus on the screen
๐จ Well-known URL for Password Change now supported: /.well-known/change-password
๐ Changes in scroll: You can opt-out with a Document Policy from Text Fragment linking; and a new beforematch
event was implemented that allows hidden content to appear when the user is searching in the browser or using fragment or hash URLs
โ๏ธ HTML in Clipboard: text/html
content is now supported in the Async Clipboard API, to copy and paste rich format in sanitized HTML format.
๐ Change for TWAs: If you are using a Trusted Web Activity for publish your PWA in the Play Store, check new requirements for quality criteria. More about this
๐งช New Experiments in Origin Trials
- WebHID: access to input and output devices that are too old, too new, or not covered by other APIs. For example, GamePads can use this API to access all the low-level functionality, not just the ones covered by the GamePad API. Granted permission is needed.
- Window Placement: get info for all screens connected in the device and place windows on each of them. Granted permission is needed.
- Web Codecs: ability to use native built-in media encoders and decoders
Chrome 85 #
๐ธ AVIF image support (Desktop-only)
โญ๏ธ App Shortcuts on Windows (it was wrongly announced as available in 84)
๐ฑ getInstalledRelatedApps can now detect Microsoft Store apps on Windows
๐ฑ getInstalledRelatedApps can now detect if your PWA was installed from the browser on Android. You need to specify a related webapp in your manifest and ask the API from within the same scope. I don't understand why you need to specify a related webapp that comes from the same manifest where you define it ๐คทโโ๏ธ (I know it's because of how the spec is defined but it's weird anyway). Have in mind there is no API yet to transfer the navigation to the standalone experience I'd you detect installation.
โจ Chrome for Android is now 64 bits
๐ Event Timing API
๐ Content Visibility CSS style to let the browser defer rendering of below the fold content
๐งช New Experiments in Origin Trials
- Portals: seamless navigation between documents for SPAs; you load a portal (similar to an iframe) and then you can make that portal become the main document.
- Fetch upload streaming
๐งช New Experiments under a flag
- Web Bluetooth additions: get a list of approved devices
No link for more info was published yet
Chrome 84 #
โญ๏ธApp Shortcuts๏ผcontextual menus now available on the PWA icon for Android: it's a static list of URLs you define in the Web App Manifest
๐โโ๏ธBetter support for the Web Animation API
๐ชQuieter Notifications on abuse๏ผif a website abuses of permission dialogs, Chrome will move into a different mode to protect users from abusive notifications. More about this
โ๏ธWake Lock๏ผKeep the screen awake preventing phone sleep, useful for PWAs that you can use hands-free (such as using SpeechSynthesis, camera, or other behaviors.
๐ขWebOTP๏ผonly for Android, it lets the app read incoming SMSs following a specific protocol, useful to speed-up 2FA
๐Content indexing๏ผThis is the only feature that I still don't see useful. It let us register offline content that our PWA can serve while offline as a way to expose that content when the user has no connection. What I don't get is the User Experience for that, the Downloads menu ๐ค
๐งชNew Experiments in Origin Trials
- Idle Detection
- QuicTransport
- Cookie Store to access cookies asynchronously from a Service Worker
- Raw Clipboard Access (lot of security and privacy risks are always discussed on this API)
- WebAssembly SIMD (high-performance using low-level CPU instructions available on some architectures)
Chrome 83 #
- Barcode Detection API
prefers-color-scheme
media query for Dark Mode
Chrome 82 was skipped during the COVID-19 pandemic
Chrome 81 #
- WebXR Hit Test for Augmented Reality
- App Icon Bading for PWAs in Stable (Android and desktop)
๐งชNew Experiments in Origin Trials
- WebNFC
Chrome 80 #
- Contact Picker
- Periodic Background Sync
- getRelatedApps: detect your app, incl. PWA in store but not WebAPK
- minimal-ui on desktop (macOS not workingThinking face)
๐งชNew Experiments in Origin Trials
- File Handler Registration
- Serial
- Scheduled Notifications
Chrome 76 #
- Dark Mode support (but not for the theme-color)
- Install button on URL Bar (only on desktop Confused face)
- Mini Info Bar now can be disabled
- WebAPKs updates every day
- Motion events will be available only on HTTPS (careful with 360/AR/VR)
Chrome 73 #
- PWAs now installable on macOS
- Chrome Lite Pages on Android on 2g or when FCP > 5s
- Preload link accepts Responsive Images
- Signed HTTP Exchanges SGX, aka AMP without Googleโs URL
- Constructable Stylesheets
- Night Mode on macOS (no MQ)
If you liked this newsletter and the content in this website, you can support me by a PayPal donation, or buying me a coffee. Thanks!