WebPush for iOS, ChatGPT for web devs, Apple Vision Pro, updates to Chrome, and more!
Hi! 👋
I've been busy teaching, writing and coding mobile and web apps, so I've collected many news for you in today's newsletter.
Did you know...? A list of short news you may have missed.
ChatGPT for Web Developers
Web Push on iOS is here, kind of
Chromium updates for PWAs
Web Apps for iOS 17 and macOS Sonoma later this year
Safari for Apple Vision Pro: The Spatial Web 🥽
I'm going to iJS New York in September to teach a WebAuthn workshop, so I hope to see some of you there or around the world on another workshop or session 😀 Let's keep in touch!
Did you know...?
Stable version for web capabilities. At Google I/O, a new multivendor effort has been announced: Baseline. The idea is to version the capabilities of the Web on modern web browsers once per year as a stable version of web capabilities. MDN and web.dev will highlight when an API is part of a Baseline version. Learn more.
A Service Worker is no longer part of the PWA criteria in Google Chrome. Therefore, if you have a valid manifest file, Chrome will offer desktop installation (110+) and WebAPK on Android (109+), whether you registered a service worker or not. If there is no connection and no service worker is provided, Chrome will offer a default offline screen with the app's icon and theme. Learn more
PWAs for the Sidebar for Microsoft Edge: you can create these PWAs by adding a new edge_side_panel attribute to your Web App Manifest. Learn more.
Learn PWA! I authored the free course (an interactive e-book) published with the help of the great team at Chrome and web.dev. Check it out!
Android added support for Passkeys: passwordless login systems are now available on iOS, iPadOS, Android, and desktop devices. Learn more about Passkeys.
Latest workshops, courses, and free videos
In the past year, I've taught many new workshops for companies and conferences around web performance, PWAs, and mobile app development (SwiftUI, Android Jetpack, and Flutter).
Still, also, I've recorded several courses available on different libraries, such as Frontend Masters and Pluralsight.
Here you have the list of new courses available:
ChatGPT and OpenAI APIs for web developers
Advanced Web Performance
A Tour of Web Capabilities
VanillaJS: You Don't Need that Library
Go Fundamentals for Web Developers
Web Authentication APIs
Web Storage APIs
JavaScript in the Background
All these courses are available as private workshops for your company, team or conference. Contact me for further details.
See full list with videos
ChatGPT for web developers
As web developers, we learn about new frontiers for our content every couple of years. We learned how to create web content for mobile devices, optimize for search engines, create standalone apps using web content, and even create VR experiences. Today, ChatGPT -and other AI-powered systems- are giving us another new world to understand.
I've already delivered a couple of workshops on how can use OpenAI APIs (such as GPT 3.5 or GPT 4) and Google's LaMDA APIs to integrate AI and LLMs output into your web apps, to create chatbots, email responses, user input analysis, copilot apps, and even structure data-generation.
But as web developers, there is more we can do today. ChatGPT and Google Bard can (directly or through plugins) browse our web to deliver better responses to their users. Also, you can create your plugins for Bing and ChatGPT.
What's the ChatGPT browser user agent?
Does it execute JavaScript?
Can we opt out of AI browsing our content?
I wrote an article about it with more details. Check it out.
Web Push on iOS is here, kind of
For a couple of months, the most requested feature for PWAs on iOS and iPadOS finally arrived: Web Push Notifications. If you want to learn how to implement WebPush for your web apps, check my course JavaScript in the Background.
However, the initial excitement ended up disappointing for several reasons: it arrived too late and was also limited in terms of user experience.
Apple decided to offer one experience on Safari for macOS and a complete experience on Safari for iOS and iPadOS regarding Web Push implementation as it only works for installed web apps.
Web Push is unavailable if your user is in Safari on iPhone or iPad. If the user installs the web app using the classic "Add to Homescreen" option, and you are using a manifest with display: standalone (aka, a PWA), you will have access to Web Push and the Badge API to set a badge to your app's icon.
What's the problem?
Users will never know that adding that web app to the home screen will give it more power. Apple doesn't support app banners, an installation API, or a menu term change (such as "Install"), maintaining a classic Apple decision to hide PWAs from the user while still technically available.
Think about a great user experience dark pattern: you have one menu item in the Share sheet ("Add to home screen") that creates completely different experiences (shortcuts to Safari or a standalone app), and the user never which experience will be available on that icon.
Testing Web Push on iOS and iPadOS is highly complicated. Safari Web Inspector doesn't offer any developer tool to debug or test a service worker's lifecycle, including receiving push or debugging your code when the push message is received.
Thanks to many reports, we know now that the subscription will be removed if Safari counts five push messages that didn't trigger a visible notification. The developer will never know what happened, as it happened to many developers that were rendering a visible notification. Still, Safari thought that wasn't the case for some unknown reason.
So yes, Apple finally added Web Push to iOS, kind of...
Check some details at WebKit's blog article
Chromium updates for PWAs
Progressive Web App capabilities are frequently changing on Chromium-based browsers; this is a list of essential additions from the last year in Google Chrome. These abilities are also available in Microsoft Edge, Samsung Internet, and other browsers.
🪟 Popover API
🍪 CHIPS: Cookies Having Independent Partitioned State
🖼️ WebGPU API: to 3D rendering and AI/Machine Learning processing
💨 Service Worker empty fetch event handler detection for performance
🏓 View Transitions API
🎨 CSS Color Level 4
🫙 WebSQL removed for non-secure origins.
📵 Default Offline page for desktop. PWAs don't need a Service Worker for installation.
🚀 Launch Handler API (Web App Manifest addition)
📵 Default Offline page for Android. PWAs don't need a Service Worker for WebAPK installation.
📺 Origin Private File System (OPFS) for Android
🧮 MathML Core
💳 Secure Payment Confirmation
📐 Viewport size units
🫙 CSS Container Queries
🪟 Window Controls Overlay API (desktop-only)
↕️ Viewport-height new client hint
🔃 Updating the app's name in the manifest triggers a change on mobile and desktop
📶 Permissions Policy for Web Bluetooth API
📦 Web Bundle
📋 Web Custom formats for Async Clipboard API
🏎 HTTP Status Code 103 Early Hints
🅰 Local Font Access API
🌠 AVIF files available for Web Share
📂 Installed PWAs as File Handlers (desktop-only)
🛟 Changes on Save Data Client Hint
🥅 Capture Handle (desktop-only)
⑇ Priority Hints
📺 Multi-Screen Window Placement
I maintain a list of these changes with links at firt.dev
Web Apps for iOS 17 and macOS Sonoma later this year
At WWDC, Apple unveiled Safari 17 and, for the first time since Steve Jobs presented "web apps" for iOS, there was a whole session targeting Web Apps. Fortunately for us (and for me), Safari now publishes quite complete documentation about what's new in every new version as you can check here.
The biggest news is the ability to install Web Apps (PWAs) from Safari 17 on macOS Sonoma at least. The feature will be available on every website, not just PWAs, even if they don't have a manifest, which is similar to Chrome's "Add shortcut" and Edge's "Install site as an App" behavior on desktop.
To install a web app, the user has to use the menu option "Add to Dock." The app will also be installed in the Applications directory despite the name of the action. Each icon you install from a website will have isolated storage except for cookies that will be cloned from the Safari browsing session. Each app will have a standalone window without a Safari user interface (navigation buttons can be enabled based on the manifest's display property), and there are many differences with web apps added to the home screen on iOS and iPadOS.
To learn more, you can check the great review from Thomas Steiner or the WWDC web apps session (first one on this topic).
For iOS 17 and iPadOS 17, Safari will add:
🎁<model> for 3D and AR files
🍿popover
🕛HTTP Early Hints
🌆HEIC/HEIF/JPEG XL
🎥Managed Media Source
🔔Web Push per profile
🫙Storage API (including estimate and removing the 1GB per origin storage policy)
💧ReadableStream
🔝Fetch Priority Hints
👩💻Web App install on macOS
📦PWA Install from SFViewController (such as Twitter In-App browser)
Finally Safari 16.4 also added:
💌Web Push!－⚠️for installed PWAs only
🔢Badging－only after a push
🆔Manifest ID with a twist
⬇️PWA installation from Third-Party browsers (only Edge added support for it)
👁️Screen Wake Lock
🌄Screen Orientation
🧑🦰User Activation
🎥Web Codecs
Check PWA compatibility for iOS and iPadOS
Safari for Apple Vision Pro: the Spatial Web
Apple unveiled in the past WWDC the Apple Vision Pro, the new AR/VR headset from Apple, coming in 2024 with its unique OS: visionOS (formerly known as xrOS).
We know that Safari is a first-class app on that device and will support content in multiples formats for its spatial computing UI:
Window mode: Your web content will be rendered in a tab or window in space contained in a flat 2D surface that exposes a viewport with a width of 1024px resizable to 1200px with a 2 dppx resolution. Fullscreen content (such as video) will appear as an standalone resizable window in visionOS.
Volume mode: if you use the new <model> HTML element or use the Quicklook AR <a> element, your 3D content will appear as a volume outside of Safari.
Full space: An immersive VR experience through WebXR, supported on Safari on Vision Pro.
Today, you can test your apps and websites with the visionOS simulator available from Xcode 15 beta 2
.
Most of the implementation is similar to what we've seen with Microsoft Edge in Hololens or Chrome on Daydream in the past, as I've covered in some sessions, such as The Web Lands in Virtual and Mixed Realities back in 2017.
Check the WWDC session or a video of Safari running different kind of web content in my Twitter account.
See you next time! Thanks for reading 😎