How to automatically trigger ADD TO HOME SCREEN in a Create React App PWA?

Welcome to today’s video on how to trigger ADD TO HOME SCREEN prompt in your Create React App (CRA). You may already be familiar with this kind of a prompt while using apps. We will see how you can do the same with a CRA and test it on your machine.

Full Transcript

Hi there. Welcome to today's video on how to trigger Add to HomeScreen prompt in your create react app. You may already be familiar with this kind of a prompt while using apps. We will see how you can also do the same with the CRA and test it on your machine. Let's spin up a create react app using npx create-react-app my-pwa. And a react app is created. Now let's get inside the my-pwa directory and start the app using yarn start. We will now go to the browser at http://localhost:3000. It doesn't really show anything and there is no prompt. Well that's because there are certain requirements that should be fulfilled before an app becomes installable. So what are those requirements? Your project should have a web app manifest file containing all the mandatory properties. There should be a registered service worker with a working fetch handler.

Your project should also be deployed on an HTTPS server that has the SSL support. And definitely your project should keep the user engaged. Once all of these heuristics are met, your end user will see the add to homescreen prompt. If you're using create react app, you get these two out of the box. And if you couple them with the deployment of the app on an HTTPS server and engaging content, then browsers like Chrome and Edge automatically promote your app to users so they can add it to their home screen. Let's go back to the code base of my-pwa project. And inside this public directory, you should see the manifest.json file with some properties. This come baked in when you spin up a CRA. The properties like short_name, name, start_url, display, and an array of icons of different sizes is needed for the install prompt.

Now, I have already covered in a separate video about the serviceworker.js file that comes with the create react app. But in short, this JavaScript code takes care of the service worker registration logic. It contains functions register, which registers a service worker. And another one that unregisters as a service worker. Now registerValidSW and checkValidServiceWorker are utility functions that are called inside the register function. Another important thing that you should pay attention to is this piece of code that restricts the service worker registration, when the app is running in development mode. So you will not see add to homescreen prompt, if you simply run this project using yarn start and hit your browser at localhost:3000, you need to deploy this on a server. We look at how to do that shortly. Let's head over to the index.js file, which currently calls the unregister method from the serviceworker.js file. We need to instead called register method. So when the app loads, the service worker gets registered, we will go back to the terminal and create a build using npm run build. Unless the node environment is production, your service worker registration will not kick in. Now we have the build directory. It should be deployed somewhere, right? The quickest way to do that is by adding the serve dependency and deploy this build directory. We will do both of these in one shot using yarn global add serve, and serve -s build.

As you can see, it's deployed in just seconds. So if you're testing on the phone, use this URL, but I'm testing on the desktop browser. I'll use a localhost URL. And I'm also using Chrome in this video, so make sure you replicate this using Chrome itself. Safari doesn't support install prompt. I'll hit the localhost:5000 URL. And once you spend few seconds, there you go. You should see this install prompt. So Chrome on desktop supports this prompt, if you meet the requirements of installability. When you click the install button, it will install this app inside your Chrome apps. So for the local development, quick deployment using serve saves you a lot of time and gives you a fair idea how your app would behave in production. One thing you need to make sure is you have HTTPS support enabled on your production server.

Otherwise, in addition to being penalized by search engines, you will not be able to leverage PWA features such as add to home screen or install prompt to engage your end users. One last thing, before you go, I mentioned that installability requirement also needs a registered service worker with a fetch handler to prove that the service worker in fact has a fetch handler, you can check this using the URL chrome://serviceworker-internals, and this is going to give you the service worker for every domain that you've opened in your browser. So for our domain, there is a service worker which is activated and also has a fetch handler. You can always verify the service worker registration from the Chrome dev tools Application tab, but I wanted to show you that fetch handler indeed exist. That's all I wanted to cover in this quick video. I hope this was helpful and I'll see you in the next video.