Ken peng,

Http://medium.com/firt/progr…

With the release of iOS 11.3, Apple has quietly endorsed several of the 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’ve already published a PWA App.

It’s a PWA on the iPad that’s full screen, can be used offline, and can be fixed to the Dock like any native App in the App Store

If you see this article also don’t know what is PWA, before I can tell you, it does not have a unique and accurate definition, but I can tell you is that it is a Web technology is used to create the App, don’t pack, without signature, can work offline, if you like, you can also add to the table, looks just like other applications.

On most platforms, PWA is not required to be installed from the App Store, except for Edge browsers and Windows 10, which require PWA to be in their App Stores.

So, you guessed it, you can now install apps on iOS without going through the App Store. This may be one reason why Apple didn’t mention the new capability directly, perhaps not wanting to confuse users, and didn’t even mention the technology in Safari’s release notes.

Can you tell the difference? One is native Google Maps and the other is PWA

Isn’t Apple the creator of PWA?

To be honest, the Google Chrome team coined the term PWA, but the project was first proposed in Safari for the original iPhone OS, and in 2007, Steve Jobs announced “One More Thing” at WWDC: How to develop apps on the original iPhone, and surprisingly, Web apps. The App Store wasn’t in the original plan at the time, and the native SDK wasn’t available for the first year of the iPhone’s release. From Apple’s point of view, even today the PWA is simply “webapp on the home screen”, with ICONS referred to as Webclips.

If you’d like, you can take a look at my work last year
Fluent ConferenceI mentioned it at 10 minutes and 50 seconds.

www.youtube.com/watch?time_… www.youtube.com

Eleven years ago, the idea didn’t get much traction and Apple forgot to update the capability, so for 10+ years the feature was flawed and unstable. Several years later, other platforms implemented the idea, including the MeeGo browser on the Nokia N9 and Android Chrome.

Chrome helps improve and implement these technologies to provide a better user experience, as reflected in the Service Worker and Web App Manifest specifications. Starting today (March 30, 2018) with iOS 11.3, Apple is following Chrome, Firefox, Samsung Internet, UC Browser and Opera with support for both specifications, Safari for Mac already supports Service workers, and Support for The Web App Manifest is in the works this year.

Steve Jobs demonstrating PWA on WWDC’s first iPhone in 2007 (it wasn’t called PWA at that time)

Wait, so these apps don’t pass the App Store’s quality tests, right? [thinking]

Yes, you guessed right again. However, PWA currently only works in browsers or other Web platform security policies, which means you can “publish” apps that are not approved in the App Store, such as internal apps for your employees (including approved content), but can’t use some Native apis. Like Face ID on the iPhone X, or ARKit augmented reality, or at the very least, you’ll have to wait for the Web to support these new apis.

The PWA can be run in Safari as a normal website, or in standalone mode (without the address bar and other features of Safari), just like any other application on the system.

PWA capabilities in iOS

On the iOS Web platform you can call the following apis:

  • Geographic location
  • Sensors (gyroscope, accelerometer, magnetometer)
  • The camera
  • Audio output
  • Speech Synthesis (headphones only)
  • Apple Pay
  • WebAssembly, WebRTC, Web GL, and many more experimental features
Can you tell which are PWA and which are native apps?

What are the limitations compared to native iOS 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 PWA cached files. The desktop icon will remain, of course, and the file will be recached the next time the user accesses it
  • Some Native apis, such as Bluetooth, Touch ID, Face ID, ARKit, and battery information, cannot be applied
  • Unable to execute code in the background
  • You cannot access private data, such as contacts, or local social applications
  • Unable to access In App Payments and many other Apple-based services
  • On the iPad, there’s no way to use split-screen sharing with other apps, and the PWA takes up the entire screen all the time
  • No notifications, no Siri integration
If you have a PWA called Tinder installed, Siri can’t find it

What works on Android and what doesn’t on iOS?

  • More than 50Mb of data and files can be stored on Android
  • Android won’t delete files from the app when you haven’t used it for a long time, but it will delete files when it runs out of storage space. PWA can use permanent storage if the user installs and uses a lot of it
  • Bluetooth access for BLE devices
  • The Native Share dialog can be used on the Web on Android through the Web Share API
  • Speech recognition
  • Background synchronization and offline message push
  • An installation dialog box is displayed asking you to install the PWA
  • You can customize the (limited) PWA splash screen and decide whether the PWA is portrait or landscape
  • In WebAPK and Chrome, a PWA can only be installed once
  • In WebAPK and Chrome, the PWA appears in “Settings” and you can see the data usage, while in iOS, everything is included in Safari
  • In WebAPK and Chrome, the PWA captures your URL, and if it’s a PWA link, it opens the PWA in standalone mode, not the browser

What works on iOS and doesn’t on Android?

  • Users can change the PWA name 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 not reading the Web App Manifest standard)
Profiles contain WebClips and PWA ICONS

How do I install PWA on iOS?

This is one of the most important challenges on iOS, because iOS Safari doesn’t have any reminders or Banners for users to add PWA; Android clearly has a banner of Web App Install integration users, so users need to visit your site in Safari first. Then manually click the Share icon and click Add to Home Screen. At no point in the whole process does it show that this is a PWA.

