Creating a Home Screen Experience with a Web Manifest

Progressive web apps make a website feel like a native app. For a business stakeholder, this gives them the opportunity to use a free app store to engage customers. For real users, it means that the sites they routinely visit can be installed without any friction. Either way, it is a marketing opportunity to increase engagement by delivering a better user experience and an natural way to place their brand's icon in the customer's most important location: their homescreen.

Each platform (operating system and browser) implements a homescreen and how the application is launched in their own way, but most involve some sort of bookmarking process and opening experience driven by the web manifest file.

Chrome for Android places installed PWAs in the application shelf and allows PWAs to be managed like a native app in the device settings. Microsoft leverages the Windows Store and is formulating a free store installation process for future releases. Apple is still figuring out how they will implement these experiences, but they are building on their legacy experiences.

This chapter goes over how to create a web manifest file to describe your application to the platform and how you can programmatically prompt the user to add a PWA to their homescreen. You'll see me refer to the process of add to homescreen throughout this chapter, but it is only a name that refers to more. The term add to homescreen has sort of grown to be the de facto way of describing how PWAs are installed on the user's device.

The reality is more diverse as there is no official common specification for this process. On Android, you add application icons to the homescreen, and since this is where PWAs first saw adoption, this is how the term originated. Today, each browser and platform handles this process differently. Even unique browsers on Android vary from what Chrome has been practicing. During the writing of this chapter, Microsoft Edge required you go through the Windows Store to install progressive web apps, but even that is in flux.

As this chapter progresses, you will see how this concept applies to different browsers and platforms, and learn how to describe your PWA to the platforms using a web manifest file.

The following topics will be covered in this chapter:

• The web manifest file
• How the add to homescreen process works
• How to use legacy features to Polyfil the add to homescreen experience