Maximiliano Firtman's articles, notes and learning experiences for devs๏ผfirt.dev

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

Read More

Chrome 113 #

๐Ÿ–ผ๏ธ WebGPU API: to 3D rendering and AI/Machine Learning processing

Read More

Chrome 112 #

๐Ÿ“ CSS Nesting
๐Ÿ’จ Service Worker empty fetch event handler detection for performance

Read More

Chrome 111 #

๐Ÿ“ View Transitions API
๐ŸŽจ CSS Color Level 4
๐Ÿซ™ WebSQL removed for non-secure origins.
๐Ÿงช Experiments

  • Document Picture in Picture

Read More

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.

Read More

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

Read More

Chrome 108 #

๐Ÿ“ Viewport size units

Read More

Chrome 107 #

๐Ÿ“บ Screen sharing updates

Read More

Chrome 106 #

๐Ÿงช Experiments

  • PopUp API

Read More

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

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

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

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

Read More

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)

Read More

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 tag only light, and color-scheme: only light values available for opt-out the page or specific elements in the Android Auto-Dark theme experiment

Read More

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

Read More

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

Read More

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)

Read More

Chrome 94 #

๐Ÿ“ผ WebCodecs
๐Ÿ‘‹ ApplicationCache support is removed
๐ŸŸก Canvas color management
๐Ÿ˜ด Idle detection API
โŒจ VirtualKeyboard API

๐Ÿงช New Experiments (Origin Trial)

  • WebGPU

Read More

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

Read More

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 values none, new-client, and existing-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

Read More

Chrome 89 #

Chrome 89 changes the Install icon on Desktop

๐Ÿ–ฅ 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

Read More

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

Read More

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

Read More

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

Read More

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)

Read More

Chrome 83 #

  • Barcode Detection API
  • prefers-color-scheme media query for Dark Mode

Read More

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

Read More

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

Read More

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)

Read More

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)

This note is mantained by Maximiliano Firtman Twitter @firt About Newsletter

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!