safari pwa manifest

PWA on iOS - Current Status & Limitations for Users [2024]

Apple couldn't stay behind anymore since PWAs are much more than a buzzword. What's the status now? Does iOS finally provide full support for PWAs? You'll find the answer below.

A QUICK SUMMARY – FOR THE BUSY ONES

TABLE OF CONTENTS

Introduction

Apple could care more about Progressive Web Apps, there’s no doubt about that. There’s not much documentation, the APIs are added slowly and most common things like Web App Manifest aren’t there for too long (at this point, I wonder if they will get there at all). On the other hand, PWAs are a thing . Maybe not as hyped as Machine Learning, but still, there’s a solid batch of those out there. And even Apple cannot ignore that fact forever.

PWA on iOS - Current status [2024]

As of 2023-2024, Progressive Web Apps (PWAs) on iOS have evolved significantly, offering a more native app-like experience. While they still face certain limitations on iOS compared to Android, recent updates have brought improvements.

Key updates and features of PWAs on iOS include:

1. Home screen addition ‍

Although Safari doesn't provide an automatic installation prompt, users can still add PWAs to their home screen. iOS 13 introduced a new Share Sheet design, making this process more intuitive with visual cues from the apple-touch-icon meta tag.

Recent improvements

• iOS 13 introduced changes to the Share Sheet, which affected how users add PWAs to their home screen. The design of the Share Sheet was updated, and it's recommended for developers to adjust their apps accordingly, particularly since Safari now uses the apple-touch-icon for the home screen icon, enhancing visual recognition for the user​​.

Limitations

• No automatic prompt : Unlike Android, iOS does not provide an automatic installation prompt from within Safari, so the process is less intuitive and relies on user action.
• Dependence on Safari's capabilities : The functionality and appearance of the PWA when launched from the home screen depend on Safari's capabilities, as it is the underlying browser for PWAs on iOS.
• User engagement : Adding a PWA to the home screen can significantly increase user engagement and retention, as it makes the app more accessible and convenient to use.
• Branding opportunity : The presence of the app icon on the home screen serves as a constant visual reminder of the app, reinforcing brand presence.

2. Dark mode support ‍

PWAs on iOS 13 can support Dark Mode, aligning with the wider adoption of this feature across platforms.

• Consistency with device settings : On iOS, PWAs that support Dark Mode can align with the system-wide Dark Mode settings of the device. This means the PWA can automatically switch between light and dark themes based on the user's system preferences.
• Implementation : Implementing Dark Mode in a PWA involves using CSS media queries to detect the preferred color scheme of the user's device. Developers can then apply different styles or themes based on this preference. The relevant CSS feature is prefers-color-scheme , which can be set to light or dark .

iOS-specific considerations

• Safari compatibility : For PWAs on iOS, Dark Mode support hinges on Safari's support for the prefers-color-scheme media query. Fortunately, recent versions of Safari on iOS do support this feature.
• Limitations : While PWAs can adapt their styles to match the Dark Mode setting, there are limitations in how far this integration goes. For example, it's not currently possible to change the app icon dynamically based on the theme.
• User preference respect : An important aspect of implementing Dark Mode is respecting the user's system settings, providing a seamless experience that matches their overall device usage.

3. Motion sensor API ‍

From iOS 13 onwards, apps need to ask for permission to use motion sensors like the accelerometer and gyroscope, a change aimed at enhancing user privacy.

• User permission : One of the key aspects of using the Motion Sensor API on iOS is the requirement for explicit user permission. Due to privacy concerns and potential misuse, Apple mandates that apps request and obtain user consent before accessing motion sensor data.
• iOS 13 changes : With iOS 13, there were significant changes to the Motion Sensor API usage. Previously, these sensors were freely accessible; however, the update introduced stricter controls, requiring apps to explicitly ask for permission​​.

Impact on PWAs

• Enhanced interactivity : For PWAs, the ability to use motion sensors opens up new possibilities for user interaction and engagement. It allows for more dynamic and responsive app designs, particularly in gaming, fitness apps, or any application where device movement can be a meaningful input.
• User privacy and security : The requirement for explicit permission aligns with broader trends towards user privacy and security. While it adds an extra step in the user experience, it ensures users are aware of and consent to the data being used.
• Cross-platform considerations : Developers need to be aware of how different platforms handle motion sensor access. While iOS requires explicit permission, the approach may differ on other platforms like Android.

4. iPadOS distinctions ‍

With the introduction of iPadOS, iPads now offer a desktop-class browser experience. However, PWAs on iOS 13 do not automatically adjust their layout when switching to/from Split Mode on iPads.

iPadOS, while sharing a foundation with iOS, brought specific changes that impact the behavior and capabilities of PWAs on iPad devices.

Desktop-class browsing experience ‍

One of the major shifts with iPadOS is the provision of a desktop-class browsing experience in Safari. This means that websites and PWAs are rendered in a way that is more akin to the desktop version rather than the mobile version. This change enhances usability and functionality, especially for complex web applications.

Development considerations

• Responsive design : Developers need to ensure their PWAs are responsive and adaptable to different screen sizes and modes, especially considering the variable rendering between full-screen and Split View modes.
• Testing across modes and devices : Thorough testing across various iPad models and configurations (including Split View and Slide Over) is crucial to ensure a consistent and user-friendly experience.
• Leveraging iPad features : Developers should consider how to best use iPad-specific features like the Apple Pencil or trackpad support to enhance the functionality and appeal of their PWAs.

5. Enhanced PWA installability and accessibility ‍

With updates like the "Add To Dock" button on desktop Safari and the "Add To Home Screen" button in in-app browsers using Safari View Controller, Apple has made installing and accessing PWAs more straightforward and user-friendly. These updates are part of a broader effort to improve the overall usability and appeal of PWAs on iOS platforms

• Streamlined addition to home screen : A key aspect of PWA installability on iOS is the ability for users to add these web apps to their home screen. While iOS traditionally hasn't provided an automatic installation prompt for PWAs like Android does, improvements in the ease of adding PWAs to the home screen have been noted. This involves using the Safari browser's share options to manually add the PWA to the home screen.
• Improved web app manifest support : The web app manifest is a crucial component for PWAs, as it defines the app's appearance when installed on the home screen, including icons, start URL, and display mode. Enhanced support for the web app manifest in Safari on iOS improves the overall installation and user experience, making PWAs feel more like native apps.
• Full-screen and standalone modes : Enhancements in full-screen and standalone modes for PWAs on iOS provide a more immersive user experience. When launched from the home screen, these PWAs can operate in a mode that's visually similar to native apps, without the typical browser UI elements.
• Increased storage quotas : Recent updates to Safari on iOS have included increases in the storage quotas assigned to web apps, including PWAs. This enhancement is significant for PWAs that need to store more data on the device, improving their functionality and user experience.
• Safari improvements : Ongoing updates to Safari, the primary browser for iOS, directly influence PWA capabilities. Enhanced support for modern web standards and APIs in Safari boosts the functionality and reliability of PWAs on iOS devices.
• Greater focus on security and privacy : With growing concerns around data security and user privacy, enhancements in these areas are also expected to continue, ensuring that PWAs offer a safe and secure experience for users.
• Accessibility enhancements : Improvements in accessibility features, ensuring PWAs are usable by people with various disabilities, are also a key focus. This includes better screen reader support, improved keyboard navigation, and adherence to WCAG guidelines.

6. Improved user interaction ‍

Features like Pointer Events allow PWAs to detect whether interactions are made via finger, Apple Pencil, or mouse, particularly useful on iPadOS.

