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.

Push API - Mozilla

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 Google Developers website 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

Super fast WebApp built by Marco using SpringBoot 3 and Java 17 hosted in Switzerland