Recently I was developing a Progressive Web App (PWA). A PWA is a web app that you can install on your smartphone without downloading it from a Store, cool isn't it ? These kind of applications are not going to replace native web apps right now but it seems it has become an interesting technology.
Anyway, my problem was to add the splash screen of my application for iOS users. Now I know how to easily add a splash screen, and I will explain you how to reproduce the following exemple :
First of all, we need to create a react app :
npx create-react-app my-app
Put your logo (we will call it logo.svg) in the public folder of the newly created react app. And now we are going to actually add the plash screen capability for all types of iPhone screen size :
cd my-app/public
npx pwa-asset-generator logo.svg ./assets -i ./index.html -m ./manifest.json
The pwa-asset-generator script (github repo) generates all the existing iPhone screen sizes and puts it in the asset folder, but also it adds in the index.html and in the manifest.json all metadata needed by the phone to choose the correct image for the screen splash ! This tool is so amazing !
Now you can start the development server, take your 📱, access to your app with safari, install it to your phone and test the splash screen !
Top comments (1)
This seems to work only if there is a SVG file with the logo, right? I'm looking for a tool that creates splash images right from PNG oder JPG graphics. Or at least a description what kind, resolution and size he splash files are supposed to be.