iOS+PWA is here, are you here?

With the release of iOS 11.3, Apple quietly supported several new technologies behind the PWA concept: Service Worker, Web App Manifest, so let's take a look at how they work, what they can do, what their challenges are, and what else you should know if you have already released a PWA application.

If you don’t know what PWA is before reading this article, I can tell you that it does not have a unique and accurate definition, but what I can tell you is that it is an App created with Web technology that does not require packaging or signing, can work offline, and if you want, can be added to the desktop, and it looks like other applications.

On most platforms, PWAs are not required to be installed from the App Store, except for the Edge browser and Windows 10, which require PWAs to be in their app stores.

So, you guessed it, you can now install apps on iOS without going through the App Store. This is probably one of the reasons why Apple didn’t mention this new capability directly, they probably didn’t want to upset users and didn’t even mention this technology in the release notes for Safari.

Isn’t Apple the creator of PWA?

To be honest, the Google Chrome team created the term PWA, but the project was originally proposed on Safari in the original iPhone OS. In 2007, Steve Jobs announced "one more thing" at WWDC: how to develop applications on the original iPhone, surprisingly, it was Web App. The App Store was not in the original plan at that time, and the native SDK was not available in the first year of the iPhone's release. From Apple's perspective, even today, PWA is just a "webapp on the home screen", and the icon is called a WebClip.

• If you want, you can watch the video of my speech at the Fluent Conference last year. I mentioned this at 10:50. Video link:

https://link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Ftime_continue%3D651%26v%3DEFGltzFSK-c

11 years ago, this idea didn't get much traction and Apple forgot to update this capability, so for 10+ years, this feature was buggy and unstable. Then, a few years later, other platforms implemented this idea, including the MeeGo browser on the Nokia N9 and Android Chrome.

Chrome helps improve and implement these technologies to provide a better experience for users, mainly in the Service Worker and Web App Manifest specifications. As of today (March 30, 2018) iOS 11.3, Apple has followed Chrome, Firefox, Samsung Internet, UC Browser and Opera to support these two odd specifications. Mac version of Safari also supports Service Worker, and Web App Manifest support is also underway this year.

Wait, so these apps didn’t pass the App Store’s quality tests, right?

Yes, you guessed it right again. But PWA can only run in browsers or other web platform security policies at present, which means that you can "publish" apps that are not approved in the App Store, such as internal apps for your company's employees (including approved content), but you can't use some Native APIs, such as Face ID on iPhone X, or ARKit augmented reality, or at least, you need to wait for the web platform to support these new APIs.

PWAs can run in Safari as a regular website or in standalone mode (without the address bar and other features of Safari), just like other applications in the system.

The capabilities of PWA in iOS

On the iOS web platform, you can call the following APIs:

• Geographic information positioning
• Sensors (gyroscope, accelerometer, magnetometer)
• camera
• Audio Output
• Speech synthesis (only with headphones connected)
• Apple Pay
• WebAssembly, WebRTC, Web GL and many experimental features

What are the limitations compared to iOS native apps?

PWA can only store up to 50Mb of offline data and files

• If the user does not use the PWA for a few weeks, iOS will release the cached files of these PWAs. The desktop icons will still be there, of course. The files will be cached again when the user visits next time.
• Some Native APIs cannot be applied, such as Bluetooth, Touch ID, Face ID, ARKit, battery information, etc.
• Unable to execute code in the background
• Unable to access some private data, such as contacts, etc., and unable to access local social applications
• No access to In App Payments and many other Apple-based services
• On iPad, you cannot use split screen to share the screen with other applications, and PWA always takes up the entire screen
• No push notifications, no Siri integration

What works on Android but not on iOS?

On Android, you can store more than 50Mb of data and files

• Android will not delete the PWA file when you don't use it for a long time, but it will delete the file when the storage space is insufficient. If the user installs and uses it a lot, PWA can use *** storage
• Bluetooth access to BLE devices
• On Android, you can use the Native share dialog in the Web through the Web Share API
• Speech Recognition
• Background synchronization and offline message push
• Pop up an installation dialog box to prompt and invite users to install PWA
• You can customize (limited) the PWA splash screen and decide whether the PWA should be in portrait or landscape orientation
• In WebAPK and Chrome, a PWA can only be installed once
• In WebAPK and Chrome, the PWA appears in Settings and you can see data usage, in iOS everything is contained in Safari
• In WebAPK and Chrome, PWA will capture your URL, and if it is a link to a PWA, it will open the PWA in standalone mode instead of opening the browser.

What works on iOS but not on Android?