• Touch and gesture controls : Enhanced support for touch and gesture controls is crucial for PWAs on iOS. This includes smooth scrolling, pinch-to-zoom, and swipe gestures that are expected in a native app experience. Improvements in these areas make PWAs feel more natural and intuitive to use on touch-screen devices.
• Responsive design and layouts : With diverse iOS devices, including various models of iPhones and iPads, responsive design is essential. This means PWAs need to adapt seamlessly to different screen sizes and orientations, providing an optimal user experience across all devices.
• Animation and transition effects : Smooth and appealing animations and transition effects can significantly enhance user interaction in PWAs. These visual cues not only make the app more engaging but also help in guiding users through the app’s functionality.
• Performance optimization : Fast loading times and efficient performance are key aspects of user interaction. This includes optimizing images, scripts, and leveraging browser caching to ensure the PWA is responsive and efficient.
• Improved offline capabilities : Enhancements in offline functionality, such as better data caching and offline content availability, contribute significantly to user interaction. Users expect a degree of functionality even when they are not connected to the internet.

7. Development and inspection tools ‍

PWAs are now inspectable on iOS, facilitating the development process.

Development tools for PWAs on iOS

• Web development IDEs : Integrated Development Environments (IDEs) like Visual Studio Code, Sublime Text, and Atom are popular for PWA development. They offer features like syntax highlighting, code completion, and extensions/plugins specifically useful for web development.
• Framework and library support : Frameworks like React, Angular, and Vue.js, along with libraries like Ionic, are instrumental in PWA development. They provide a structured way to build dynamic web applications that can function as PWAs.
• PWA builders : Tools like PWABuilder or PWA Studio by Magento offer simplified ways to create PWAs. They can generate service workers, manifests, and even package PWAs for different platforms, including iOS.
• Testing and debugging tools : Tools like Lighthouse (for performance and quality auditing), Chrome DevTools (for debugging), and BrowserStack (for cross-browser testing) are essential in the PWA development lifecycle.

Inspection tools for PWAs on iOS

• Safari developer tools : For PWAs on iOS, Safari's built-in developer tools are crucial. They allow developers to inspect, debug, and optimize their web applications for Safari on iOS devices.
• Remote debugging : Tools like Safari Web Inspector enable remote debugging of PWAs running on iOS devices. This is vital for testing and ensuring that the PWA behaves as expected on actual iOS hardware.
• Performance monitoring tools : Tools like Google's Lighthouse provide audits for performance, accessibility, progressive web apps, SEO, and more, offering valuable insights for optimizing PWAs for iOS.
• Service worker testing tools : Since service workers are a core component of PWAs, tools that facilitate testing and debugging of service workers are essential. This includes checking offline capabilities, caching strategies, and background sync functionality.

8. Background running and app switcher integration ‍

PWAs on iOS now have improved background running capabilities. They can run in the background and reflect their state in the App Switcher, similar to native apps. This development, although still subject to certain restrictions, marks a significant step towards offering a more native app-like experience

Background running in PWAs on iOS

Limited background execution ‍

Traditionally, PWAs and web apps on iOS have had limited capabilities in running in the background compared to native apps. This is due to the restrictions iOS places on background processes to conserve battery life and maintain performance.

Service Workers ‍

Service workers, a core technology behind PWAs, do run in the background, but their functionality is mainly focused on caching and push notifications (where supported). This enables some level of offline functionality and content updating in the background.

Recent enhancements ‍

There have been improvements in how PWAs handle background tasks on iOS. For instance, more recent versions of iOS started to allow some form of background processing for web apps, but with certain limitations and conditions, especially regarding timers and resource management​​.

App Switcher integration

Enhanced User Experience

Integration with the iOS app switcher is crucial for a seamless user experience. It allows users to view and switch between apps, including PWAs, as they would with native applications.

App state preservation ‍

For a PWA to be practical and user-friendly, it should maintain its state when a user switches to another app and then returns. This means that the PWA should resume where the user left off, without reloading or losing progress.

Visual representation ‍

In the app switcher, the PWA should ideally have a representative preview and icon, making it easily recognizable to the user. This visual representation is typically handled by the PWA's manifest settings and how the app is coded to behave in multitasking environments.

PWA on iOS - Limitations for users

The current limitations for users of Progressive Web Apps (PWAs) on iOS include:

No push notifications ‍

One of the most significant limitations for PWAs on iOS is the lack of support for push notifications. This impacts the ability of PWAs to engage users proactively, which is a key feature in many native apps.

Installation process ‍

Unlike native apps, PWAs don't have an automatic installation prompt in Safari. Users must manually add PWAs to their home screen, which may not be as intuitive as the installation process for native apps from the App Store.

Limited interaction with device features ‍

Certain device features and sensors may not be fully accessible or supported in PWAs on iOS. For example, while geolocation is supported, other functionalities like USB and Bluetooth connectivity are limited.

Variable performance across devices ‍

The performance and behavior of PWAs can vary across different iOS devices, particularly when considering the diverse capabilities and specifications of iPhones and iPads.

Limited offline capabilities ‍

While PWAs can work offline, their capabilities in this mode might be limited compared to native apps. The extent of offline functionality depends on how the PWA is designed and what data it caches.

App store discoverability ‍

While it's possible to submit PWAs to the App Store, they need to offer more than just a repackaged website. This can create a hurdle for PWA developers looking to leverage the App Store for discoverability.

Browser dependency ‍

PWAs on iOS rely heavily on Safari's capabilities and limitations, as it's the primary browser used for PWAs on Apple devices. Any limitations in Safari directly impact the capabilities of PWAs.

Limited support for advanced web features ‍

Safari's slower adoption of new web standards can limit the functionality of PWAs on iOS. For instance, features like Web Bluetooth or advanced payment options may not be available.

User Experience inconsistencies ‍

There can be inconsistencies in the user experience when using PWAs on iOS, especially when comparing them with their native app counterparts or their performance on other platforms like Android.

App state management ‍

Issues with managing the app state and layout changes, especially in the context of iPadOS and its Split Mode, can affect the usability of PWAs.

<span class="colorbox1" fs-test-element="box1"><p>Read also: Legacy Application Modernization Roadmap - a Step-by-Step Guide. Feel like the software in your company is no longer effective and has become a development blocker? That could mean it's time for a major update!</p></span>

Want to build a Progressive Web App? Here's what to consider

Advantages of building a pwa for ios.

• Broader reach and accessibility : PWAs can be easily accessed via a web browser, without the need for downloading from an app store. This can expand your app's reach to a wider audience.
• Reduced development costs : Developing a PWA can be more cost-effective than creating a native app, especially if you aim to support multiple platforms. You can use a single codebase for both iOS and Android, reducing development and maintenance costs​​.
• Improved performance and features : Recent advancements in PWAs, such as the addition of push notifications, enhanced offline capabilities, and background running, make them more competitive with native apps in terms of functionality​​​​.
• Ease of updating : PWAs can be updated more easily than native apps. Updates are deployed on the server side, eliminating the need for users to download updates from the App Store.

Considerations and challenges

• User Experience : While PWAs have improved significantly, there may still be some gaps in user experience compared to native apps, especially in terms of advanced features and integration with iOS-specific functionalities.
• App store presence : PWAs are not distributed through the App Store, which can be a significant channel for user discovery and trust. Depending on your target audience, not being on the App Store could be a limitation.
• Limited access to iOS features : PWAs may not have access to all iOS features and capabilities that native apps do, such as certain hardware integrations and advanced APIs.
• Variable performance across devices : PWAs can behave differently across various iOS devices, depending on factors like browser capabilities and hardware specifications.

Tips for building a PWA for iOS

• Focus on performance : Ensure your PWA is optimized for performance, especially on mobile devices. This includes fast loading times, efficient use of data, and smooth animations.
• Design for mobile-first : Prioritize a responsive, mobile-first design to provide a seamless experience on iOS devices.
• Test extensively : Thoroughly test your PWA on multiple iOS devices and browsers to identify and fix any compatibility or performance issues.
• Leverage latest web capabilities : Stay updated with the latest web technologies and standards to enhance the capabilities of your PWA.
• Consider user engagement strategies : Since PWAs don't support all native features, think creatively about user engagement strategies. For example, consider alternative methods for push notifications if they are crucial for your app.
• Prepare for offline use : Implement service workers for offline support, which is a key feature of PWAs.

