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.
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
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
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
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
registration logic. It contains functions
register, which registers a service worker. And another one that unregisters as a service worker. Now
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.