• Users can modify the name of the PWA before installation
• This can be modified in the configuration file, so enterprise users can install PWA from the company (this is a good point), Safari calls this WebClip (probably because it didn't read the Web App Manifest standard carefully)

How to install PWA on iOS?

This is one of the important challenges on iOS, because iOS Safari does not have any prompts or guides for users to add PWA. Android has a guide called Web App Install Banners, so users need to visit your site in Safari first, then manually click the Share icon, and then click "Add to Home Screen". During the whole process, there is no indication that this is a PWA.

Other browsers installed from the App Store, such as Chrome, Firefox, Brave, or Edge, cannot install PWAs or use Service Workers.

Once it’s installed, it will look like any other icon on your home screen, although it won’t have the 3D Touch menu. If you install the same PWA again, there will be another identical icon pointing to the same PWA (with any luck, the installed files will be shared).

In addition, many Web Apps have a prominent position to guide users to download and install native apps from the App Store, which is also displayed in PWA. This is actually a harm to the user experience, such as Tinder:

I already have a PWA site, can iOS users use it right away?

After users upgrade to iOS 11.3, they can install your PWA. No additional configuration is required for iOS. Every PWA can be installed, but this does not mean that everything will be the same as you think.

If you’re reading this, you may have read my article “Cupertino, we’re in trouble” when iOS PWAs were still in beta. The bad news is that most of the problems encountered during the beta period still exist after the release of iOS 11.3.

What's not working properly?

• Display issues: fullscreen and minimal-ui modes are not supported on iOS, fullscreen is the same as standalone mode, and minimal-ui mode is just a Safari shortcut. But you can achieve a similar fullscreen effect by using cover-fit or the deprecated private meta tag (the status bar will be there, but it will cover your app)
• Background sync is not yet supported
• Unable to lock the orientation of PWA, landscape or portrait
• The theme-color attribute does not work and the color of the status bar cannot be modified. You can set a black or white status bar by using the deprecated private meta tag, or you can use CSS/HTML to simulate theme-color

• If your PWA doesn’t have a back gesture or a return button, users won’t be able to navigate between pages.
• iOS does not support transparent icons, so be sure to pay attention

• In iOS, you cannot use the icon in the manifest.json file, but you can use the icon set by the app-touch-icon link tag. If you do not provide this link tag, Safari will use the screenshot as the icon. See the example of Google Keep PWA above.
• There is no splash screen, so most color attributes in the Web App Manifest are ignored.
• No events related to the manifest will be triggered, so you cannot use events to determine whether the user has installed it, but you can use navigator.standalone to determine whether it is running in standalone mode.

What to Remember?

• PWA cannot maintain state between sessions. If the user switches out of PWA to another app, it will restart when switching back. Therefore, if you need users to verify email, SMS or need to call another App for verification, please reconsider another implementation method.

All inactive PWAs are white screens, whether they were before or not, remember, they are not running, and if you switch back to the PWA, it will restart. Same white screen issue on iPad

• There is no screenshot thumbnail information in the PWA behind, they all look white, which is a pity
• When your app runs in standalone mode, there may be bugs. Do not use only Safari to test your PWA.

• If you want your PWA to take advantage of the iPhone X notch area, you need to do some special processing with HTML/CSS. If you don’t do it right, it will look weird.
• Sometimes, when you add it to the home screen, there is no manifest file, and all you add is a shortcut.

• Safari and the PWA added to the home screen share the same Service Worker Registration (not Service Worker instance) and cached files. Safari View Controller (such as Twitter's built-in browser) also supports Service Worker and Cache API, but it seems to delete all data after the session is closed.
• All third-party browsers (Chrome, Firefox, etc.) and all apps using WebView (Facebook's in-app browser, etc.) do not support Service Workers. My guess is that WKWebView may need an API to let app developers decide how to use Service Workers, but... who knows?

• To debug Service Workers on iOS, you need to install Safari Technology Preview or Safari 11.1

• Service Worker can be disabled via Settings -> Experimental Features (it is enabled by default)

• Sometimes, if you open a lot of PWAs at the same time, the iOS taskbar will be strange, showing a ghost app without an icon and title.

If you find any other bugs with PWAs on iOS, please comment below and I’ll file a bug report with the WebKit team. If you want to get updates on this post, follow me on Twitter @firt. If you’re in the Bay Area in June, check out my step-by-step PWA training where we’ll build a PWA that covers what most people are missing on other platforms, as well as how to survive on iOS.

If you find any other bugs with PWAs on iOS, please comment below and I’ll file a bug report for the WebKit team. If you want to get the latest updates on this post, please follow me on Twitter @firt. If you’re in the Bay Area in June, please check out my step-by-step PWA training where we’ll build a PWA that covers what most people are missing on other platforms, as well as how to survive on iOS.