<span class="colorbox1" fs-test-element="box1"><p>Read also: DORA Metrics: 4 Ways to Measure Software Delivery Performance . Improved processes and fast, stable delivery ﹣that’s what you get after starting to measure your team’s performance with DORA metrics. Learn how each of the metrics works and set the path to boosting your team’s performance and business results.</p></span>

Progressive Web Apps + iOS – A slow evolution

As you can see, things are changing slowly. Even if they don’t say it out loud, Apple has moved a bit closer to Progressive Web Apps. While the development of Progressive Web Apps for iOS is still more difficult than for the Android-based phones, it gets better over time. And there’s no doubt your business can still benefit from PWAs. Even on iOS.

Our company invests time in Progressive Web Apps by developing and popularizing them. If you’re more interested in this topic, let’s stay in touch.

Frequently Asked Questions

Our promise

Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.

A serial entrepreneur, passionate R&D engineer, with 15 years of experience in the tech industry.

Software development enthusiast with 6 years of professional experience in the tech industry.

Popular this month

Get smarter in engineering and leadership in less than 60 seconds.

Join 300+ founders and engineering leaders, and get a weekly newsletter that takes our CEO 5-6 hours to prepare.

previous article in this collection

It's the first one.

next article in this collection

It's the last one.

Progressive Web Applications (PWA) on iOS 13 & 14 Provide a Rich Channel to Reach Customers Despite the Platform Limitations

Last Updated - Sat Jan 09 2021

Progressive Web Apps are everywhere, literally. Every major browser and platform has support for service workers and are using the web manifest file in some form or fashion.

This includes Apple's iPhones and iPads using iOS Safari.

Do Progressive Web Apps (PWA) work on iOS?

The catch is Apple's implementation is somewhat restrained compared to other platforms, especially when compared to Chrome and Edge.

Stop right there!!!!

THIS DOES NOT MEAN Progressive Web Apps don't work on iOS, they do and they are great!

The limitations are limited at this time. Almost every feature you want n your application is supported by Safari on iPhone.

Safari supports service worker caching. It does not support push notifications or background sync. Safari does use parts of the web manifest file.

There is a 50MB service worker cache limit, but that does not mean you cannot persist more data. IndexedDB allows you to store a few GBs of data. It really depends, like other platforms, on the available space.

There is no native add to homescreen prompt, but other than Chrome and Edge no one else does either.Unused web apps that have not been added to the homescreen will have their cached assets purged after 7 days. This is less of a problem than most think.

That may sound like a lot is missing, but it is not as bad as it sounds.

A great feature of the web platform is the ability to progressively enhance (the progressive part of PWA) and polyfil many features when a browser does not support them natively.

To be fair Apple was really the first platform to support the concept of a web app. When they released the iPhone the first apps were HTML5 based.

As such they provided a way to manually add a website to the homescreen and launch in a full screen experience.

They kept the process simple, just sort of hidden.

Unfortunately, they never matured the experience. And service workers did not exist at the time.

Today that has changed, but like I mentioned, the iOS PWA experience is a little different than other platforms, but very serviceable. It is also improving with each Safari update.

I should note that Apple is not a fan of the term 'Progressive Web App' or 'PWA'. Instead they prefer to call them HTML Apps or Web Apps.

This is merely semantics. There is no official PWA specification, it is merely a term created to describe a modern breed of websites.

They are keen to point out that progressive web application is a term created by a Googler and initially promoted by Google. To be fair they are right.

The main takeaway from this article is why PWAs are a great choice to target iPhone and iPad users for your application. In fact Apple will probably tell you that too if you pay attention to the direction they are heading.

For now we know how Safari on iOS 13 supports modern web APIs. We are still waiting to see what updates and features will be added to iOS 14 and the next version of Safari.

Does Apple Even Want Progressive Web Apps?

Current pwa implementations have more success on ios than before, consumers are burned out on apps, pwa technology supported on ios, ios progressive web app cache capacity, does ios support push notifications, background sync on ios, ios pwa quirks.

Many wonder if Apple wants PWAs to succeed or even work on iOS and MacOS. The reason is progressive web apps compete with the AppStore.

The reality is Apple is more than willing to see apps leave the store and migrate to the web . They are doing a great job themselves of running off many brands from the AppStore as it is.

Recently they denied Hey.com's app update because they were not using Apple's in app payment services. Instead BaseCamp chose to use traditional merchant card services that charge 1-3% or 10% of Apple's 30% fee.

Spotify has filed a lawsuit against Apple's app store practices .

And then there is the Epic battle with Apple over Fortnite .

If you don't believe me, you should see app owners contacting me to create a PWA for them. Some because their apps were removed. Others because they fear removal or rejection.

By removing apps and making others 'uncomfortable' they are recommending to use the web.

Seriously, they even use that language:

"if the App Store model and guidelines are not best for your app or business idea that’s okay, we provide Safari for a great web experience too."

Clients have confirmed these Apple notices suggesting they move to the web.

So does Apple care about AppStore success? Yes, they do, but at the same time it is not their priority, selling hardware at massive margins is the goal.

Sure the AppStore generates billions in sales each year and yes Apple takes a 30% cut. But as I highlighted in the Spotify vs Apple article, much of that revenue is from a handful of apps.

I have created a litmus test to determine if your app should be native or a progressive web app: Does your app sell iPhones?

If the answer is no, then don't waste your time and money on a native app. Apple does not want you anyway.

But if you want to invest $5000-50000 on an iOS app to see if they will accept it be my guest. I am still here to make it available to everyone for less.😁

When you take the time and create a proper progressive web app you are taking the time to create a better user experience. This better UX ultimately means your customers are happier with your online experience and of course engage at higher rates.

Even with platform limitations a consistent message from brands using PWA is their iOS engagement numbers increase.

It is sort of real-world application of the 'a rising tide raises all ships' saying.

There are many PWA examples out there reporting across the board improvements to key performance indicators.

AliExpress saw an 82% increase in iOS conversions, the Washington Post saw nearly a 5x increase in user engagement and MyNet saw a 19% page view increase on iOS just to name a few sites and stats.

Even with the current limitations making a better web user experience means you will reap rewards on iOS. And eventually Apple will catch up to the competition. At least to where Chrome, Edge and other browsers are today. When those missing features light up your customers will just experience them.

Oh, and if you think having a presence in the App Store will make you successful, think again.

We know about 4 years ago consumers reached app fatigue and stopped downloading or installing apps.

Yes, apps are still downloaded, but for the most part it is the 4 or 5 apps the consumer uses the most and only when they get a new device.

For the most part these apps are Facebook. I mean Facebook, Messenger, WhatsApp and Instagram, all Facebook apps.

When you read over 80% of a consumer's screen time is in an app, almost all that time is using social media. The other apps are video, which honestly can be progressive web apps without degrading experience. I mean Netflix is phasing their apps out.

If you study mobile app consumption 99% of apps are rarely downloaded. If an app is downloaded 90% of the downloads are used once before the app is removed.

Most apps are eventually abandoned and after a while purged from the platform due to lack of interest by device owners.

Unfortunately, many still fear or falsely assume they need to have their brand in the AppStore to be found.

Are you Facebook? Are you Fortnite?

If you answered no, then most likely no one is looking for your app in the store.

They are searching for your products and services in search engines. While SEO ~ is not simple, it can provide piles of targeted traffic to your site.

Once you get them on your site you can easily remarket and engage them in your sales funnel. By the time you get them to the purchase point they don’t want to go through the 6-8 steps to download your app to their phone.

If you have a progressive web app they have already ‘installed’ the core plumbing required for your PWA experience. You just need to get them to formally install or add your PWA to their device homescreen. A far easier task than downloading an app.

