Why does a PWA require so many assets?
Android automatically generates a splash screen for your PWA. But Safari on iOS requires to manually create a splash screen for every single possible iPhone and iPad screen size. This tool does exactly that and also provides you with the meta tags that you need to add before the closing head
tag in your HTML template.
Are the iOS splash screens up-to-date?
Absolutely! Unlike other iOS splash screens generation tools, ours is and will remain up-to-date. We update it when Apple releases an new iPhone or iPad. This free tool uses the same code that our commercial product Progressier uses. Our commercial product generate splash screens and add them to your app automatically. This tool provides you similar functionality for free, except that you need to host these files and copy-paste the meta tags on your own (Progressier comes with a bunch of extra stuff as well, like push notifications and offline capabilities).
Why do iPad landscape splash screens look stretched?
That would be because of a long-standing bug that still hasn't been fixed by Apple. In landscape mode, Safari ignores the specified landscape splash screens and instead uses the portrait splash screens, which it stretches to fit the screen. There's unfortunately no fix for this. See our dedicated help center article for more details.
What is a maskable icon?
Maskable icons allow your PWA icon to look great on all Android smartphones and tablets. You specify an image file with a safe area in your app manifest. And every device will crop that image in their own way so that all icons follow the same pattern on a given homescreen. The resulting icon fills the entire width and height of the icon box. A maskable icon may be displayed within various shapes. In most cases, it's either within a square with rounded corners or within a circle. You can read more about maskable icons here. Maskable icons shouldn't have a purpose set to any maskable.
Can I use a different PWA icon on mobile and desktop?
Maskable icons are great on mobile, but they don't look fantastic on Desktop. Windows and Mac don't really crop your maskable PWA icons and make use of the safe area at all. With Progressier, you can easily choose to display two different sets of icons on mobile and desktop. Our server will detect which to use automatically.
Can I use a transparent PWA icon?
Not anymore. Android used to support icons with transparency. This resulted in your home screen containing icons in various shapes. Most recent Android versions automatically add a background to your app icons. This was probably done in a effort to emulate iOS and also simply provide more consistency across apps. So that your PWA icons look and feel the same on all platforms, we automatically add a background for you.
Why can't I see the name of my PWA on Android splash screens?
Android used to output your splash screens automatically based on the name, theme_color and icons in the app manifest of your app. However, this changes every now and then. In recent Android versions, the splash screens only displays the theme_color and icons of your apps and no longer use the name of your app. This may vary from device to device depending on the exact Android version it uses. So as a general rule of thumb, you should not count on the splash screen being displayed in a particular way.
Where should I copy-paste the meta tags provided?
Download the bundle, unzip it, and open the text file provided. Copy the tags between the <head>
and </head>
tags in your HTML template. if you're using Bubble, paste these meta tags in Settings > SEO/metatags > Advanced settings > Scripts/meta tags in header.
Can I generate my PWA assets dynamically?
Not with this free tool, but Progressier also comes with a solution for Programmatic PWAs. This set of APIs and features allows you to generate multiple PWAs on the same domain or on different domain on the fly. It also creates all icons and iOS splash screens for your PWAs generated that way, similar to what this free tool provides (with a bunch of extra stuff, obviously).