PWA development for iOS and Android
These are mostly personal notes and they are not structured as an article.
Chrome on iOS
Chrome and Firefox on iOS are based on Safari Webkit this means that Chrome or Firefox won't give you extra-features for your PWA on iOS compared to Safari.
Cache capacity
iOS limits the cache at 50MB, this should be enough for most of the 'business' apps.
IndexedDB and LocalStorage
Service Workers can access IndexedDB but not LocalStorage.
Push notifications
iOS doesn't support push notifications. Android supports it.
Background synch
iOS doesn't support background synch, only Chrome and Chromium based browsers.
How can I deploy my PWA in the AppStore / Google Store
It's not directly possible but you can use WKView to integrate a WebView in your App.
Similar in Android is possible to use Bubblewrap to create an Android application based on a PWA.
More about Trusted Web Activity: Using a PWA in your Android app
These are Web applications wrapped in a native application. They maintain the limitations of a standard PWA.
Apple specific tags for PWA
For iOS add to <head>:
<link rel="apple-touch-icon" href="/custom_icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icons-152x152.png">
<meta name="apple-mobile-web-app-title" content="Application name"
<meta name="theme-color" content="#1976d2">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-capable" content="yes">
apple-mobile-web-app-capable: removes the browser ui
Here an overview of the options for Apple:
Configuring Web Applications - Apple
Here the size of the icons for iOS:
App Icon
For iOS the recommended sizes are: 60x60, 76x76, 120x120, 152x152, 167x167, 180x180
For Android the recommended sizes are: 48x48, 96x96, 128x128, 144x144, 192x192, 256x256, 384x384, 512x512
When I click the screen the view zooms and the application is no more correctly displayed
This is a common problem. There are not perfect solutions. Some people need to zoom the view manually to read more easily the content for this reason completely lock the zoom option may penalize some users.
Here how to lock the screen size and the zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Viewport: area of the window in which web content can be seen. In our case device-width means all the available width on the screen. There won't be scrollbars.
initial-scale: zoom level when the page is loaded.
user-scalable=no: we don't allow to change the zoom, this can cause accessibility issues.
maximum-scale=1: the automatic zoom is not allowed, this is particular important switching orientation on iPhones because Safari change the zoom level changing the orientation.
Can I use Face ID and Touch ID in a PWA
Apple introduced this feature in 2020, in the WebKit blog there are more details:
Meet Face ID and Touch ID for the Web
Useful links
What web can do Which features are supported by different browsers
web.dev Google Developers website
firt.dev great website if you want to learn about PWA and follow the current status of the technology
webkit the engine of Safari
PWA Lifecycle - Mozilla