I frequently read articles about limitations of progressive web apps on iOS. Most are a bit naïve and paint a much bleaker picture about capabilities than reality.

Sure, there are limitations with Apple Safari due to its laggardness in supporting modern web standards. The current joke among web developers is Safari is the new Internet Explorer.

Of course, Internet Explorer is Microsoft's old, long deprecated browser that had so much disdain passed its way. It lagged behind its rivals FireFox and then Chrome.

Today most browsers support the same modern web standards and capabilities. Most except Safari, which always seems to be at least 2-3 years behind the competition.

The story is not as bad as that sounds. The boundaries can be handled if you plan for them. And if and when Apple ships support for a feature it can just light up in your application.

I have built applications that deal with iOS limits. Even with the lack of push notifications you can fall back to SMS. Sure USB and Bluetooth are not supported, but the demand for these APIs is very niche.

Today's modern standards have elevated the web platform to almost even parity with native counterparts. Sure there are a few edge cases where the web does not have a viable specification. But these missing features tend to have rare implementations even with native apps.

So yeah, right now the web does not offer Geo-Fencing, but I know very few applications that leverage this technology anyway, so I am not that concerned.

As for progressive web applications, what they are and what they can do that mere websites can do is well, no different.

To be classified as a progressive web application there are 3 criteria:

• Register a Service Worker with a fetch event handler
• Valid web manifest file with a minimal homescreen icon set

That is the bare minimum, but of course there is more to the puzzle.

PWAs are just websites, but they differ from a common website in that they have those three technical features but are designed to just plain be better.

Ambiguous and anecdotal as you can get. Yes, it is the eye of the beholder if you will.

The thing about a progressive web app that makes them stand out can often be just taking advantage of platform APIs like Geolocation , biometric authentication, the payment request API, Bluetooth, Camera, Web Share and many other user experience APIs available today.

When you really boil it down, Progressive Web Applications deliver a superior user experience. This user experience gracefully degrades when the browser does not support a modern feature.

In other words, the web site provides the best possible experience the browser allows.

I find it frustrating how many of these features are assumed to not be supported or worse brand new when they have existed for years.

For example, Geolocation has been supported by all browsers for a decade.

Biometric authentication, i.e. fingerprint or facial recognition enjoys support among most browsers via the WebAuthn specification . For the record iOS Safari has shipped support .

As far as PWA support on iOS the only core thing missing is the support of the web manifest. The file that provides enhanced meta data about the web site to the browser. It facilitates the add to homescreen experience .

Apple has shipped limit support, or really partial use, for this feature. It is not a deal breaker.

That's right, a web manifest file is not required for a great user experience, and you CAN add a progressive web app to the iPhone homescreen.

iOS has had add to homescreen support on iOS since the first iPhone shipped. So rather than divert engineering resources to support this standard they focused more on catching up in the service worker space.

I think this was the right choice.

You can still include Safari's mobile-web-app-capable and touch-icon META tags in your page's HEAD without causing issues with other browsers on other platforms.

This is what is great about the web. It is very forgiving and you can add modern functionality to a website and gracefully degrade when the browser does not support a feature.

I am sure Apple will eventually support web manifest files, but for now I would prefer they focus on adding service worker features, other platform APIs and fixing bugs.

Right now, the biggest progressive web application limitation on iOS is the small cache capacity quota Apple imposes, ~50MB.

Again this is not a deal breaker for most web sites. If you need 50MB to cache your site's assets you really should revisit your application's code and caching logic.

I am working on a few projects right now that do need to cache more than 50MB, but they need to cache audio and video files. For these applications the media files can be looked at more as data rather than a network addressable resource, which is what service worker cache is really designed.

In these cases, the audio and video files can be cached using blob storage in IndexedDB, a browser database with much more available capacity. In fact, the IndexedDB capacity on iOS seems to be almost unlimited in the tests I have run, up to 1GB.

Let me put this in perspective, I have built several large web sites with 100s of unique web pages and support assets and cached everything (excluding images) in localStorage. localStorage is typically limited to 5MB, so you get the idea.

IndexedDB access is available within your service worker, where localStorage is not. This does mean you can intercept the network request to the more 'binary' responses and cache them in IDB in the service worker and sort of build a special caching abstraction layer to make managing their caching easier across different browsers.

Of course, even with Android and other mobile devices disk space is a premium. This is why Apple chose to limit service worker cache to 50MB. A 32GB phone does not have much storage once you factor in the operating system and other mandatory platform apps.

So, don't expect to be able to cache a high definition, large screen formatted movie. But audio books, podcasts and properly formatted videos should have no problem being cached on iOS.

So don't let the lack of service worker cache capacity stop you from using a Progressive Web App.

At this point in time Apple's iPhone and iPads do not support  native push notifications . You can gracefully fallback to SMS notifications. Both provide high engagement levels with minimal costs.

I am asked about this more than any other web platform feature, at least it feels that way.

Even though I get frustrated with Safari's limitations it does support most modern web APIs needed to make great user experiences.

This does not mean I am not asked by clients and potential clients if they can do some pretty crazy stuff. Most of the request are often not even possible with a native app. Others violate Apple, Google and Microsoft's terms, which means native apps are rejected and the stakeholders are hoping they can use the web to achieve their goals.

As for background sync this is a bummer. However, this is not supported by browsers outside the Chromium ecosystem at the moment.

You can create your own synchronization support by leveraging offline detection and IndexedDB. The main drawback here is the user will need to open your web app in order for your fallback to work. You cannot trigger the service worker to just execute in the background when the network returns, which is the main feature of the service worker background sync API.

Another quirk PWAs have on iOS is being purged. This can be very problematic.

Recently Apple has addressed this problem. When a PWA is added to the user's homescreen the platform will retained cached assets for an indefinite period. Even more incentive too push users to install your PWA.

Because Apple assumes space on its devices is cramped, they aggressively throw unused items overboard to free up disk space. Add to homescreen seems to be a signal to the operating system the assets are more important, therefor they are retained.

If your PWA or any website for that matter, goes unused for a few days (we think it is roughly 14 days, it is not documented) the device will remove all cached assets associated with the origin. This includes IndexedDB, service worker cache, localStorage, etc. Again, this concerns sites not added to the homescreen.

This has made relying on cached assets a bit of an issue. The real problem lies when a user might try to load your PWA while they are offline for the first time in a month. The PWA won’t work, even if your service worker pre-caches all the required files for offline functionality.

You should also build in a check for purged cached assets in your service worker. I think just important is you should also include some sort of notice for your users if they expect the application to function offline.

Let them know the content they are caching now may not be available if unused for a long period of time. If they anticipate needing your app for offline usage try to plan ahead.

In theory your cached content could be purge by other browsers too, but they are not as aggressive. Providing a message to set user expectations can go a long way to curb potential issues down the road.

Sure there are limitations to for Progressive Web Apps on iOS, but they are not deal breakers. Many of the most requested features have at least some form of fallback solution. It may not provide a comparable user experience the native web platform API or service offers.

For most mobile apps, especially on iOS, are not a good channel to promote and engage your customers. App installs are rare for most apps. Development, maintenance and marketing for these apps is also very expensive.

The web, progressive web apps specially, are available to everyone in every browser on every device. Plus they can be affordably marketed using organic search, PPC and traditional marketing funnels.

Many brands have reported improved customer engagement stats after upgrading their websites to a PWA, especially on iOS. Most likely your brand will too.

We use cookies to give you the best experience possible. By continuing, we'll assume you're cool with our cookie policy.

Install Love2Dev for quick, easy access from your homescreen or start menu.

• 12 Best Magento 2 Hosting Providers
• ECommerce Hosting 2024: All You Should Know + Best Options
• 20 Reliable Wholesale Vendors/Suppliers for Small Business in 2024
• Best Dropshipping Suppliers in the USA in 2024 (General + Niches)
• Shopify Checkout: Hide-Rename Payment & Shipping Option
• 11 Best Ecommerce Platforms for B2B Businesses in 2023

