In iOS 11.3, Apple quietly added new technology based on the concept of Progressive Web Apps (PWA). This article shows you how PWA works. What are its capabilities and challenges? And what you need to know if you have a published PWA app.



This is a PWA App. It’s full-screen and offline on the iPad, and it also appears on the iPad Dock like any other native App in the App Store

PWA is not yet defined, but in general, it is an application created using some Web technology that does not require packaging or signing, can be run offline, can be installed selectively on a running system, and looks and performs just like any other application.

PWA apps don’t need to go through the App Store process on most platforms, and currently only Edge/Windows 10 forces PAW apps to enter the Store.

This means that on iOS, you can install PWA apps without an App Store license. This may be one of the reasons Apple hasn’t told users about this new feature. They haven’t even announced the technology in Safari, perhaps because they don’t want to confuse users.



Can you point out the difference between the Google Maps native app and the PWA version

Who created the PWA?

Actually, PWA was not invented by Apple, but by Google with the Chrome team, but before that it was originally created by Safari on the original iPhone.

At WWDC in 2007, Jobs announced in “One More Thing” : How do you make apps for the original iPhone? Using the Web application approach.

There was no App Store in the original plan for the iPhone, and the native SDK was not available for the entire first year of the iPhone. Even now, from Apple’s point of view, PWA apps are simply “Web apps on the phone’s home screen,” with an icon called WebClip.

If you want to know more, check out my Fluent conference talk last year, where I spent a minute talking about it at 10:50.

In fact, 11 years ago, the idea didn’t get much traction, and Apple didn’t update the platform. So more than a decade later, many of its problems remain unresolved. In the years since, other platforms have cloned the idea, such as the MeeGo browser on the Nokia N9 and Chrome on Android.

Chrome advances PWA-related technologies and provides a better experience. These technologies are Service Workers and The Web App Manifest specification, released March 30, 2018 on iOS 11.3, Apple is starting to support both specifications in browsers like Chrome, Fox, Samsung Internet, UC, and Opera (mostly only on Android). Other desktop browsers currently only support Service workers, but support for the Web App Manifest is also planned for this year.



At WWDC 2007, Steve Jobs announced PWAs (not called that at the time) via the first iPhone.

So PWA apps don’t pass any app store quality tests?

That’s true. However, PWA applications will only run in secure execution mode in a browser or Web platform. This means that you can “publish” apps that are not likely to be approved in the app store, such as in-house apps for company employees, but also apps with adult content. But you can’t use some native features, like Face ID on the iPhone X and ARKit for augmented reality, until the Web offers new features.

The PWA application can be run on Safari like any other web site, or in standalone mode like any other application on the system. You may be wondering if the PWA app uses a Web View, not for Safari or the install icon, but when using other browsers or Using Facebook’s internal app browser, the PWA app uses a Web View.

What can A PWA app do on iOS?

On the iOS Web platform you can:

  • geolocation
  • Sensors (magnetometer, accelerometer, gyroscope)
  • The camera
  • Audio output
  • Speech Synthesis (headphones only)
  • Apple Pay
  • WebAssembly, WebRTC, WebGL and other experimental features

Compared to the limitations of native iOS apps

  • PWA applications can only store 50 Mb of offline data and files
  • If a user has not used a PWA app for several weeks, iOS releases the app file. The icon will still be displayed on the home screen, but when clicked, the PWA app will be downloaded again
  • Features such as Bluetooth, serial ports, beacons, Touch ID, Face ID, ARKit, height sensor and battery info are unavailable
  • Execution code cannot be accessed in the background
  • You can’t access private information (contacts, location) or local social apps
  • There are no in-app payments and many other Apple-based services
  • On the iPad, you can’t use Side or Split Views to share the screen with other apps, and PWA apps always take up the entire screen
  • No push notifications, no Icon Badge integration with Siri



Even if you install a PWA app with an icon and the name Tinder, Siri can’t find it

What can A PWA app do on Android?

  • On Android, you can store more than 50 Mb of stuff
  • Android doesn’t delete its files if you’re not using the app, but it does when the phone runs low on storage. Also, PWA applications can request permanent storage if the user installs or uses it frequently
  • Connect THE BLE device to Bluetooth
  • Access the local sharing dialog box through Web sharing
  • Speech recognition
  • Background synchronization and web push notifications
  • Invite users to install the PWA application through the Web App Banner
  • You can customize the splash screen and orientation to a certain extent
  • With WebAPK and Chrome, users can only install one instance of the same PWA application
  • With WebAPK and Chrome, the PWA app shows up in the Settings screen and you can also see how the data is being used; In iOS, it’s all in Safari
  • Using WebAPK and Chrome, the PWA app manages the purpose of the URL, and if you get a URL pointing to the PWA app, it will be opened in standalone mode, not in a browser window

What can A PWA app do on iOS?

  • Users can change the name of the application icon before installation
  • This can be configured on the Configuration Profile page so that users can get shortcuts to PWA applications from the company (which is good!). . Safari uses the term WebClip to describe this feature, but according to the documentation, it doesn’t seem to be able to read the Web App Manifest



Configuration Profiles can include WebClips or PWA ICONS

How to install PWA without App Store?

This is one of the biggest challenges on iOS; there are no reminders or Banners from Safari (like a clearly Web App integration on Android). The user must somehow access your PWA link in Safari and manually click on the Share icon and then click “Add to Home screen”. There is no indication that the site you are visiting is a PWA app.



