🍎Apple Safari Ships Service Worker & Progressive Web App Support

Last Updated - Sat Jan 09 2021

In the early morning hours of March 30 2018, Apple quietly shipped iOS version 11.3. Included in the release was what I consider the most important Apple announcement since the iPhone, Safari 13 and iOS 11.3 shipped service workers support!

This means iOS now has the major technical plumbing requirements for Progressive Web Apps (PWA).

Install PWAs on iOS without App Store
Can store offline data and files up to 50 Mb
No Push Notifications
Users can change icon’s name before installing the PWA

This is exciting news for both business stakeholders and web developers. Progressive web apps give businesses a proven strategy to reach and engage customers across multiple platforms cost effectively. Developers can leverage their web development skills to create these experiences without learning platform specific languages.

Apple is the last major platform to deliver service worker support, which means sites using service workers can deliver a faster, offline capable experience to end users.

While there are some limitations compared to Safari, Edge and FireFox, you don't need to worry about overly degraded PWA experiences on iOS. Your applications can still leverage many modern features in Safari.

Progressive Web Apps deliver user experiences that rival native apps. For most this means you no longer need a native app and can forgo the frustration of App Store submissions. There is no 30% revenue tax and no App Store censorship issues. But one of the best advantages is updates are instantly available to visitors, no 1-2 week deployment delays for new content and bug fixes!

Apple Safari supporting service workers and the web manifest file is great news, but you may not want to retire some of the legacy code just yet. This is an early release and some features and functionality is not yet fully baked. This means you should still include iOS web app META tags and your custom add to home screen prompt. Keep reading for more details.

Ricky Mondello on Apple Shipping Service Workers

If you don't know what a Progressive Web App is, they are a web sites utilizing modern platform APIs and development best practices to create a user experience as good, if not better, than native apps.

Progressive web apps offer a great solution for businesses to reach and engage with customers. They can be instantly installed without the friction of the App Store.

PWAs run within the context of the browser, but utilize the new service worker technology. Service workers run in a separate, background thread, from the main browser. They can act as a proxy between the browser UI and the network. Proper use of service workers make PWAs work offline and load instantly.

This is great news for both businesses and developers. Since Apple started purging and rejecting hundreds of thousands of apps from the App Store progressive web apps represent an even better avenue for them to engage customers. Now Apple offers support for the key PWA features that make PWAs an even more attractive front-end solution.

Safari 13 New Features

The PWA support is not the only new features added to iOS Safari. These are the high level features added to mobile Safari:

Service Workers. Implement background scripts for offline web applications and faster web pages
Payment Request. Provide a consistent user payment experience in Safari using a standards-based API
Security Improvements. Improved protection against memory corruption and code execution attacks
Web Inspector Updates. New designs for the Network Tab and the Styles sidebar in the Elements Tab

Safari adding support for more modern capabilities is exciting. Safari, especially on iOS has been the modern equivalent of Internet Explorer 6 by not implementing or actively participating in web standards development.

That attitude seems to be thawing, which bodes well for consumers, businesses and developers. This means we are long longer limited to creating cross-platform experiences through code silos tied to native, proprietary platforms.

The other three features are exciting, but not near as much as service workers in iOS Safari.

Progressive Web Apps on iOS

This first public release is limited to intercepting network requests and interacting with the Cache API. Push and Background Sync are not yet supported. This is OK, I suspect they will be added in the near future.

It will be hard for Apple to ignore these features as the other major browsers have either shipped push and background sync or will in the next month.

All Good Things Come Back in Style

If you recall, Apple was bullish about using the web as mobile apps when the iPhone was introduced. I wont bore you with the details, but before there was an App Store and the concept of native mobile apps, there were web apps.

These were the crude pre-cursors to Progressive Web Apps. Unfortunately, at the time, the web was not ready for mobile. At the time it had just won the desktop from traditional applications. But browsers and web standards were not designed with mobile in mind.

At the time we could design a web experience for desktop. We knew what input modalities would be used (typically keyboard and mouse) and the standard view ports (monitor dimensions). 1024x768 was the most common standard, but we were just starting to get higher resolution monitors adopted by many. But in general a simple, flexible, three column web layout would work in just about every situation.

Mobile changed that. Not only were we limited to 380x420 at the time, we also needed to adjust font sizes, etc. This gave birth to responsive web design.

With media queries we could not design very flexible layouts, allowing us (web developers and designers) to craft user experiences that would adapt to the user's screen.

But we needed more.

Sure we needed more 'native' capabilities, but we also needed a better way to craft web experiences. So we ran to what are called single page apps. This class of web app tries its best to mimic native application user experience by avoiding the page flicker as new content is loaded.

Today, that has changed with PWAs. This is not a radically new way to build sites, but more of a combination of modern capabilities and best practices. The capabilities or APIs are due to the knowledge and experience we have gained through the mass adoption of mobile computing. In other words we have a very good idea what is needed and how to implement it. Service workers enable key technologies we desperately needed.

So now with Apple shipping service worker support and the initial vestiges of an add to home screen experience based on the web manifest file we are back to the original Apple recommendation, use the web to build mobile apps.

iOS Safari Progressive Web App Limitations

The original service worker release had some limitations. Most have since been updated to be level with Edge and Chrome.

Native push notifications and background-sync are the two main features still lacking on iOS. There are a few other modern APIs that have since been released in competing browsers on other platforms too.

Don't let lack of these features be a deterrent. My suspicion is push notifications will be added in the near future. I think you can still use web notifications, but the browser must be loaded for those to trigger. SMS is another effective fallback.

How Do You 'Install' an iOS Safari Progressive Web App?

Unlike Android Safari does not prompt the user with a Web App Banner asking the user to 'install' the PWA. I don't find this surprising either. Apple has never offered a native prompt to add web apps to the home screen.

Don't let that discourage you. I released an updated Add to Homescreen library that abstracts all sorts of browser and platform differences away. It also allows you to control when and how the user is prompted to install your PWA.

You should also check out the PWA Starter tool I recently launched to help you scaffold your web manifest file, icons, initial service worker and add to homescreen library and more.

Users must open your web site in Safari and then press the 'Share' icon. From that menu they need to select the 'Add to Home Screen' option. This is no different than web apps have required since the first iPhone.

After the PWA is added to the iPhone or iPad home screen, it will looks other native app icons.

I still think this is a little extra friction than should be required, but for now I will take what I can get. I hope this streamlines in the near future.

Summary

It is truly an exciting moment in the history of the web. Apple has not adopted standard functionality like service workers in a while. This is a huge step for the popular platform to enable businesses to cost effectively engage with customers.

This also marks a major point in the life cycle of the modern mobile app era. We know consumers have been ignoring them more and more in recent years as app fatigue has set in. Progressive Web Apps offer a lower cost way for businesses to reach customers without the costs and friction of the stores.

Today, we have support available to general consumers on every platform. The last pseudo argument against investing in Progressive Web Apps has been destroyed.