✨ The magic ✨

You need 4 things to make a PWA: HTTPS hosting, a service worker, a properly configured index.html file, and a web app manifest.json file. The examples below are geared towards React but are similar for any framework.

Step 1: HTTPS hosting

Firebase provides free SSL certificates and freemium hosting. Another great choice is Netlify.

Step 2: Set up a service worker

If you want your app to work offline once installed, you’ll need a service worker. Create React App makes one for you, but you can always configure your own using something like this. Learn more about how they work.

Your index.html and manifest.json let you customize your app icon and splash screen for any device.

Step 3: Configure your index.html file

A challenge in configuring your app is understanding the difference in how iOS and Android use the meta tags in index.html and the web app manifest. We’ll explain how each option is used below.

One painful part to this process is creating the massive number of splash screens for iOS: one for each screen size and orientation you want to support, otherwise users will see a white screen while your app loads.

Step 4: Configure your manifest.json file

Create React App makes a manifest.json file in your public directory, but if you don’t have one yet create it and make sure it’s referenced in index.html (lines 19–20 above).