Understanding Progressive Web Apps and iOS 13.4.1's Text Selection Issue in PWAs: A Guide to Resolving Known Issues with Apple's WebKit

Understanding Progressive Web Apps (PWAs) and iOS 13.4.1’s Text Selection Issue

Introduction to PWAs

Progressive Web Apps (PWAs) have gained significant attention in recent years due to their ability to provide a native app-like experience on the web. A PWA is a web application that uses modern web technologies such as HTML5, CSS3, and JavaScript to create a seamless user experience. The key characteristics of PWAs are:

Responsive: PWAs adapt to different screen sizes and devices.
Engaging: PWAs provide a fast and seamless user experience.
Re-engageable: PWAs allow users to re-enter the app even after they have left it.
Installable: PWAs can be installed on mobile devices, allowing users to access them offline.

Apple’s WebKit and iOS 13.4.1

Apple’s WebKit is the web browser engine used by Safari, the default web browser on iOS devices. With the release of iOS 13.4.1, Apple introduced several changes that affect web developers and PWAs.

One notable change is the implementation of a new feature called “Web App Capable.” This setting allows mobile browsers to run web applications in full-screen mode, similar to native apps.

The Problem: Text Selection Not Working in PWAs

On iPhone XR devices running iOS 13.4.1, text selection inside PWAs does not work as expected. This issue is reportedly caused by the apple-mobile-web-app-capable meta tag being set to “yes.”

The web developer shared a minimal reproducible HTML code snippet that demonstrates the issue:

<!DOCTYPE html>
<html>
<head>
  <title>test text selection</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
  Try to select this text.<br/>
  Should be selectable but it is not on my iPhone XR.
</body>
</html>

This code snippet includes the apple-mobile-web-app-capable meta tag, which tells Safari that the web application should run in full-screen mode. However, this setting seems to cause issues with text selection.

Background and Context

The issue is likely caused by a bug in WebKit, as indicated by the filed bug report on the W3C website: https://bugs.webkit.org/show_bug.cgi?id=212299.

This bug report was submitted by an Apple engineer, who reported that the issue occurs when the apple-mobile-web-app-capable meta tag is set to “yes” and the application tries to select text.

Possible Solutions

While there is no official fix for this issue yet, web developers can try a few workarounds:

Disable Web App Capable: Set the apple-mobile-web-app-capable meta tag to “no” or remove it altogether. This will prevent the application from running in full-screen mode.

<head>
  <title>test text selection</title>
  <!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
</head>

Use a different meta tag: Use the apple-mobile-web-app-status-bar-style meta tag to control the appearance of the status bar instead.

<head>
  <title>test text selection</title>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-transparent-black">
</head>

Use a different approach: Instead of using the apple-mobile-web-app-capable meta tag, try to use a different approach to achieve the desired behavior.

<head>
  <title>test text selection</title>
  <!-- No changes needed -->
</head>

<body>
  Try to select this text.<br/>
  Should be selectable.
</body>

Conclusion

Text selection not working in PWAs on iOS 13.4.1 is a known issue, and web developers are still waiting for an official fix from Apple.

While there are workarounds available, they might not be ideal solutions. WebKit engineers are actively working to resolve this bug, and it’s likely that an update will be released soon.

In the meantime, web developers can try to use different approaches or workarounds to achieve the desired behavior.

Code Examples

Here is an example of how you can use the apple-mobile-web-app-status-bar-style meta tag to control the appearance of the status bar:

<head>
  <title>test text selection</title>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-transparent-black">
</head>

<body>
  Try to select this text.<br/>
  Should be selectable.
</body>

And here is an example of how you can disable the apple-mobile-web-app-capable meta tag:

<head>
  <title>test text selection</title>
  <!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
</head>

<body>
  Try to select this text.<br/>
  Should be selectable.
</body>

These code snippets demonstrate different approaches to achieve the desired behavior.

Last modified on 2024-04-22