Progressive Web Apps on iOS
Installation, Web Push and current limitations

A Progressive Web App can be added to the Home Screen on iPhone and iPad and opened as a web app. Web Push has been available for these Home Screen apps since iOS and iPadOS 16.4. Offline functionality depends on which content the website caches and how it handles network requests.

Understanding Progressive Web Apps on iOS

The web app manifest describes the name, start URL, icons and display mode. A service worker can cache selected files and pages for offline use. Installing a web app does not automatically download the entire website.

A service worker runs in response to events. It does not run indefinitely in the background or automatically clear its cache on “Pull to Refresh”. The application must implement its own update and cache cleanup logic.

Installing a PWA on iPhone

Open the website in Safari, then follow these steps:

1. Open the Share menu. Depending on the Safari layout, it may be behind the More button.
2. Choose “Add to Home Screen”.
3. If the option appears, turn on “Open as Web App”.
4. Tap “Add”, then open the app using its Home Screen icon.

Since iOS 16.4, other browsers can offer the same system action if they implement it. A custom installation button in Safari on iOS can show instructions, but it cannot open an installation prompt through beforeinstallprompt.

Home Screen web apps remain available in the EU. The restrictions in the iOS 17.4 beta do not describe their current functionality. See Apple’s current iPhone web app instructions.

Display mode and iOS meta tags

Set display to standalone in the manifest to request an app view without the usual browser toolbar. Provide navigation within the app. The apple-mobile-web-app-status-bar-style meta tag controls the status bar; it does not enable app mode by itself.

{ "display": "standalone" }

Older Apple meta tags, including apple-mobile-web-app-capable, can serve as fallbacks for older systems. Check the manifest and display on the iOS versions you support before removing these tags.

Providing app icons

iOS can use icons from the manifest. An additional apple-touch-icon takes precedence over manifest icons. A square 180 × 180 pixel PNG is a common format for this touch icon.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Create the required files with the PWA Asset Generator.

Storage and offline use on iOS

A fixed 50 MB limit does not generally apply to current PWAs. Since Safari 17, WebKit uses device-dependent storage quotas. Home Screen web apps receive the same quotas as websites in a browser app. Use navigator.storage.estimate() to inspect estimated usage and quota.

A quota does not guarantee permanently available space. The system can remove data under storage pressure. Limit cache size, handle storage errors and keep a server-side copy of important user data. See WebKit’s storage policy.

Which features an iOS PWA can use

Camera access, geolocation and Web Share are examples of web APIs that ordinary browser pages can also use, subject to support and permissions. They do not generally require PWA installation. Web Push on iPhone, however, requires a Home Screen web app.

Native interfaces are not automatically available to websites. Check each required feature on your target devices. Safari on iOS currently supports neither one-off Background Sync nor Periodic Background Sync. Keep pending operations until they have been transferred successfully and retry when the app is next opened.

MDN documents current support for Background Sync and Periodic Background Sync.

Web Push on iPhone and iPad

Since iOS and iPadOS 16.4, web apps added to the Home Screen can receive Web Push. Users must allow notifications, and the permission request must follow an action such as tapping a button. An ordinary Safari tab on iPhone does not meet this requirement.

Web Push does not require an App Store release. See Apple’s Web Push documentation for implementation details. For Joomla and WordPress, see miTT PWA for Joomla and miTT PWA for WordPress.

Badge Icon for Push Notifications

The badge icon signals to the user that there are still unread messages, a subtle yet effective reminder that prompts user engagement. The badge API is implemented in the plugin miTT PWA FIRE PUSH and miTT PWA for WP, offering website owners to have it without configuration. This feature is particularly useful for any application where notifications play a crucial role in the user experience. In the fast-paced world we live in, staying up-to-date with the latest information is important, and the badge icon serves as a visual cue for users to revisit the app. For a quick demonstration of how push messages, including the badge icon, work in a real-world scenario, take a look at this YouTube short where these features are showcased in action.

PWA support in other browsers

A shared web codebase can serve several platforms. Installation, push, background tasks and device APIs still differ between browsers and operating systems. Check each required feature instead of assuming complete PWA support.

Safari supports web apps on Mac through “Add to Dock” from macOS Sonoma onwards. See Apple’s Safari instructions. For Chrome, Edge and Firefox, check installation options and API support on each target system.

PWAs in practice

A PWA can make existing web content accessible from the Home Screen, provide selected content offline and send notifications with the user’s permission. Effects on loading times, data usage and engagement need to be measured for each project.

One example from my work is the Joomla events website What’s On Lincoln. I added miTT PWA and also published Android and iOS apps. See the implementation and release details on the PWA to App Store page.

PWA App Store Optimization: Boosting discoverability and engagement

With the ability to bypass traditional app stores, PWAs inherently challenge the status quo of app publication. However, there are clear benefits to distributing PWAs through app stores such as Microsoft Store, Google Play Store, and Apple App Store. Listing a PWA on these platforms can drastically increase visibility, credibility, and potentially the user base due to users' trust and familiarity with these platforms.