When you visit Tinder.com, you can ignore the native app banner at the top and click Share to add it to the home screen. If you want to provide users with installation tutorials, be aware that these buttons are localized to the system language.

At the same time, there are other non-native browsers in the App Store, such as Chrome, Firefox, Brave and Edge, which cannot install PWA apps and cannot use Service Workers.

Once you’ve installed a PWA app, its icon looks like any other app on the home screen, but there’s no 3D touch menu for it. If you install the same PWA app again, there will be another icon pointing to the previous PWA app (fortunately, the installed file is shared).

Of course, most Web apps provide a link that lets you install native apps from the App Store, and PWA apps also have such a link, like this Tinder example:



I already have a PWA, can it run immediately on iOS?

When users update iOS 11.3, they can install the PWA app immediately. Every PWA application can be installed, but that doesn’t mean every application will work as expected.



Uber’s PWA app looks really nice. But if you click on ‘Log in’ or ‘Continue’ it will take you to Safari, at which point you will leave the standalone mode PWA…

You may have read my previous post in the beta: Cupertino We have a problem. Unfortunately, most of the problems and challenges encountered during beta are still in the final release.



If you don’t do anything, your PWA app will appear with a black box covering the status bar so the user can’t see the time, battery status, and other information

What are the things that cause your application to fail

  • Minimal UI cannot run on iOS system; The full screen triggers standalone mode, at which point minimal-UI becomes a shortcut to Safari. However, you can use the cover-fit attribute for view extensions or deprecated meta tags to achieve something like a full-screen display of content (the status bar is still there, but overwriting your app);
  • If you rely on background synchronization, you need to have a backup implementation;
  • [Fixed] Your PWA can’t lock the horizontal and vertical display directions
  • The theme color style of the status bar cannot be changed: you can use deprecated meta tags to implement black or white status bars, or use CSS/HTML trick to fake a theme color;



Starbucks’ PWA app does not provide a return button after clicking “Sign up” and cannot cancel the selection this time. If you want to return, you need to reopen the PWA

  • If your PWA app has no return gestures or buttons on its UI, users will not be able to jump from screen to screen
  • Your Android icon might look terrible on iOS because Apple doesn’t support transparent ICONS



The Google Keep PWA version of the icon relies on the Web App Manifest specification, so it’s just a screen shot on iOS. You must provide the icon to iOS via Apple’s non-standard link TAB

  • Additionally, iOS does not get ICONS according to the Web App Manifest specification unless they are provided via an Apple-touch-link. If you do not provide the link tag, the system will use the screen shot as the PWA app icon (as seen in the Google Keep PWA example above).
  • There is no launch screen, so most color features from manifest are ignored
  • The manifest event is not triggered, so if you are trying to track the installation through these channels, the app will not run on iOS (though you can view the navigator.standalone method instead).

Keep that in mind

  • Your PWA application cannot save state between sessions. If the user leaves the PWA application and comes back, it will restart. So, if you need users to authenticate email, SMS, or two-factor authentication, remember to provide users with an appropriate solution.



Inactive PWA applications will display a white screen. It’s not running at this point, and if you switch back to them, the application will restart



The same white screen problem occurs on the iPad

  • In the list of recently used apps, PWA apps don’t show screenshots, so they look like white screens.
  • There are some bugs when your application runs in standalone mode. Don’t rely on Safari when testing.



Nasa’s PWA application tried to use the top notch area, but there were some user experience flaws

  • If you want your PWA app to use the iPhone X notch area, you’ll need to make some changes to your HTML and CSS.
  • Sometimes, when you add to the home screen but don’t use manifest, you just install a thumbnail.



A Google Map with a Starbucks logo? No, it’s just iOS after opening a bunch of PWA apps. This strange phenomenon in the list of recently used apps is due to an app loading the wrong address

  • Safari and the main screen capture share the same Service Worker record and cache file. Safari View manager (like Twitter’s built-in browser) supports the Service Workers protocol and caching, but it seems to remove all data after the session is closed.
  • Every non-native browser, Chrome, Firefox, etc., uses WebView, just like Facebook’s built-in browser. They do not support the Service Workers protocol, so the system does not install any files. My guess is that WKWebView might need an API to let the application decide what it wants to do based on the Service Workers protocol.



You can use Safari TP to debug clients and Service workers in Safari and on the “Web” (the PWA application on the main screen). It’s also easy to test over an Internet connection.

  • To debug Service Workers on iOS, You will need Safari Technology Previce or Safari 11.1 on macOS 10.11.5,10.12.6 and 10.13.4.



The Service Worker’s Inspector tool, currently in beta, does not support viewing cached content



  • Service Workers can be disabled in Settings (enabled by default).



What is this empty application

  • Sometimes, having multiple PWA open at the same time can cause the iOS taskbar to go crazy, and the PWA app will appear as a “ghost” app with no icon or title in the list of recently used apps.

The authors introduce

Maximiliano Firtman is a mobile + Web developer, training instructor, speaker and author. He is the author of several books, such as High Performance Mobile Web, published by O ‘Reilly Media.

Progressive Web Apps on iOS are here

Kevinlinkai, dreamanzhao, wu ruo, border city

Blame: Yu Tian Sang