Magento 2 Hyva Theme vs. PWA Theme: Which Is Better?

• Magento 2 vs Shopify: Which Is the Right Ecommerce Platform for You?

PWAs on iOS 15: Improvements? [iOS 15.4 updated]

Table of contents

Apple claims that iOS 15 provides a better way to stay connected, focus, explore with its significant list of new features. However, is there anything that can make the life of a PWA developer easier? We will explore all of the biggest changes, the letdowns, along with some interesting news in this article.  

All Improvements for PWA

[ios 15.4]  navigational preload for service worker.

The iOS 15.4 rolls out some new improvements for the Service Workers including the navigation preload and more support for Service Worker-generated files.

In some cases, the service worker booting up can increase the network’s response time. The navigational preload prompts the network requests during the service worker’s booting time, which should help with PWA performance. 

[iOS 15.4] Improved Web App Manifest: Icons & more

Good news! After a life-long waiting, PWA developers can finally implement the web app on iOS 15.4 with a proper icon.  If there is no apple-touch-icon defined in the Web App file, the Web App Manifest icon will be set by default. 

However, the support is not perfect yet. There are still some minor bugs that affect the experience for both users and developers such as:

• Icons’ shape and format are limited to square PNG only.
• Icons are automatically resized if they do not match iOS’ pre-defined sizes (Ipads – 152 x 152 & 167 x 167, iPhones – 120×120 & 180 x180)
• Icons do not show up when you open the share sheet, but they eventually appear when you choose to Add to Homescreen. 
• Transparent icons will have an either black or white background. 

Moreover, in previous versions, the Web App Manifest is only fetched when users choose to “ Add to Homescreen ”. For iOS 15.4, the file is now parsed and loaded when the page loads already. As a result, you can apply the theme-color right on the page load, which makes the PWAs more trustable. 

[iOS15.4] Web Push Notifications

When writing an article for PWA iOS 15 last year, we share some evidence about how web push notifications may be coming and guess what’s, it finally happens.

Just like the Web App Manifest Icons, there are still some inconveniences related to the web push. For example, it’s disabled by default, so people must know about it first in order to use it. Also, some PWA developers find it impossible to use the Web Push API to request notification permissions although there are options for it. 

However, it’s worth-celebrating news. What’s better? Web Kit has announced the support for Web Push in Safari 16 on macOS Ventura. According to their teasing, Web Push may be available on iOS and iPadOS in 2023 .

Theme colour supported

Whereas the supporting status for the web app manifest is still “Partially Support”, Safari 15 has now officially enabled theme-color in HTML meta tags and Web Manifest . So now you can make changes to colours in the status bar and the overscroll area , which can also be applied for the Tab Bar and the overscroll background colors in Safari 15 Compact Tab layout on Ipad OS 15, Big Sur and MacOS Monterey . 

Moreover, by using the media attribute, you can also enable a dark/light mode for your Progressive Web App on Safari 15. 

Enhanced WebGL (Web Graphic Library) and Web-Share API

iOS 15 witnesses an upgrade from WebGL 1 to WebGL2. WebGL 2 is proven to be a significant enhancement that is much faster, offers a lot more texture than WebGL as well as many other benefits. 

Besides, Safari 15 includes support for Web Share level 2, which paves the way for developers to effectively exchange files from the browser to apps with the native share dialogue. Currently, it supports image, video, audio, text file and more . 

This change, for example, allows users to directly share images from PWA pages to their Twitter apps without extra steps of saving photos to the library and re-uploading.

Better Media Session API

Media Session API gives more data and playback controls, thus, brings media experience to a higher level. From iOS 15, users can access the NOW PLAY card from the Control Central , the Lock Screen as well as MacOS Monterey’s menu bar and control some simple playback options. Moreover, the new Media Session brings about the SharePlay experience , which enables watching movies, listening to music with your friends via Facetime. This can be good news for web-based podcast apps.  

WebM audio support for Safari, WebM/VP9 support for Ipad

WebM is an open-source royalty-free web video streaming technology. After first introducing the WebM Image in iOS 14, Apple now supports Opus audio codec WebM containers in Safari 15. Moreover, users can now stream WebM/VP9 videos on IpadOS15.

This update promises full support for WebM in the near future and we can expect WebM video to be available on mobile Safari soon. As a result, PWA owners will have more choices to display their video media to deliver better user experiences. 

Support for ES6 module in Service Worker

ES6 marks the first built-in module of JavaScript, provides a solid structure that is easy to work with, maintain, scale up and encapsulate behaviours . With the new ES6 Module coming to Service Worker, now developers can enhance performance and enable offline access for iOS PWA in a more organized way. As a result, it’s easy-breezy to quickly scale up, increase PWA functionalities to meet the market demands when needed. 

Simpler multi-tasking for iPad

The iOS 15 has made some improvements for a more intuitive multitasking experience on iPad while still retaining what has worked before. For example, there’s a new three-small-dot tab representing the multi-tasking menu at the display top that will make the app full screen, split screen or slide over. Besides, a hovering centered window is introduced in SplitScreen, where you can open a window on the top of your split-screen apps, then send it to Slider Over, Split View or Full Screen. 

Moreover, a new keyboard shortcut and a new multitasking user interface that views all apps (including the ones in Slide Over) is worth a quick mention. 

So far from the reviews, it seems that the new upgrade on Ipad multitasking for Web and PWA has received positive feedback to be much more user-friendly than iOS 14’s. 

New App Clip – Another noticeable update

We have mentioned the App Clip in our PWA iOS 14 Wrapping Up as something to expect for Android-like installable PWAs. So how is it now?

App Clip now can be integrated with websites, as a result, displayed in Safari. The card allows users to finish their initial tasks like ordering food, renting a bike then prompts them to install native apps on the App Store. The new change cuts some extra steps of iOS 14 to discover the app clips within the webpage and third-party apps. 

Unfortunately, there is still no sight of PWA installation banners. Will Apple make app clips PWA-friendly? Or are they trying to create a PWA version of their own? Or maybe app clips and PWAs just do not relate at all? The answer is still in the future. 

No major limitations are addressed

The new iOS 15 releases surely bring some disappointments to PWA developments as evidently, what we are looking for is still off-the-table. It’s still pretty much hard work to implement PWA on iOS 15 without the availability of these features:

• Background Sync
• Before Install Prompt and Installation Banner
• Background audio for PWAs

Moreover, there is no fixing to some bad points we mentioned in the iOS 14 article either. 

• No PWA icon in App Library
• Not many changes to Web App Manifest Support (besides Theme Colors)
• Status Bar is still black and black-translucent only.
• Big feature restriction on other web browsers

There you have everything iOS15’s got for PWA. While most changes on the 15 version are minor, the iOS 15.4 with Web Push and more Web App Manifest supports open up a brighter future for PWA on iOS. With the iOS 16 beta released in September 2022 , let’s hope for some more significant changes to come.

A wanderer at heart who tries to embrace all small beauties, live healthily and learn every day.

Related Posts

Best examples of headless shopify store in 2023, top 7 best progressive web apps course in 2023.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

PWACompat - the Web App Manifest for all browsers

You've designed a web app, wrote its code and service worker, and finally added the Web App Manifest to describe how it should behave when 'installed' on a user's device. This includes things like high-resolution icons to use for e.g. a mobile phone's launcher or app switcher, or how your web app should start when opened from the user's home screen.

And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify. Enter PWACompat , a library that takes your Web App Manifest and automatically inserts relevant meta or link tags for icons of different sizes, the favicon, startup mode, colors etc.

This means you no longer have to add innumerable, standard and non-standard tags (like <link rel="icon" ... /> or <meta name="orientation" ... /> ) to your pages. And for iOS home screen applications, PWACompat will even dynamically create splash screens so you don't have to generate one for every different screen size.

