My goal in this article was to show the most basic differences in how Progressive Web App (PWA) behaves across platforms, mainly in relation to the installation process. This is a customer focused post so you can learn how to make instructions for your customers. There are plenty of in-deep good researches (I will provide the links soon) but I want to focus on just main things that will be noticed by your customers and so you should know about them. For more specific things I will provide the best links to read.
This article is actually an annex to the full set of PWA articles that I have written for beginners and advanced users. You should really read them first:
- Progressive Web Apps (PWA) Explained Simply
- The Complete Guide to Favicons and App Icons 2022
- How to Automate Icons Production for Your App With Inkscape
- PWA: Service Worker Secrets, Tricks, Debugging
PWA on Android
You'll get an installation prompt banner in Chrome if your app is installable, but you won't have the same big banner in Samsung Internet browser - instead, you'll have a tiny arrow icon in the address bar:
I don't really have much more to say about Android because other things are either covered in the articles mentioned above or in other detailed reviews.
See an example of how you can draw Android PWA installation instructions for your customers here.
Let's move on to iOS.
PWA and iOS 2022
I really like the way Chris Love covered "Does Apple Even Want Progressive Web Apps?" subject. Just go and read there, I will not add anything, because he said the same thing that I had on mind.
There is a brilliant and fairly recent (2020) article by Maximiliano Firtman on PWA and iOS so I don't have to go into all the details about PWA on iOS - read his post and maybe other posts as he seems to keep an eye on this subject. As I told you, my goal is to explain the basic things simply, so let's try.
First the good news: yes, Progressive Web Apps work on the iPhone! :)
With a properly written service worker and manifest file (read my article here and here), there will be no problem running PWA on iPhone. Go right now and try to install this blog of mine that you read and see everything with your own eyes.
You won't be prompted to install on iPhone, but you can rename the app.
The following video demonstrates how the apple-touch-icon appears on a new iPhone that has never opened a page in the Add to Home Screen dialog before. It also shows that renaming of the app is possible - it can't be done on Android. Finally, this demonstrates how misbehaving apple-touch-icon with a transparent background (more research on this can be found in my Complete Guide to Favicons and App Icons 2022).
For a simple PWA, you won't notice any other differences from Android. By simple PWA, I mean a web page converted to PWA, as in our use case that I covered in my Progressive Web Apps (PWA) Explained Simply article for beginners.
So your iPhone PWA installation instructions for your customers will be similar to the example shown here. In fact, it will be no more difficult than for Android, because Apple does not show the installation banner and has only one workflow. Many complain about this, however we cannot be sure that the banner will always be displayed on Android and users will need to be explained another installation method - from the settings. Of course, it's good if we don't have to explain anything to customers, and they just see the banner and install the application - this makes Android better.
Here are some really raw notes...
<meta name="application-name" content="iSocket Plug-and-Go">I'm quoting MDN on this tag: “Simple web pages shouldn't define an application-name”.
<meta name="theme-color" content="#ffffff">MDN covers theme-color tag.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">Apple abolished this (discussion on Stackoverflow) On older iPhones without these tags, your PWA will only open in Safari and not in a dedicated app window. However, with these tags, only the first page of your PWA opens as an app, and then all subsequent links from the app will open in Safari. You might be able to tweak something else to prevent this behavior, but we're no longer targeting older iPhones.
<meta name="apple-mobile-web-app-title" content="iSocket Plug-and-Go">The HTML5 spec doesn't seem to have this.
https://developer.apple.com/forums/thread/36820
https://developer.apple.com/forums/thread/128646?answerId=421774022#421774022
PWA on Windows
The installation process is well described in the same link I gave above, and I won't copy it and go into more detail here. The app supports the offline page just like any other platform. Here you go:
The offline case is well covered in my other articles - see the links below.
Customize PWA installation process
If you want to customize the "Add to Home Screen" action, read this article where they link to Pete LePage's post. Some useful lib for iOS on a related topic. How to define your install strategy is also a good read. Here is a solution from PWAbuilder, but I didn't like how it worked out of the box, both in style and behavior. For example, the button will no longer be displayed if the user skipped it once.