{"id":21523,"date":"2017-05-15T14:58:10","date_gmt":"2017-05-15T14:58:10","guid":{"rendered":"http:\/\/getting_a_better_react_ion_with_progressive_web_apps"},"modified":"2022-03-03T16:53:19","modified_gmt":"2022-03-03T16:53:19","slug":"getting_a_better_react_ion_with_progressive_web_apps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/getting_a_better_react_ion_with_progressive_web_apps","title":{"rendered":"Getting a Better React-ion with Progressive Web Apps"},"content":{"rendered":"

This is part 2 of a 3 part series<\/em><\/p>\n

React has become more popular, as well as more mature, over the last four years since its release by Facebook. It has become one of the go-to technologies for people looking to componentize the front-end of any web application. It also helps that an entire mobile stack is built around React in the form of ReactNative<\/a>. The components are wonderful, however there can be a burdensome learning curve. But, in the end, there\u2019s the payoff of highly reusable code and a better user experience.<\/p>\n

\"React<\/p>\n

To help people infuse React apps with image and video management services, Cloudinary<\/a> provides a fully formed set of React components<\/a> that can quickly be configured and dropped into your application. Your app is already equipped with management and manipulation of media assets and delivering them via a CDN, and you already have a React app delivering the content to your end user. Now, you may want to boost performance and make your end user\u2019s experience even better. To do that you\u2019ll want to follow the tenets of React Progressive Web Apps.<\/p>\n

What are Progressive Web Apps? There are many sources where you can learn more, including an article we recently wrote about why you should care<\/a>. But how do you introduce that into an already complex stack of a React application? We\u2019ll show you, step-by-step.<\/p>\n

You\u2019ve got your app and it\u2019s using the Cloudinary React components. It may look a little like https:\/\/github.com\/ukmadlz\/cloudinary-pwa-react\/releases\/tag\/basic-media-app<\/a>. So what steps do you need to take to make it a React Progressive Web App?<\/p>\n

Step 1: Security<\/h2>\n

Is your application secure? All the features needed to turn your application into a Progressive Web App can only be used from a connection being served over HTTPS. If you are not doing so already, you can find guides for using services like CloudFlare to quickly implement an HTTPS cache in front of your application. When developing, localhost and 127.0.0.1 are considered to be secure and trusted endpoints, so you can develop without using certificates locally.<\/p>\n

Step 2: Discovery<\/h2>\n

Is your application discoverable? Part of making a web app a Progressive Web App is introducing a web manifest<\/a>. This JSON file describes the application, as well as assets, to make it easier to use on different devices. For the sake of Progressive Web Apps on Android, it helps with the app name, description, splash page, Chrome shell wrapper, and home screen icon.<\/p>\n

The most basic web manifest looks like this:<\/p>\n