Using PWACompat

To use PWACompat , be sure to link to your Web App Manifest on all your pages:

And then either include this script, or add it to an async loaded bundle:

PWACompat will fetch your manifest file and do the work needed for your user's browser, regardless of whether they're on a mobile device or desktop.

We still recommend adding at least one high-quality shortcut icon, for search indexing:

For more information, see the best practices .

For supported browsers, what does PWACompat actually do? PWACompat will load your Web App Manifest and:

• Create meta icon tags for all icons in the manifest (e.g. for a favicon, older browsers)
• Create fallback meta tags for various browsers (e.g. iOS, WebKit/Chromium forks, etc.) describing how a web app should open
• Sets the theme color based on the manifest

For Safari, PWACompat also:

• Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone , fullscreen or minimal-ui
• Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
• Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers

If you'd like to contribute more or help with additional browser support, PWACompat is on GitHub .

PWACompat is live on Airhorner , v8.dev and Emojityper . Your sites' header HTML can be simple: just specify the manifest and let PWACompat handle the rest.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2018-07-17 UTC.

Safari 15.4 for iOS gains improved PWA support among 70 additions

Safari 15.4 for iOS and macOS is now available with 70 new additions to WebKit. These additions include improved PWA support, and new features for media, Safari web extensions, private click measurement, security, lazy loading, and much more.

We had previously covered experimental support for push notifications, WebXR, and improved PWA support found in iOS 15.4 beta. It seemed like all these features would be released in the future, but it is a pleasant surprise to see Apple focus on improving PWA support in Safari.

Safari 15.4 features

Safari 15.4 is a huge update and features a lot of new improvements in iOS 15.4, iPadOS 15.4 , and macOS 12.3 . Below is a list of some of the most interesting updates to the browser that will help improve user experience and performance.

The major focus areas for PWA in Safari 15.4 include support for Web App Manifest icons. These icons will be prioritized when no apple-touch-icon is defined by web developers. The web app manifest file is now fetched upon page load instead of when a user selects the “Add to Home Screen” option.

A number of improvements to ServiceWorker are also in this update. This includes support for files generated by a ServiceWorker as well as support for enabling Navigation Preload in ServiceWorker, which should help improve web app loading performance and avoid any delays that can block network requests.

BroadcastChannel or shared worker support is also available now. This allows tabs, windows, iframes, and other workers to communicate with each other if they are from the same origin. Web Locks API support now allows developers to “manage access to a resource as an asynchronous locking control from an origin in tabs, windows, iframes, and Workers.”

ResizeObserverEntry and ResizeObserverSize support has also been added and allows developers to control scroll behavior by instantly jumping to a specific position in the web app, or smoothly animating to it.

Lazy loading support is now built into Safari 15.4, just like Chrome and Firefox. This helps defer image loading until a user scrolls close to it or it is in the viewport.

Support for <dialog> element and ::backdrop pseudo-element now allows developers to create overlays and modals while animating the backdrop. This will be helpful for developers when focusing on accessibility.

Another interesting update is support for Fullscreen API for WKWebView and third-party browsers on iOS and iPadOS. This allows developers to control whether web content can be used in full-screen mode or not. If you were annoyed that most websites cannot show video in full screen in browsers like Chrome or Firefox on iPadOS, this might fix it.

There are also tons of other updates that focus on typography, CSS, JavaScript, Internationalization, media, privacy, security, web extensions, web inspector, and more.

You can read more about the rest of the additions to WebKit in Safari 15.4 here .

Share this:

Imran Hussain

Technology enthusiast, Internet addict, photography fan, movie buff, music aficionado.

• Follow me on Facebook
• Follow me on Google+
• Send me an email!

You May Also Like

M4 Macs: Release dates, specs, and the complete upgrade roadmap

Apple designing custom processor specifically for AI servers

Apple Pencil rumored to get major upgrade at May 7 “Let Loose” event

Leave a comment cancel reply.

• Create a Menu in Menus and assign it as Hidden Menu in Theme Location

Member-only story

PWAs On iOS: Where We Are Now

Danny Moerkerke

The confusing details of Apple’s quest to kill the only viable alternative to their App Store

Update: Apple decided to restore PWAs in the final version of iOS 17.4: https://developer.apple.com/support/dma-and-apps-in-the-eu#dev-qa

The havoc Apple has wreaked upon Progressive Web Apps (PWA) by sabotaging them completely on iOS 17.4 has left developers worldwide frustrated and confused. Not only because it’s an incomprehensible turnaround after their recent improvements in PWA support, but also because the situation Apple left us with is even more puzzling.

In this article, I will attempt to clear up the confusion.

Only in the EU

After the word leaked out that Apple broke PWAs on iOS 17.4 beta 1, confused developers started sharing screen recordings of iPhone simulators running the offending version in which PWAs still installed and ran fine.

Alas, this was not the situation on real iPhones running in the EU.

Apple restricted the change to the EU to comply with DMA regulations and did so through geofencing. It uses the SIM card to determine the user’s location and since software-based simulators don’t have SIM cards, the problem won’t show up there. If you were to run a new iPhone in the EU without a SIM card, PWAs will still work fine and reportedly also when you take out the SIM of an older iPhone and leave it on Flight Mode for 24 hours.

Anyhow, you need a real iPhone with a SIM card located in an EU country to experience the issue.

Installed PWAs are now just bookmarks

Another source of confusion is that you can still “install” a web app on iOS 17.4, meaning: an icon will be placed on the user’s Home Screen but the buck stops here.

When you click the icon, the app will not be opened as a standalone PWA without browser chrome anymore, but just like a regular website. In fact, this is how any website that is not a PWA is opened when you add it to the Home Screen. In other words, a web app that is “installed” is not really installed but just added to the Home Screen as a bookmark.

Currently, this is true for any browser that you can install a PWA with on iOS since all browsers on iOS are Webkit browsers under the hood.

PWA opens as regular website on iOS 17.4

youtube.com

What makes a PWA display like a full screen standalone app is the "display": "standalone" property in the manifest.json file. A website that doesn’t have a manifest.json file and that’s added to the Home Screen is opened in a browser like any other website when the icon is clicked. If it does have a manifest.json file with "display": "standalone" this is simply ignored on iOS 17.4 and the PWA is reduced to a bookmark.

Besides the fact that this completely breaks the UI, it also disables crucial functionality.

No more push notifications

Apple only added support for push notifications a year ago on iOS 16.4. Besides the fact that their implementation is suboptimal, push notifications are only supported for installed PWAs.

That is: installed PWAs running as standalone apps.

Now that “installed” web apps on iOS are no longer standalone apps but just bookmarks of websites, push notifications and badging are no longer supported.

No more persistent storage

Persistent storage was only recently added to Safari on iOS but since that is also only available for installed PWAs running in standalone mode, you can say hasta la vista to that feature as well.

PWAs used to be excluded from Apple’s eviction policy that dictates that data stored by any web app that hasn’t been interacted with for 7 days will be evicted, but not anymore for the website bookmarks that PWAs have become on iOS 17.4.

This renders PWAs completely useless and is probably the biggest nail in the coffin that Apple carefully prepared for them.

A security issue?

Apple claims that PWAs installed through non-Webkit browsers are a security risk because iOS provides support for PWAs by directly building on the Webkit security architecture. This security integration takes care of showing permission prompts when the app tries to access the camera for example and provides isolated storage.

Since non-Webkit browsers don’t have this security integration on iOS, installing PWAs through them would not be safe and would even result in PWAs being installed without the user’s permission.

Of course this is nonsense because Apple can build such an integration (like it has had for years on MacOS) but it doesn’t want to . To prevent being forced to build such an integration, it throws up a technical smokescreen and tries to get away with it ( but it looks like it won’t ).

