Make your React Application more awesome

What is a Progressive web app?

Web applications can reach anyone, anywhere, on any device with a single codebase. Native applications, are known for being incredibly rich and reliable. Now PWA is the best of two worlds. Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and install ability while reaching anyone, anywhere, on any device with a single codebase.

Why PWA ?

Converting a web app to PWA gives it the power of native app experience. Now what do we actually mean by native app experience …?

1. Offline work mode
2. Enables Push notifications
3. Full responsiveness and browser compatibility
4. Self-updates
5. Connectivity independence

How to convert a web app to pwa ?

It’s as simple as that. First we need to create manifest.json, which is just like a configuration file for your web app.

manifest.json

{
  "short_name": "...",
  "name": ".....",
  "icons": [
    {
      "src": "logo64.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#17202a",
  "background_color": "#17202a"
}

Here theme color and background color are the color which appears as flash on opening the web app. The standalone display gives a native app look, it opens in full screen like an app. These are some the most important properties of manifest file.

The most important part of a pwa is a serviceWorker

Now what is a serviceWorker !!

A service worker is a background worker that acts as a programmable proxy, allowing us to control what happens on a request-by-request basis.

This basically means that a sw is a script (A JavaScript file) that runs in background and assists in offline first web application development.

Basic structure of pwa

ServiceWorker is the intermediate between network and application. A sw need to be registered for a web application in order to function offline and enable push notifications. It converts the data into cache so that it need not reload the whole data on every visit. The offline mode is also enabled in such manner.

#react #pwa #web-development #developer