原文：Progressive Web Apps on iOS are here
Author : Maximiliano Firtman
In iOS 11.3, Apple quietly added new technology based on the concept of " Progressive Web Apps" (PWA ). This article takes you to see 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 that can be displayed in full screen on the iPad, has offline capabilities, and it also appears in the iPad Dock like other native apps in the App Store.
There is no exact definition of PWA, in general, it is an application created using some kind of Web technology that does not require packaging or signing, can run offline, and can be selectively installed in the running system, whether it is In terms of appearance and execution, it is no different from general applications.
PWA apps do not need to go through the App Store process on most platforms, and only Edge/Windows 10 currently enforces PAW apps in the store.
That is to say, on the iOS platform, you can install PWA applications without App Store authorization. This may be one of the reasons why Apple hasn't introduced this new feature to users. They haven't even made an announcement about this technology in Safari, maybe 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 PWAs?
In fact, PWA was not created by Apple, but Google created the term PWA with the Chrome team, but before that, the idea first came from Safari on the original iPhone system.
In 2007, at the WWDC conference, Jobs announced in "one more thing": How to develop applications in the original iPhone? Ways to use web applications.
There was no App Store in the original planning of the iPhone system, and the native SDK was unavailable throughout the first year of the iPhone device. From Apple's point of view, even now, PWA applications are just "web applications on the main interface of the phone", and its icon is called WebClip (web application shortcut).
If you want to know more about it, check out the talk I gave at the Fluent conference last year , where I took a minute to mention it at 10:50.
In fact, 11 years ago, the idea didn't get a lot of attention, and Apple didn't update the platform. So more than 10 years later, many of its problems are still unresolved. In the years since, other platforms have cloned the idea, such as the Nokia N9's MeeGo browser and the Chrome browser on Android.
Chrome promotes the development of PWA-related technologies and provides a better experience. These technologies are mainly the Service Workers and Web App Manifest specifications, which were released on March 30, 2018 by iOS 11.3, and Apple began to support these two specifications on browsers such as Chrome, Firefox, Samsung Internet, UC, and Opera (most of which are only available in Android platform). Other desktop browsers currently only support Service Workers, but are also planning to support the Web App Manifest this year.
At WWDC 2007, Steve Jobs released PWAs on the first iPhone (not by that name at the time)
So PWA apps don't have to pass any app store quality tests?
Indeed it is. However, PWA apps will only run in the safe execution mode of the browser or web platform. This means that you can "publish" apps that are impossible to approve in the app store, such as internal apps for company employees, and of course apps that contain 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 platform provides corresponding new features.
PWA applications can run on the Safari browser like other websites, and can also run in standalone mode like other applications on the system. You might wonder if the PWA app uses the 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 the Web View.
What can PWA applications do on iOS?
On the iOS web platform you can do:
- Geolocation
- Sensors (magnetometer, accelerometer, gyroscope)
- camera
- Audio output
- Speech synthesis (connected to headphones only)
- Apple Pay
- Experimental features like WebAssembly, WebRTC, WebGL, and more
Limitations compared to native iOS apps
- PWA apps can only store 50 Mb of offline data and files
- If a user doesn't use a PWA app for a few weeks, iOS releases the app files. Although the icon will still be displayed on the home screen, when clicked in, the PWA application will be re-downloaded
- Some features such as Bluetooth, serial port, beacons, Touch ID, Face ID, ARKit, altitude sensor and battery information are not available
- No access to executing code in the background
- No access to private information (contacts, location) and no access to native social apps
- No in-app payments and many other Apple-based services
- On iPad, you can't use Side or Split Views to share your screen with other apps , PWA apps always take up the entire screen
- No push notifications, no icon badge (shows a little red dot on the app icon) Integrate with Siri
Even if you install a PWA app with an icon and the name Tinder, Siri can't find it
What can PWA apps do on Android?
- On Android, you can store more than 50 Mb
- Android doesn't delete its files if you don't use the app, but it does when the phone's storage isn't enough. At the same time, if the user installs or uses frequently, the PWA application can request permanent storage
- Connect Bluetooth for BLE devices
- Access the local share dialog via web sharing
- Speech Recognition
- Background sync and web push notifications
- Invite users to install PWA apps via Web App Banner
- You can customize the splash screen and orientation you want to a certain extent
- With WebAPK and Chrome, users can only install one instance of the same PWA app
- With WebAPK and Chrome, the PWA app is displayed in the settings interface, and you can also see data usage; in iOS, this is reflected in Safari
- With WebAPK and Chrome, the PWA app manages the usage of the URL, if you get a URL that points to the PWA app, it will open in standalone mode, not in a browser window
What can a PWA app do on iOS?
- User can change the name of the app icon before installing
- This can be configured on the configuration profile page so that users can get shortcuts to PWA apps from the company (which is nice!). Safari uses the term WebClip to describe this feature, however 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
If there is no App Store, how to install PWA?
This is one of the biggest challenges on iOS, there are no alerts or invitations from Safari (like Web App Banners on Android). The user must somehow visit your PWA link in Safari and manually click the share icon and then click "Add to Home Screen". There is no indication that the website you are visiting is a PWA app.
When you visit Tinder.com, you can ignore the native app banner at the top and hit share to add it to your home screen. If you want to provide installation tutorials to users, it is important to note that these buttons are localized for the system language.
At the same time, there will be other non-built-in browsers in the App Store, such as Chrome, Firefox, Brave and Edge, which cannot install PWA applications, nor can they use Service Workers.
Once you've installed a PWA app, its icon will look the same as 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 files are shared).
Of course, most web apps provide a link that allows you to 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 on the iOS platform right now?
When users update iOS 11.3, they can install PWA applications immediately. Every PWA app can be installed, but that doesn't mean every app will work as expected.
Uber's PWA app looks really nice. But if you click "Login" or "Continue", it will transfer to Safari, and then you will leave the PWA in standalone mode...
You may have seen my previous post in beta: Cupertino we have a problem . Unfortunately, most of the issues and challenges encountered during the beta are still present in the final release.
If you do nothing, your PWA app will appear with a black box covering the status bar so the user cannot see the time, battery status and other information
What can make an app not work
- Display: Full-screen display: minimal-ui cannot run on iOS; full-screen will trigger standalone mode, and minimal-ui becomes a shortcut for Safari. However, you can use the cover-fit attribute as a view extension or the deprecated meta tag to achieve a full-screen-like content display (the status bar is still there, but will cover your app);
- If you rely on background synchronization, you need to have a backup implementation;
- Your PWA cannot lock the horizontal and vertical display orientation;
- The theme color style of the status bar cannot be changed: you can use the deprecated meta tag to implement a black or white status bar, or use CSS/HTML tricks to mimic a theme color;
Starbucks' PWA application does not provide a return button after clicking "Sign up", and the selection cannot be canceled. If you want to return, you need to reopen the PWA
- If your PWA app's UI doesn't have a back gesture or button, users won't be able to jump from screen to screen
- Your Android icon may look bad on iOS because Apple doesn't support transparent icons
The icon for the PWA version of Google Keep relies on the Web App Manifest specification, so on iOS it's just a screenshot. You must provide the icon to iOS via Apple's non-standard link tag
- Also, the iOS system does not obtain icons according to the Web App Manifest specification unless provided via an apple-touch-link link. If you don't provide a link tag, the system will use the screenshot as the icon for the PWA app (like the Google Keep PWA example seen above)
- No splash screen, so most color properties from manifest are ignored
- The manifest event is not fired, so if you're trying to track installs through these channels, the app won't run on iOS (but you can see the navigator.standalone method instead)
keep these points in mind
- Your PWA app cannot save state across sessions. If the user leaves the PWA app and comes back again, it will restart. So, if you need users to verify email, SMS or two-factor authentication, remember to provide users with a suitable solution.
Inactive PWA apps will appear as a white screen. It's not running at this point, and if you switch back to them, the app will restart
The same white screen problem occurs on iPad
- Screenshots of PWA apps don't appear in the recent apps list, 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 app tries to use the top notch area, but there are some user experience flaws
- If you want your PWA app to use the iPhone X's notch area, you need to make some changes in HTML and CSS.
- Sometimes, you add to the home screen, but don't use the manifest, then you just have a thumbnail installed.
A Google Map with the Starbucks logo? No, this is just the iOS system after opening a row of PWA apps. This weird behavior in the recent apps list is because an app is loaded at the wrong address
- Safari and home screen screenshots share the same Service Worker record and cache files. The Safari view manager (like Twitter's built-in browser) supports the Service Workers protocol and caching, but it seems to delete all data after the session is closed.
- Every non-system built-in browser, such as Chrome, Firefox, etc., uses WebView, just like Facebook's built-in browser. They do not support the Service Workers protocol, so no files will be installed. My guess is that WKWebView might need an API to let the application decide what to do based on the Service Workers protocol.
You can use Safari TP to debug clients and service workers on Safari and "Web" (PWA apps on the main screen). It is also convenient to test over a network connection.
- To debug Service Workers on iOS, you need to install Safari Technology Previce or Safari 11.1 for macOS 10.11.5, 10.12.6 and 10.13.4 newer.
Service Worker's inspector tool is currently in beta, it does not support viewing cache storage content
- Service Workers can be disabled in settings (enabled by default).
what is this empty app
- Sometimes, with multiple PWAs open at the same time, the iOS system tray will go crazy, and the PWA app will appear as a "ghost" app without an icon and title in the recent apps list.
about the author
Maximiliano Firtman , Mobile + Web Developer, Trainer, Speaker, and Author. He has several books, such as High Performance Mobile Web , published by O'Reilly Media .