Prefer not to go down this road yourself? I publish your PWA to the Google Play Store and Apple App Store at a fixed price — all details at PWA to App Store.

While distributing PWAs via app stores, developers must often navigate unique store policies and technical guidelines. Platforms may have distinct requirements, such as specific metadata or packaging formats, that must be met for successful submission. Despite these hurdles, the process remains more streamlined than traditional apps, often without requiring any code changes to the PWA itself. This ease of access to app stores signifies a new era of digital distribution, where the line between native applications and web experiences continues to blur.

To publish a Progressive Web App (PWA) to the Apple App Store, you must follow a series of steps to bridge the gap between web and native app experiences. Here's a high-level overview of the process:

1. Prepare Your PWA: Ensure your PWA meets Apple's design and performance standards. This includes having a responsive design, working offline, and functioning like a native app.
2. Create an App Store Connect Account: Sign up for an App Store Connect account, which is required to submit apps to the App Store.
3. Configure Your PWA for iOS: Configure Your PWA for iOS: Utilize the PWA Builder to wrap your app, converting it into a format suitable for submission to the Apple App Store. This tool assists in packaging your PWA within a native app shell, thus enabling you to meet the requirements for iOS apps.
4. Optimize PWA for App Store Submission: Make sure your PWA adheres to Apple's App Store Review Guidelines. This includes ensuring user privacy, providing a high-quality user interface, and integrating iOS features.
5. Test Your PWA on iOS Devices: Before submission, thoroughly test your PWA on multiple iOS devices to ensure it functions correctly and provides a good user experience.
6. Create an App Store Listing: Prepare metadata for your app listing, including the app's name, description, keywords, screenshots, and preview videos.
7. Submit Your PWA to the App Store: Once ready, submit your PWA through App Store Connect for review. Apple will review your app to ensure it meets all guidelines.
8. Monitor the Review Process: Apple will notify you of the progress of the review process and any issues that need addressing. Respond promptly to any feedback.
9. Release Your PWA: After approval, set a release date for your PWA, and it will be available on the App Store for users to download and install.

Remember, while PWAs offer many benefits, publishing them on the App Store requires additional steps to meet Apple's native app standards. This process can provide a broader reach and potentially increase user trust due to the App Store's credibility.

Tips for Website Owners Using WordPress and Joomla

To effectively create Progressive Web Apps (PWAs) for iOS using WordPress or Joomla, developers can leverage several strategies and tools tailored to these content management systems:

For WordPress:

• Use a plugin like miTT PWA for WP, which simplifies converting a WordPress website into a PWA by handling service workers, manifest files, and offline support.
• Employ PWA-friendly themes, ensuring they are responsive and adhere to modern web standards.
• Depends on the use case, take advantage of WordPress's REST API for fetching dynamic content and facilitating smooth interactions within the PWA.

• Explore extensions such as miTT PWA Fire Push or miTT PWA for Joomla, which provide a straightforward way to implement PWA features like offline access and home screen installation.
• Opt for templates optimized for performance and mobile use to enhance the PWA experience for users. The Standard Cassiopeia Template in Joomla 4 and Joomla 5 is a good example.
• Use Joomla's built-in Web Services for better dynamic content loading and interactive user experiences.

• Focus on creating a user experience that mirrors native iOS applications, encouraging users to install the PWA by offering prompts and clear instructions. miTT PWA for WP and miTT PWA for Joomla have a notice banner to configure it.
• Update content regularly to keep users engaged and ensure that the PWA remains relevant and valuable.
• Implement a straightforward navigation structure, use lightweight fonts for faster loading, and ensure cross-browser functionality, including Safari on iOS.
• Offer offline capabilities by setting up service workers to cache important assets and pages, allowing users to access content even without an internet connection.
• Regularly analyze and minimize file sizes to reduce load times, and conduct thorough testing across different browsers and devices to ensure compatibility and performance.

By following these tips, developers can optimize the performance and compatibility of PWAs on iOS devices, taking advantage of WordPress and Joomla's robust features and extensibility.

Tools and Resources for PWA Developers

These tools and frameworks aid in developing PWAs for iOS, helping developers streamline their workflow and improve the efficiency of their development process.

Moreover, developers can access tutorials and documentation for PWA development on reputable online platforms such as:

• web.dev, which provides a range of tools and documentations for PWA developers
• developer.mozilla.org
• PWA Asset Generator for generating Splash Screens and Icons for iOS and Android
• Tips for optimizing a PWA

Lighthouse checks performance, accessibility, best practices and SEO. Its former PWA category has been retired. Check installation, service workers, offline behavior and push separately with browser developer tools and on real devices. Lighthouse PWA testing deprecation notice.

PWA or store app for your website?

A PWA can be sufficient for a website that needs Home Screen installation, selected offline content and Web Push. Check required device APIs and background tasks before implementation. Use miTT PWA for WordPress or miTT PWA for Joomla to build on your existing website.