What is React PWA?

PWA stands for a progressive web app, and it is the technology that brings web and mobile development to a new level. It is designed to bring the best user experience for the mobile users of web apps and platforms. The PWA technology allows the user to open a native-like app via a browser, to install it instantly, to make use of most native-like functions, and to use the app offline. The goal of a progressive web app developer is to make a website resemble an app installed on one’s smartphone, tablet, laptop, or PC.

The PWA technology offers six essential benefits:

A progressive web app loads faster than an ordinary website and is faster to install and start using than a mobile app. All static website assets are cached, so the page loads faster with each subsequent visit. 

Progressive web apps are much simpler to develop and use than other web or native solutions. For instance, since they can be installed from the browser, there is no need to submit them to the App Store or Google Play.

PWAs are universal — they are compatible with all devices on all operating systems if accessed through a standards-compliant browser.

If the network connection is unstable or absent, PWAs use cached data from previous sessions to ensure perfect and uninterrupted performance. The users will be able to access your app from basically anywhere.

Progressive web apps provide an excellent user experience due to their simplicity and speed, combined with all the necessary features of native solutions. Similarly to a native mobile app, a user can open the PWA by clicking the icon on the home screen. Moreover, unlike in native apps, updates are downloaded in the background.

While PWAs have no direct impact on SEO results, a properly developed PWA has the potential to decrease the bounce rate and to improve retention rates and the overall SEO performance of your web page.

Below are the steps for creating PWA

Step 1: Add a progressive web app manifest 

Let’s start with what a web app manifest is. It is a JSON file, which tells the browser about your PWA and its expected behavior when installed on the user’s desktop or mobile device. A web app manifest file should contain the name of the app, the icon to appear on the home screen, and the link that should be opened with the application launch. Such browsers as Google Chrome, Microsoft Edge, Firefox, Opera, and the Samsung browser support manifests, whereas Safari offers only partial support.

{

  "short_name": "KeenEthics",

  "name": "KeenEthics",

  "description": "Be Keen. Follow Ethics",

  "icons": [

    {

      "src": "/images/icons-192.png",

      "type": "image/png",

      "sizes": "192x192"

    },

    {

      "src": "/images/icons-512.png",

      "type": "image/png",

      "sizes": "512x512"

    }

  ],

  "start_url": "/?source=pwa",

  "background_color": "#12233d",

  "display": "standalone",

  "scope": "/",

  "theme_color": "#12233d",

}

After you have created the manifest, add it to your app. To do so, add a <link> tag to every page of your PWA. For instance:

<linkrel=”manifest” href=”/manifest.webmanifest” >

Step 2: Add service workers  

The service worker is a JavaScript file, which runs separately from the main browser thread, intercepts network requests, caches data, retrieves data from the cache, and delivers push messages. Service workers let PWAs control network requests, cache these requests to boost performance, and ensure access to the cached content offline. Also, they can get push messages from a server even if the app is not open, and thus, they can send push notifications to the user similarly to what a native app can do.

To ensure offline app performance, service workers depend on two APIs: Fetch and Cache. Fetch API is used to intercept network requests and modify the response, as well as to serve resources from the cache when the network connection is absent. Cache API is independent of the browser cache.

A few more technical nuances associated with service workers:

To avoid “man-in-the-middle” attacks, service workers run only over HTTPS. 

A service worker cannot access DOM directly, so it uses postMessage() to communicate with the page.

Service workers cannot use synchronous XHR and localStorage.

Step 3: Test your PWA

After you set up everything, it is time to check if your application adheres to the standards of PWA. There is an official tool for that provided by Google, called Lighthouse. 

The process of React progressive web app development consists of the following steps:

1) Adding a PWA manifest

2) Adding service workers, deciding on what should be cached and at which point

3) Testing your PWA with Lighthouse

references:

https://keenethics.com/blog/react-pwa-tutorial