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