Change the Name and Short Name of a PWA built with create-react-app

Share this video with your friends

The name of a PWA is defined in the manifest.json file. We'll edit the default manifest that comes with create-react-app to change the name and short name of our app.

The short name has a maximum length of 12 characters, and is used underneath your app when it is installed on a user's homescreen.

The full name has a maximum length of 45 characters, and is used in the Chrome web store, and in the installation dialog boxes, when a user is installing your application.

If you don't specify a short name, then the long name will be truncated to fit the space.

aryyya

~ 6 years ago

The "Add to homescreen" button in the Identity section of the Application Manifest devtools tab isn't available for me. I've got the latest version of MacOS and Chrome, and as far as I can tell the exact same code in my manifest.

aryyya

~ 6 years ago

I've cloned the provided repository and switched to the branch for this lesson. There is no "Add to homescreen" button available.

Chris Achard(instructor)

~ 6 years ago

aryyya: Add to homescreen was added in Chrome 70 - so as long as you have that or higher, it should be there... hm. Is the manifest cached maybe? If it's been cached without the large icon, then I think it won't let you add it to the homescreen.

aryyya

~ 6 years ago

Chris:

Here is what I'm doing:

git clone https://github.com/nanohop/todo-pwa/
cd todo-pwa
yarn install
git checkout change-name-and-short-name
cd server
yarn install
yarn start
cd ..
yarn build
serve -s build

Here is the application running with the App Manifest devtools tab open: https://i.imgur.com/AhRoR81.png

Google Chrome Version 74.0.3729.108 (Official Build) (64-bit) macOS Mojave 10.14.4

Chris Achard(instructor)

~ 6 years ago

Thanks for the detailed report! Huh - interesting... I don't see the 'add to homescreen' link either now... It appears that Chrome behavior may have changed; but I can't quickly find any information about it. I'm going to have to do some research and figured out what may be different, and update the video. Thanks for pointing that out!

aryyya

~ 6 years ago

No worries. I'd like to see how to actually do this so I will check back here later to see if the video is updated.

The Google doc pages are up to date as of last month seem to indicate that the behaviour should still be the same as in your video. Perhaps some requirements have changed for the application to qualify as a PWA?

The only one I can think of is that the PWA must be served over HTTPS, which it obviously isn't when using the local server. But when I use ngrok with HTTPS it still doesn't work. So I've got no clue what the issue is.

https://developers.google.com/web/fundamentals/app-install-banners/

Andrés Osante

~ 5 years ago

The button is now in Chrome's address bar. Next to the star for bookmarking, there should be a plus sign. When you hover it, it should read: "Install name-of-app".