Apple Safari Ships Service Worker and Progressive Web App (PWA) Support on iOS 11.3
In the early morning hours of March 30, 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!
Apple also shipped support for 'add to homescreen' using the web manifest file.
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.
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.
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 attactive 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 avaoiding 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 implemnent it. Service workers enable key technologies we desprately 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 recomendation, use the web to build mobile apps.
iOS Safari Progressive Web App Limitations
This is Apple's initial release of service workers and a progressive web application experience. Like any first release there are some limiations compared to Android and other browser implementations:
- You are limited to 50 Mb of PWA storage, which does not fall in-line with the defacto standards, at least on the surface. Remember on mobile storage & memory constraints are tighter, so you are naturally limited.
- After a few weeks dormat, iOS will clears the app's cache & persisted resources.
- No access to many platform features, which is to be expected. Don't worry, very few web sites or native apps leverage these APIs anyway
- Use of the native app payment system is not available, but this should be no surprise. I have always recommended payment gateways like Stripe anyway. I mean 30% is more than 10x the going rate.
- On iPad, no access to work with Side or Split Views sharing the screen with other apps
- No Push Notifications
- The display: fullscreen and display: minimal-ui won�t work on iOS; fullscreen will trigger standalone. minimal-ui launches the app in Safari. The mobile-web-app-capable META tag still works.
- No Background Sync
- No way to lock the orientation of your PWA
- The web manifest theme-color is not supported. The deprecated meta tag for black or white status bars still works.
- The web manifest's start_url value is not used to launch progressive web apps. You can still use navigator.standalone to track useage.
- web manifest icons are not yet used for home screen icons, again fall back to the touch icon META tags.
You should also design your mobile UX accordingly to allow users to go back to the previous page. This is nothing new, as the iPhone does not have a back button like Android.
The native WebView, used by pseudo browsers like Chrome, Edge, FireFox and Facebook, does not yet support service workers. But if you design your web app using progressive enahncement this will not affect you.
Don't let lack of these features be a deterant. 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.
You can still use something like the Cubiq.org Add to Homescreen library.
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.
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 psuedo argument against investing in Progressive Web Apps has been destroyed.
If you are a developer now is the time you need to learn PWA development. My course Progressive Web Apps From Beginner to Expert will take you through the introductory concepts and dive deep into details you need to understand to develop effective service workers and great user experiences.
Enroll today and don't delay. The demand for skilled progressive web app developers is rising. For only $29 you gain access to over 21 hours of online training!