Before stepping into the actual concept of PWA, we need to be familiar with other approaches and why such pattern has been introduced and widely used?
1.Native SDK (Software Development Kits) helps to create applications and experience the same on devices (such as Android,iOS..etc)
2.Hybrid application development uses the Native SDK's as well as Web, Web API's to create the applications and the best experience on the platforms to be built.
3.Web Development helps to create web applications which usually render on browser as well as runs on specific platforms as it is designed to build.
It will be cumbersome for developers to code for all the platforms and to get the same seamless best experience where the end user is trying to access the application.
PWA in this picture helps to reduce the time,effort for developers by writing only one or common codebase for all the platforms to achieve the best Web as well as Native experience!
Following this approach it is easy to : ->Discover on the web using SEO approaches..
->Easy to deploy on the server!
->Easy to update
->All you need to be familiar is with the common web standards & web tools.
pwa vs native
Common features Web vs Native :
Web:
Links and discoverability.
easy to update to server.
Easy to deploy!
web standards and web tools.Native:
Offline access
Push notifications.
Installed icon and standalone
performance and UX
Q.What is PWA?
A. PWA(Progressive Web App) is just a design pattern,where main objective is to work or function on any platform (where the device is able to run a browser mobile,desktop..) developed by Google . Built using common Web technologies such as HTML,CSS,JavaScript.
Q.What are the main components of PWA?
A.Three main components of PWA:
1)Web app (html, CSS, JS)
2)Service worker (key component)- brain of a PWA.
3)Distribution model on web i.e., Web app manifest- is w3c spec followed, A JSON file attached to your web app, defines meta data for app installation such as name, icon, theme color.
Q.How do you know if a URL is currently a PWA?
A.The easiest way to use today is lighthouse, this is also available as CLI – NPM, within also in web Dev Tools
- PWA Installability criteria:
Checks – App meta data is present
Service worker is installed (Secured connection) by HTTP or TLS
Checks if the app is able to work offline/not without connection
Checks the app performance
Q.What if it an application developed has passed the criteria?
A.If it passes the criteria :
- Its officially a PWA Installation will be possible A hint for the user may appear that this app has passed the criteria. Helps with the SEO standards and discoverability features.
- Progressive experience: Reacts to different environments such as– 2g, 3g, high-end, low-end/feature phone devices Offering a good possible experience to all users within the network bandwidth and hardware supported to the devices.
Same code delivering different levels of quality (based on context and environment)
Uses API's to detect environment and act in consequence, screen latency, network related!
- Progressive features : Basic web content Add installation Add service worker Add hardware usage
This article was part-1 in brief.
Thanks a lot for reading!
Please kindly follow this link for part 2 ! :
https://dev.to/sudhirdontha/pwa-in-brief-part-2-8c5
(or)
https://sudhirdontha.hashnode.dev/pwa-in-brief-part-2
Top comments (2)
Thanks for sharing this comprehensive explanation of what is a progressive web app, its features, and its benefits. It's a great resource to gain a deeper understanding of what a progressive web app entails. If you're looking to learn more about PWAs, I recommend giving it a read.
Thanks a lot for your review! And sorry for the delay in responding to your comment :)