Game-Changing Safari 15.4 update for Web-Apps
Web development has been essential in my life for many years now. However, while it is so fascinating to me, it got its downsides which often lead to frustration. One of the worst things that annoyed me was that there were no fundamental standards, and many good features of browser A were not available on browser B. That got better in the last few years, especially for the typical web development applications like websites, landing pages, or dashboards; the compatibility became excellent these days.
But the web is evolving, and traditional websites aren’t the only requirement anymore. Web-Apps or Progressive-Web-Apps are a continuation of evolution and combine the world of the web with that one of natives apps from mobile or desktop devices.
While an essential website won’t have any significant issues with browser compatibility anymore, it’s a different story for PWAs. The requirements are often way higher, and some years ago, the required features would have seemed like a daydream to many developers. Of course, no dreams anymore, but it isn’t possible to utilize many of those features in production due to a lack of widespread compatibility.
And with Web Apps came back the frustration.
The differences between Chrome, Safari, and Edge were actual brake pads in the evolution; many features felt available, but they weren’t usable in a production scenario. Luckily IE11 wasn’t a real topic anymore, but the early Edge browser was still a horrible experience for PWAs. For app development, you eventually will need features like push notifications, a reliable offline experience, access to native device features, background tasks, or the ability to store more significant amounts of data performantly.
For a production-ready business app, the major browsers were inadequately supported by those requirements. Chrome was the one that pushed forward in the field and made a lot of features available, while they were often missing in Safari. Even when Edge got its Chromium upgrade, the base problem still existed, and so it was not possible to build a production-ready PWA for many use-cases. Ultimately the majority kept building native apps. And that was frustrating! PWAs were often just better websites and stayed inferior to native apps; that was how I experienced it for quite a time.
Finally, the Filesystem is available in 2022
A relief for me was the announcement of the WebKit team early this year. With Safari 15.2, the File System Access API was finally available in the second major browser next to Chromium, and with version 15.4, we were then able to utilize the Filesystem in production. After some years of waiting for wildly available features, that was a huge milestone.
As a company, we are working on mission-critical PWAs, which store “golden data” captured in the field on smartphones and tablets for time-critical reports with form data and many photos. This process eventually results in large amounts of persisted data that must stay on the device for a while.
We name it golden data because the agents in the field rely on this data, and the WebApp must keep the data safe until it’s processed and uploaded to the backend, which can be a problem in some places.
Before, we utilized the asynchronous storage IndexedDB, a stable evergreen key-value storage for this application. But it never felt like it was made for storing extensive data, and especially on slower devices, larger images lead to high CPU usage and stress on the app. In some cases, the indexedDB even crashed. You can read more about that in this article.
In some cases, the indexedDB even crashed
In case of a crash, the data was often lost. The Filesystem API works differently and is not likely to crash, even with high I/O rates from 40+ megapixel cameras. The API provides an interface for the solid underlying device filesystem. I like this improved way of storing files over IndexedDB, which prevents data loss when the user accidentally uninstalled the app or cleared the browser’s cache. Purging the Filesystem needs to be done on purpose, and with that, it provides a long-missing and critical storage feature for PWAs.
IndexedDB is a great storage tool and got a central role in our development, but we won’t use it anymore for large files or blobs.
The game has changed.
The working Filesystem is excellent, but still, it’s only a single feature and there is more to come. What stands out is Webkit, and its team, which seems to go in the right direction and implement more future standards. Chromium and Webkit are foundations for future PWA development, and it’s great for everyone when those engines get more features and close the gap between them.
I hope that this trend keeps its pace, and to honor this update, I will use the Apple’s original term for PWAs, “Web Apps” more often :)
