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..
- Push notification
- Offline support
- Fast and efficient
- Not served through app store
- Relatively cheaper than developing native apps
- Does not require installation
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
- 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.
- 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.
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.