After clicking the “Share” button, click the “Add to desktop” button, and the Web App itself should guide the user. Please do not forget the current system language during the guidance

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

Once installed, it looks just like any other icon on the home screen, and while it won’t have a 3D Touch menu, if you install the same PWA again, you’ll have another icon pointing to the same PWA (fortunately, the installed files will be shared).

In addition, many Web apps have a prominent location that directs users to download and install native apps from the App Store, and this is shown in the PWA, which is actually a detriment to the user experience, such as Tinder:

I already have PWA installed, don’t try to guide me to download Native App

I already have the PWA site, can iOS users use it now?

After you upgrade to iOS 11.3, you can install your PWA. No extra configuration is required for iOS. Every PWA can be installed, but that doesn’t mean everything will be as you think.

Uber PWA looks really good, but when you click the sign in or Continue button, the authorization page opens Safari, which jumps out of the PWA running on its own

If you’re reading this, you may have already posted my article Cupertino, We’re In trouble when the iOS PWA was still in beta. The bad news is that most of the problems we encountered during the beta are still with us after the iOS 11.3 release.

If you do nothing, your PWA will have overlapping black bars on top of it, and you can’t see the time, battery, and other information in the status bar

What doesn’t work?

  • Display issues: Fullscreen and minimal-UI are not supported on iOS, fullscreen is the same as standalone mode, and minimal-UI is just a shortcut to Safari. But you can achieve a similar fullscreen effect by using a cover-fit or deprecated private meta tag (the status bar will be in, but will be overlaid on your app)
  • Background sync is not yet supported
  • Unable to lock PWA orientation, landscape or portrait
  • The theme-color property does not work and you cannot change the color of the status bar. You can use deprecated private meta tags to set the status bar to black or white, or you can use CSS/HTML to simulate the theme-color
Starbucks PWA has no back button on the registration page, so you cannot cancel the current registration process. You need to restart the PWA
  • If your PWA doesn’t have a back gesture or a back button, users won’t be able to switch between pages
  • IOS doesn’t support transparent ICONS, so be careful
Google Keep PWA only sets the icon in the Web App Manifest, so the icon added to the desktop is the current screenshot, and you need to set Safari’s private properties to customize the icon
  • In iOS, you can’t use the icon in the manifest.json file, but you can use the icon set by the app-touch-icon link tag. If you don’t provide this link tag, Safari will use the screenshot as the icon. See the Google Keep PWA example above
  • There is no splash screen, so most color attributes in the Web App Manifest are ignored
  • No manifest-related events will be triggered, so you can’t tell if the user is installed by the event, but you can tell by navigator. Standalone if the user is running in standalone mode

What to remember?

  • The PWA does not persist between sessions, and if the user cuts out the PWA to another App, it will restart when it comes back, so if you need the user to authenticate email, SMS, or switch to another App for authentication, please consider another implementation
All inactive PWA have a white screen, regardless of whether they were previously active or not. Remember, they are not running, and if you cut back to the PWA, it will restart
We have the same white screen problem on the iPad
  • The PWA on the back doesn’t have screenshot thumbnails, they all look white, which is a shame
  • There may be bugs when your app runs in standalone mode, do not test your PWA with Safari alone
NASA’s PWA had some experience issues
  • If you want your PWA to take advantage of the iPhone X’s notched area, special HTML/CSS processing is required, and if you don’t do it right, it will look weird
  • Sometimes when you add to the home screen you don’t have the manifest file, you just add a shortcut
Starbucks logo on Google Maps? No, it’s just that iOS has some weird bugs when using multiple PWA in a row, where the PWA loads the wrong URL
  • Safari shares the same Service Worker Registration (not Service Worker instance) and cached files with the PWA added to the home screen, Safari View Controllers (such as Twitter’s in-app browser) also support the Service Worker and Cache apis, but seem to delete all data after the session is closed
  • All third party browsers (Chrome, Firefox, etc.) and all apps that use WebView (Facebook in-app browser, etc.) don’t support Service workers, and my guess is, WKWebView may need an API to let application developers decide how to use the Service Worker, but… Who knows?
With Safari TP, you can debug Safari and PWA on the home screen, you can debug Service workers, and you can catch network requests
  • To debug Service workers on iOS, you need to install Safari Tech Preview or Safari 11.1
Debugging tools for Service workers are still experimental; for example, you won’t see anything in CacheStorage yet

  • Service workers can be disabled by setting -> Experimental features (enabled by default)
What is the application of this blank?
  • Sometimes, you have a lot of PWA open at once, and the iOS taskbar gets weird, showing a ghost app with no icon or title

If you find any other PWA bugs on iOS, please comment below and I’ll put together a bug report for the WebKit team. If you’d like to keep up to date on this post, please also follow me on Twitter @FIRt. If you’re in the Bay Area in June, Come to my PWA training, and we’re going to create a PWA that covers things that most people don’t have on other platforms, including how to survive on iOS.

Original link: medium.com/firt/progr… (Please bring your own ladder)