Modern Web Weekly #34

Instagram and X both have a perfectly fine functioning PWA, but neither of them offers offline support while their native apps do.

You can see this in the screen recording below:

The native apps of X and Instagram will just show you your timeline when you’re offline. It might be outdated but you can still use the app. The PWAs just give you an empty page so they’re useless.

Why is that?

PWAs are perfectly capable of working offline, but two of the largest social media platforms couldn’t be bothered to implement it.

Native apps have set the standard for great UX while web apps are often deliberately dumbed-down versions of their native counterparts.

They're only used to get people to install the native app and people have become used to this.

A half-baked web app simply won't cut it. A PWA that doesn't work offline, that has sloppy animations, or an otherwise bad UX reinforces the idea that web apps are inferior.

This is what hurts web apps the most and (big) companies that offer a subpar web app don't help.

For PWAs to succeed, we as developers, need to take them seriously. Very seriously.

We need to create great examples that nail it when it comes to a great user experience. Anything less is simply harmful. For years, users have been conditioned to think web apps are inferior, and many, willingly or not, still reinforce that idea by providing a user experience that’s not as good as it could be.

We need to do better.

Where to start

At the very least, your web app should be able to work offline. Show something to the user when your web app is not connected to the internet. Anything is better than that white screen that says you’re offline.

You can easily do this by adding a Service Worker to your web app that caches the static assets (images, stylesheets, scripts, etc.) and HTML responses to routes you provide.

This is beneficial for all web apps, even the ones that need a network to function like messaging apps because offline support is not about providing the exact same user experience online and offline.

A far more common situation is that the user is on a flaky and/or slow connection that causes your web app to break.

Even when you’re on 5G, you can experience a bad or slow connection in certain areas or circumstances.

It is for those situations that your app should provide the best possible user experience.

If your web app uses a Service Worker, it can cache all scripts, images, stylesheets, and other assets locally, so when the user is on a bad connection, there is no bandwidth wasted on downloading these assets because they’re already there. That limited bandwidth can then be used for other stuff so your web app still provides a good user experience, despite the bad network.

That is what offline support means.

I created a basic Service Worker to make your web app work offline. Grab it from Github, add it to your web app, and share the result on X using the hashtag #ProjectServiceWorker.

GitHub - DannyMoerkerke/basic-service-worker: A basic Service Worker to make your web app work offline

A basic Service Worker to make your web app work offline - DannyMoerkerke/basic-service-worker

GitHubDannyMoerkerke

I want to collect 100 web apps that have implemented offline support through this Service Worker to raise awareness and get as many web apps as possible to work offline.

New in Safari 18

This week was of course the week of the release of Safari 18 on iOS 18 and macOS Sequoia. This version ships with View Transitions enabled by default, and links can now be opened by web apps that were added to the macOS Dock when the link is within the scope of that web app.

First, here's what the View Transitions look like on iOS 18:

Note that the back navigation animation for the page flip animation is still not correct (flips in the wrong direction) and the transitions could still be a bit smoother but it's good to see the Webkit team has implemented this.

This release also fixes dark mode switching while a PWA is open. Dark mode was already working on iOS but it could only be switched if the PWA was not running so changes only took effect if the PWA was restarted.

Now, dark mode can be switched again while the PWA is running:

Safari 18 also implements the hasUAVisualTransition property of PopStateEvent which allowed me to fix a long-standing bug in What PWA Can Do Today.

I implemented sliding page transitions for forward and backward navigation but when the user goes back by swiping to the right, the browser already provides a sliding page animation so in that case the page would slide twice and I wasn't able to detect this.

Now, in this situation, the hasUAVisualTransition property of PopStateEvent will be true when the browser provides a page animation (when swiping right to go back) so the app can skip the page transition animation:

Note that the bottom navigation slides to the right as well which should not happen and is not the case when clicking the arrow in the top left corner to navigate back. I'm not aware of any way to fix this, unfortunately.

Another nice feature that has been implemented on macOS Sequoia is link capturing by PWAs, which means that a URL is opened in a PWA that was added to the Dock instead of in a browser.

When the URL is within the scope of the PWA and is clicked in Safari it will open there and a banner will be shown to open the link in the PWA instead. If the link is clicked in any other application it will directly be opened in the PWA:

Unfortunately, this is not implemented on iOS and there's no sign when it will be, if ever.

Lastly, cross-document View Transitions are now working in Safari Tech Preview 203 on macOS Sequoia. These are transitions between separate full HTML pages which means you don't have to implement your web app as a single-page app anymore if you want to use View Transitions:

View the demo in responsive design mode here: https://glitch.com/edit/#!/view-transitions-types-demo-mpa

Navigating back with the back() method of the Navigation API didn't work for some reason so the back link is hard-coded, but it's good to see that the Webkit team is working on it!

Mastering Web Components

Mastering Web Components is a course that will take you from beginner to expert in Web Components by teaching you how can create your own reusable Web Components and integrate them into any web app.

In the full, paid version of the course, you will build an image gallery component to apply and test your knowledge of the concepts you have learned.

The course contains many interactive code examples you can study and modify to test and sharpen your skills.

In the free version, you will learn:

• how to create and register a Web Component
• how to effectively use the lifecycle methods of Web Components
• how to encapsulate the HTML and CSS of your Web Component using Shadow DOM
• how to extend native HTML elements
• how to compose Web Components with user-defined content
• how to test Web Components

You get:

• 107 page PDF
• 22 interactive code examples

The full version includes everything from the free version and you will also learn:

• how to theme and share styling between Web Components
• how to integrate Web Components into forms and validate them
• how to server-side render Web Components
• how to implement data-binding for Web Components
• how to compose Web Components using the mixin pattern
• how to build Web Components with a library

You get:

• 257 page PDF
• 45+ interactive code examples

Become a Web Components expert!