How to enhance your PWA with HTML tags for iOS and Android

Progressive Web Apps (PWAs) are becoming an increasingly popular way to deliver high-quality mobile experiences to users. PWAs can be accessed through a web browser like a traditional site while providing a native app-like experience with offline functionality, push notifications, and an icon on the mobile home screen.

Although progressive web apps, as their name suggests, are based on web technology, they must run on a mobile device, and that means that in some cases, they must have specific settings to work correctly in this environment, likewise, as with native apps, each operating system has its particular capabilities and therefore need minor adjustments to make the most of each platform.

One of the solutions that can help you improve the user experience in your PWA is using HTML tags with additional metadata, these tags do not affect the code while running in a web browser, but they come into action when your applications are running in a mobile environment.

Let's explore some of the most relevant mobile web app development tags.

General Purpose Tags

These tags will help you enhance your PWAs on all major operating systems. In many cases, they are indispensable elements, such as linking the manifest.json document, while in other cases, they will help you create a more immersive experience. Let's take a look at some examples:

Link the main document with the manifest.json

<link rel="manifest" href="manifest.json">

Used to reference the Web App Manifest file, which provides metadata about the PWA, including its name, icons, and launch URL. Including this tag ensures that your PWA is discoverable and easy to install on Android devices.

Define color scheme

<meta name="theme-color" content="#000000">

This tag sets the browser's chrome color to match the color scheme of your PWA. Doing this can create a more immersive experience for users and make your PWA feel more like a native app.

Size and appearance of the workspace.

<meta name="viewport" content="width=device-width, initial-scale=1">

This meta tag ensures the PWA is responsive and scales appropriately to fit the user's device.

Workspace scale and size

<meta name="viewport" content="viewport-fit=cover">

Used to ensure that the PWA content fits the safe area of the device screen.

Run in standalone mode.

<meta name="mobile-web-app-capable" content="yes">

Used to indicate that the PWA should launch in standalone mode on Android devices without the browser interface.

HTML tags for iOS

When it comes to iOS devices, there are specific HTML tags that can help improve your PWA experience. Let's take a look at some of the most popular ones:

Run the app in full screen.

<meta name="apple-mobile-web-app-capable" content="yes"> 

Used to indicate that your PWA should be displayed without the browser chrome, like a native app, this allows users to add your PWA to their home screen and launch it as a native app.

Status bar color

<meta name="apple-mobile-web-app-status-bar-style" content="black">

This tag sets the color of the status bar at the top of the screen when the PWA is launched. The value can be "default", "black", "black-translucent" or "white".

Application title

<meta name="apple-mobile-web-app-title" content="My PWA">

This value sets the title under the PWA icon on the user's home screen.

Application Icon

<link rel="apple-touch-icon" href="icon.png">

This link tag defines the icon when the PWA is added to the user's home screen. Providing high-quality icon images in different sizes is essential to ensure that the PWA looks excellent on multiple devices.

Running in full screen

<meta name="apple-mobile-web-app-capable" content="yes">

Allows the PWA to run in full-screen mode without the Safari browser interface.

Startup image

<meta name="apple-touch-startup-image" content="splash.png">

Sets the image that appears during PWA startup.

Run in full screen

<meta name="apple-touch-fullscreen" content="yes">

Allows the PWA to run in fullscreen mode.

You can find a complete list of Meta tags Safari supports in the official Apple documentation. 

PWAs in Modyo

When creating your PWAs on the Modyo platform, you don't have to worry about creating and installing the manifest.json file or the service workers already installed and generated automatically. We even optimize the images so that your applications have support for multiple resolutions without you having to open any editing or retouching programs. 

All Modyo applications have native support for Progressive web applications. If you want to learn more about their use and how to enable them today, take advantage of this exclusive workshop for our community, where we show you step-by-step how to activate your PWA.

Why is it important to include these tags?

Including HTML tags and features for Android and iOS is crucial because it allows you to deliver a consistent, high-quality experience to users, regardless of their platform. In addition, by including specific HTML tags, you can ensure that your PWA looks and feels like a native app on Android and iOS devices, making it more appealing and easier to use.

In addition, including HTML tags and features can help improve the visibility of your PWA on both platforms. By including the Web App Manifest file and setting specific metadata, you can ensure that your PWA is easily discoverable by users and can be added to their home screen with just a few taps.

You can find a good starting point for your PWA code in this gist by Tommaso Marcelli, and see all the information you need to create your progressive web apps in the official Modyo documentation.

Photo by Clark Van Der Beken en Unsplash