Progressive Web App (PWA)

0
6
Progressive Web App (PWA)

Oveview Progressive Web App (PWA)

  • What is a Progressive Web App (PWA)?
  • PWA features
  • Technical components of a PWA
  • What’s the difference between web app, SPA and PWA?

What is a Progressive Web App (PWA)?

  • This is an application which behaves like a native application and developed using modern web technologies
  • This application supports offline features (using service worker & web app manifest) when no internet connection and are extremely fast & engaging
  • Fast: Respond quickly to user interactions with silky smooth animations
  • Engaging: Feel like a natural app on the device, with an immersive user experience
  • Commonly used technologies to develop PWA are Angular, React, Vue..

PWA features

  • Responsive
  • Push notification
  • Offline support
  • Fast and efficient
  • Not served through app store
  • Relatively cheaper than developing native apps
  • Does not require installation

pwa

Technical components of a PWA

PWA has some important technical components which work together and energizes the regular web app. The following components are required to develop a good PWA

pwa

Service Worker

  • Our web apps talk to the network directly and if there is no network, the screen shows the famous dinosaur.
  • Here is an opportunity to optimize this process. For the first-time load, the service worker stores the required resources in the browser cache. And when the user visits the app next time, the service workers check the cache and returns the response to the user before even checking the network.
  • Service worker is a component of JavaScript code which works as a proxy between the browser and the network. A Service worker manages the push notifications and helps to build the offline first web application using the browser’s cache API.

service

Manifest.jso

  • The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme. The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme.

HTTPS

Service workers have the ability to intercept the network requests and can modify the responses. Service workers perform all the actions on the client side. Hence, PWA requires secure protocol HTTPS.

You can read more here