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 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 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!