Separating permissions and data by origin is one of the most important core functionalities of any browser, so there are no security issues other than the ones Apple made up to protect their App Store monopoly.

Apple is trying to kill the only viable alternative to their App Store that’s free from unreasonably high fees and arbitrary admission criteria.

Don’t let them fool you into thinking they’re not.

Join my email list Modern Web Weekly for a weekly update on Progressive Web Apps (PWA), Web Components and new features of the modern web platform, tested and explained in plain English.

Written by Danny Moerkerke

I write about what the modern web is capable of, Web Components and PWA, creator of https://whatpwacando.today

More from Danny Moerkerke and ITNEXT

PWAs Are Now Officially Dead On iOS In The EU

Apple gives developers, customers and regulators the finger..

Vitalii Shevchuk

🔥 Top 7 Mind-Blowing JavaScript Features for 2024

Javascript is a powerful and versatile programming language that is constantly evolving. in 2024, we can expect to see a number of new….

Abhinav Sonkar

Blazing Fast GoLang Docker Builds

How i improved my golang docker build times by 120x..

Apple Wants To Kill PWAs

It’s now more clear than ever, recommended from medium.

The guide to Git I never had.

🩺 doctors have stethoscopes..

Bella Lockhart

ILLUMINATION

Can You Pass This Apple-Orange Interview At Apple 🍎?

The iphone company’s interview question.

General Coding Knowledge

Stories to Help You Grow as a Software Developer

Coding & Development

Tech & Tools

Daniel Craciun

Level Up Coding

Stop Using TypeScript Interfaces

Why you should use types instead.

Stackademic

The Best Code I’ve Seen as a Professional Programmer

And what i noticed..

Stop Using find() Method in JavaScript

Forget the find() method in javascript: alternative approaches for cleaner code.

Effective Programmer

Why You Should Never Bother Switching to TypeScript

If you’re learning typescript or want to try it out, you might want to read this first..

Text to speech

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Enhancements

There are many enhancements that can improve the conversion and usage of your PWA.

App shortcuts

App shortcuts is a static list of deep links to your PWA, they are written in your manifest. Web App Manifest spec . It lets you define a list of shortcuts to different parts or features in your PWA, they accelerate navigation to frequently accessed sections.

App shortcuts are available on most desktop operating systems and Android with WebAPK, and they appear in a contextual menu on the app's icon in the home screen, dock, or taskbar, as in the following image:

To access this menu, users have to right-click or long-press on the PWA's icon.

Shortcuts are defined in the shortcuts member of the manifest. It takes an array of members with the following properties:

You should treat App shortcuts as a best-effort ability. That means that you can't rely on these shortcuts to appear consistently, and even if they appear, you don't know how many shortcuts will appear or if the platform will ignore the icons as its at the discretion of the browsers. A full discussion per platform is out of scope but below you have an idea of how it works on Android and desktop. The best way to deal with this uncertainty is to order the items by priority.

The following code sample defines different app shortcuts you can try if you install the app on Android with Chrome or on desktop with Edge or Chrome.

iOS and iPadOS

When publishing PWAs, there are some enhancements that can improve the experience for users on Safari on iOS/iPadOS.

Splash screens

As seen in the Web App Manifest chapter , Android creates splash screens automatically based on the manifest's values. That's not the case for iOS and iPadOS. In these devices, you should define the splash screens in the HTML as static images using <link> elements.

These images are known as startup images on Apple devices and they use the rel property with apple-touch-startup-image value, as in:

The challenge is that the startup image must have the exact window size that your PWA will have on opening. So, different iOS and iPadOS devices will need different images. More situations need to be covered on the iPad, such as landscape/portrait openings and rendering the PWA in multitask mode (such as 1/3,1/2, or 2/3 of the screen).

You can check an updated list of iOS and iPadOS screen sizes at the Apple Human Interface Guidelines

Different versions of the launch image can be set with a media query inside the media attribute:

Design patterns for iOS startup images

Defining startup images is hard work, so we have a couple of tools for automated generation and configuration:

• Static generation integrates with your build system, creates all the PNG static images and gives you the HTML code with <link> elements to inject into your document. PWA Asset Generator is an example of such a tool.
• Client-side generator, a JavaScript tool that can embed one or more base64 versions of the startup image into <link> injected elements based on the current device's type and screen size. You can use an in-memory canvas, render the image and convert it into a data: URI with a PNG file. The PWA Compat library is an easy-to-use client-side library that does this by cloning the Android's typical launch screen.

Detecting a PWA on Apple mobile platforms

While you should use Progressive Enhancement and feature detection in your PWA, there may be some edge cases where we need to know if the user is in a PWA on Apple mobile platforms, such as when you want to offer installation instructions or add links to platform-specific apps that are iOS-only.

To avoid reading the user agent string, check the standalone property of the navigator object. This is a non-standard property, and it's only available on the WebKit engine on iOS and iPadOS.

• If navigator.standalone is undefined it means the user is not on an iPadOS or iOS device.
• If navigator.standalone is false it means the user opened the PWA in the browser and is using it there.
• If navigator.standalone is true it means the user opened the PWA from the home screen and is getting the standalone PWA experience.

Fullscreen support

On Safari on iOS and iPads, only display: standalone is supported as a display mode for your PWA's icon . While display: fullscreen is not supported as on Android devices, it's possible to use a non-standard meta-tag to make your PWA enter fullscreen mode.

In the next image, you can see at the left a default standalone design with a theme color, and at the right a PWA with a fullscreen iOS mode that lets you render content behind the status bar.

If you add the following tag in your HTML your PWA on iOS and iPadOS will enter full-screen mode, but it is different from Android.

In this mode, the device's status bar (the top where you see the clock, battery level, and notification icons) is still visible but rendered on top of your content with a transparent background.

When using this mode, be careful with your design because the operating system will always render the icons in white, so you should always contrast your backgrounds for the top of the screen with light content. Also, it's important to use CSS environment variables to render content in the safe area, as seen in App Design Chapter .

Installation reliability

Safari on iOS and iPadOS before 15.4 only loads the manifest file from the network when the user opens the share sheet -using the share icon within the browser- and not when the page loads. Therefore, Safari doesn't check if your website is a PWA until that moment, which can lead to situations where the manifest can't be loaded or takes too much time, and Safari ignores it.

When Safari can't load the manifest on time, pressing "Add to Home Screen" places an icon on the home screen, but does not provide an app experience; it will merely be a shortcut to a Safari tab.

• PWA Asset Generator
• Get things done quickly with app shortcuts
• PWA Compat Library
• Define App Shortcuts

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-03-10 UTC.

DEV Community

Posted on Feb 28, 2020 • Originally published at laemmer.dev

Favicon/App-Icon and Manifest for your PWA

Why your favicon/app-icon is important.

So your designers or you created a CD (Corporate Design) with your used color-schemes, typefaces/fonts, image-language and in the best case already a logo. You want to create a recognition value so potential customers/users recognize your brand whenever they get in contact with it.

A good logo is the easiest way to get memorized by your customers and users. It helps you to stand out from your competition and can deliver your message.

Typically, logos today have two variants:

• A full logo with landscape orientation consisting for example of a word mark and your logo symbol
• A pictural mark or logo symbol with square dimensions like the iconic Apple logo, the Twitter bird or the Facebook “f”

The later one you typically will use as the favicon of your website or the app icon if users can install your app.

Doing so your users can link your brand to your icon and will find your app faster on their home screens or in their stack of open tabs 😃.

Generate Variants of your Icon

If you are developing a Progressive Web App (PWA) you don’t really know what devices, browsers or bandwidth your users have. Your goal should be that your users get to see the best quality their setup can handle.

An awesome tool to generate all the variants of the icon you need for a webapp is the Real Favicon Generator . All you need is a “good” variant of your icon. If using an PNG or JPEG your icon must have 70 by 70 pixels at least — for good results you better use 260 by 260 pixels. In the best case and for perfect results you should use a vector file like SVG instead.

As an example, we created this “awesome-logo” which we are going to upload.

Then this tool will come to shine by letting you customize your icon for the various use cases:

For iOS, where users can “webclip” any website, you can select to fill the transparent regions of the logo with black or you can select a color as a background and even set a margin.

Android Chrome

Now you can also make settings how the icon should look like on Android devices.

But in the next section there is even more magic hidden:

In the main settings you can set the app name that will be displayed on the home screen below the icon. Furthermore, you can set a theme-color which will be seen in the app switcher and the notification-bar. Also, this will generate a splash screen for your PWA out of the box.

In the options tab you can set if your app should use browser-mode and just behave like a bookmark for your browser or if it should use standalone mode which we would normally use for a PWA. This will provide a little more “native” style to the opened page in Android Chrome. In particular, it lets you enforce the start URL and screen orientation. It also removes the navigation bar and gives your website its own tab in the task switcher.

Other System Settings

Next you can also give some settings for your icons look in Windows Metro Tiles and macOS Safari Touchbar if you want.

For all platforms you also have the possibility to upload another dedicated picture.

Favicon Generator Options

You now need to set the path where you are going to place the favicon files. Due to old browser support it is recommended to place them in the root of your website. But you can also place them in a subfolder.

Depending on your logo, you can define what quality and compression should be used to reduce the file size of the icons in the tab compression . To speed up loading time for your users you want to use the highest compression rate without artefacts.

Next you can define if the app name should be set by the page title in the html or if you want to use a specific app name and override it.

If you are all set you can go hit the Generate—button .

Adding the icons to your PWA

After your package is generated, you can download your favicon package. Besides the side.webmanifest and browserconfig.xml files you get a set of the variations of your logo for different use cases:

All you now need to do is putting the files in the right place in your public folder and add the above shown code to the head of your pages (in case you are creating a single page application this would be in the index.html or you use a document head manager like react-helmet where you need to set this up).

Now you have a perfect solution for your PWA App-Icon and without any further efforts already the manifest for your PWA.

Your users can now easily “install” your website on their devices. On desktop since Chrome Version 75 this is even easier: the installation prompt for PWAs is now shown directly in the URL/omnibar while on mobile devices the Install  — prompt is shown at the bottom of the screen. When “installed” the users will now have your app icon on their home screen, their app-bar, or start menu which leads them directly to your new PWA.

The next step for your PWA would be setting up a serviceworker to manage your apps offline and loading behaviour or to set up notifications.

At LEAN BAKERY we are building digital products for major brands, corporates, NGOs and startups. We dedicate ourselves to your idea and love to fully understand the problem you want to solve. We’ve spent more than 300 days developing our technology and methodology bakerplate which can also help you to turn your ideas into a scalable product within weeks. Talk to us, we love new challenges 😊

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

css-shape.com: The Ultimate Collection of CSS-only Shapes ⚡️

Temani Afif - Apr 22

Setup path aliases in React + Vite + TS Project 🤓

Muhammad_Dwi_Prasetyo - Apr 13

I built these 5 types of loading animation in HTML and CSS, which do you prefer?

Adeyele Paul - Apr 22

PYTHON LOGICAL OPERATORS

Maame Afia Fordjour - Apr 12

We're a place where coders share, stay up-to-date and grow their careers.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Define your app icons

Progressive Web Apps (PWAs) can be installed on devices just like other apps. Once a PWA is installed, its app icon appears on the device's home screen, dock, taskbar, or any other place where operating system native apps normally appear.

For example, on Windows, the taskbar can contain icons for both native and PWA apps side by side:

When creating a PWA, you can define your own set of icons to be used when the app is installed on a device. This article explains how to define your own app icons, which icon sizes to create, and how to make your icons support masking.

Note: The PWA app icon is not the same as the favicon image, which is displayed in places like the browser's address bar. PWAs can have both a favicon and an app icon. To learn more about favicons, see Adding custom icons to your site .

Design your icon

The first step in defining your app icon is to design it.

Most users recognize applications by their icons. Icons appear in many places through the operating system, including the home screen, taskbar, app launcher, or setting panels. Make sure your users can easily find your app by making its icon both visually appealing, and representative of your application.

The image should have a transparent background so it can be displayed on a variety of backgrounds. It should be at least 1024x1024 pixels, or scalable to that size, as this is the largest size your icon may be displayed at. You may also want to create icon versions with fewer details, to be used in places where the icon is displayed at smaller sizes.

Designing your icon as an SVG file is a good idea, as this will allow it to be scaled to any size without loss of quality.

Reference your icons in the web app manifest

Use the icons web app manifest member to define a set of icons for your PWA.

As described in Create the necessary icon sizes , you should create multiple versions of your icon to ensure it appears correctly in all the places where it's used. This is why the icons member is an array of objects, each of which represents an icon, with its own size, type, and purpose. Each icon object has the following properties:

The URL of the icon image file.

The sizes the icon can be used for.

The MIME type of the image file which the operating system can use to quickly ignore images it does not support.

The OS-specific purpose of the image.

For example, the following web app manifest defines five PNG icons, each with a different size:

Create the necessary icon sizes

Various operating systems use different icon sizes in different places and for different device capabilities. It's important to create multiple versions of your icon so it appears correctly in all the places where it's used.

For example, Windows can display your app icon as a 44x44 pixels image in the taskbar, or as a 150x150 pixels image in the start menu. Use the links below for more information about the icon sizes used by different operating systems and tips for creating effective icons:

• For Windows, see Define icons and a theme color on learn.microsoft.com.
• For Android, see Google Play icon design specifications on developer.android.com.
• For iOS and macOS, see App icons on developer.apple.com.

The sizes at which your icon is displayed depend on the operating system and may change over time. It's best to test your icon on all the devices and operating systems you want to support, and generate the sizes and image types that lead to the best results. You can also use a tool like PWA Image Generator to generate the necessary icon sizes for you from a single high-definition image.

Note that some operating systems support SVG icons which can help reduce the number of images you need to create since SVG can be scaled to any size automatically. If your SVG icon doesn't scale down to small sizes nicely. creating additional icons with fewer details and less complexity may be necessary. To support all OSs and small sizes, create PNG versions of your icon as well.

The following web app manifest example uses a WebP image for the small icon, an ICO image for medium size icons, and a scalable SVG image for higher resolution icons:

Learn more about how to reference the various icon sizes in Reference your icons in the web app manifest .

Support masking

Depending on the operating system and the device capabilities, a mask may be applied to your icon to match a particular shape. Maskable icons are adaptive icons that can be displayed in a variety of shapes that operating systems provide. For example, on Android, app icons can have a circular mask.

Your PWA app icon should specifically support masking to look well integrated with operating systems that apply masks. Icons that do not support masking may appear cropped or smaller than expected. On Android, non-maskable icons are centered within the circular mask and given a white background, which may not look good with your icon.

The following image illustrates the difference between a maskable and a non-maskable icon on Android:

To start making your app icon maskable, use the purpose property in the icon objects of your web app manifest, and set its value to maskable . For example:

Using the purpose property is just the last step in making your icon maskable. You need to start by making sure your icon looks well integrated with the host operating system by ensuring the important parts of the icon appear well within the mask's safe zone .

The safe zone is the area that's guaranteed to always be visible when the mask is applied and is defined as a circle which diameter is 80% of the icon's minimum dimension.

For example, if your icon is a square, make sure that the square is entirely visible within the safe zone and that its corners are not cut off.

Finally, give your maskable icon an opaque background color to fill the entire icon area.

You can also use tools like Maskable.app to preview how your icon will look when masked on different operating systems.

• icons manifest member
• App design on web.dev
• Adaptive icon support in PWAs with maskable icons on web.dev
• Define icons and a theme color on microsoft.com
• PWA Image Generator on pwabuilder.com