What is a Progressive Web App (PWA)?
PWA is a progressive web app and it combines the features of an app with the technology of the web.
You can say they are apps built with web technologies but feel and function like native apps.
Introduction to PWA
Web applications were seemingly becoming limited as most people preferred building mobile apps that users could keep on their phones to building web apps because you have to keep going to the browser.
However, with the advent of PWA, this has not been covered but there is a lot of progress with this.
Web technologies I mean HTML, CSS, JavaScript.
PWA’s can be installed on your home screen, they can work offline from where you last left and offer a comparable experience and feature to their native apps.
It is expected that your PWA will be responsive. You do not want to build a web application that is not responsive on certain devices.
Although, you can install PWA’s via download stores, the easiest and first way is via the browser install above.
PWA
Since it provides a platform-specific user experience,
It is easy to access as they are on your home screen and easy to find.
They can be accessed offline
Difference between PWA and website
Websites are more of a visiting area, not an ownership zoon. You can not say I have a website but you can say I have an app.
PWA gives you that experience even though it is a converted website.
PWA can be installed from the platform’s app store or installed directly from the web.
PWA can be installed like a platform-specific app and can customize the install process.
PWA once installed, gets an app icon on the device alongside platform-specific apps.
Once installed the PWA can be launched as a standalone app, rather than a website in a browser.
PWAs can operate in the background and offline. Unlike a normal website that is only active while the page is loaded in the browser.
PWA can update content in the background, respond to push notifications from the server, and work while the device does not have network connectivity.
Display notifications using the OS notifications system
PWAs can be integrated into the device, registering as share targets and sources and accessing device features.
PWA can use the whole screen rather than running in the browser UI.
How to Build PWAs
A PWA is made up of:
- Manifest.json
- Service worker
- Offline HTML page(not compulsory and is used when there is no internet)
- Application shell Structure
Manifest.json
It is also used to build Chrome browser extensions. It helps to display the application as an app on your home screen.
The web app manifest is a JSON file that defines how the PWA should be treated as an installed application, including the look and feel and basic behavior within the operating system.
It tells the browser how you want your web content to display as an app in the operating system. The manifest can include basic information such as the app’s name, icon, and theme color, advanced preferences such as desired orientation and app shortcuts; and catalog metadata, such as screenshots. The manifest.json is the only file that every extension using web extension APIs must contain.
Service worker
It helps with caching. To save the data and be able to use it later.
They can improve the performance and capabilities of your web pages in PWA as they reduce loading times and bandwidth usage by caching static assets such as HTML, CSS, JavaScript, Images, and fonts.
They offer offline capabilities, handle notifications, or perform heavy calculations, and can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely.
Fast loading, push notifications, offline access
Companies that have launched progressive web apps have seen
Companies that have launched progressive web apps have seen impressive results. Eg, Twitter saw a 65% increase in pages per session, 75% more tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWa, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced its platform-specific desktop experience with a progressive web app and a 27% increase in return visits.
Difference between PWA and Webapps
Installation:
You can install a PWA on your device be it desktop or mobile. However, a web app is designed to run inside of a web browser and can not be installed on a device. Hence, it is preferable for users to consider this aspect.
App-like Experience:
Although a progressive web app uses similar technologies as used by web apps like HTML, CSS, JavaScript, etc. It provides the user experience of a native app. Also, unlike web apps, a PWA can use the majority of device features like push notifications regardless of the web browser used. It offers so an integrated and seamless experience that differentiating between a PWA and a native app becomes very tough.
Ease of Access:
PWAs are lightweight because they take very little space that goes up to a few KBs compared to their native counterparts. You can not install a web app but access it through a web browser. After installing a PWA, users can easily access it from the home screen or app drawer where the app icon will appear just like native apps. Also One can share a PWA to allow others to install the app. So it reduces the steps to install the app.
Faster User Experience:
Progressive web apps can cache data that serves users with images, texts, and other content before the whole app loads completely. It cuts down the waiting time for users which improves the retention rate and user engagement. It adds value to your business.
More user engagement:
One key benefit of PWAs is that they can use push notifications and many other device features that allow businesses to increase user engagement. With the use of push notifications, businesses can notify users about their offers, deals, and services to keep them engaged with your brand.
Real-Time Data Access:
Another advantage of progressive web apps is that they always remain fresh. This is because these apps are updated on their own when there are some changes. A web app is a website itself si it is also updated automatically However being an advanced version of a web app a PWA has an edge.
Difference between a Native App( mobile app) and a PWA
Development cost:
PWAs are less expensive than native apps and the development time is relatively shorter.
User experience:
Native apps offer a more polished and refined user experience than PWAs. Native apps are designed to take advantage of the hardware and software capabilities of the device, providing a seamless and responsive experience to users.
Accessibility:
PWAs are more accessible than native apps as they can be accessed on any device with a web browser. Native apps are limited to particular platforms.
Maintenance and updates:
Maintaining and updating a PWA is generally easier than a native app. With PWAs, updates can be made on the server side, and users can access the latest version of the app without needing to download and install anything
Benefits of Developing a Progressive Web App
Low Development Cost:
The cost of developing a PWA is much lower than any native app or web app.
Discoverable
PWAs work with web browsers and they are discoverable on search engines that bring an opportunity for you to optimize them for search engines. You can take advantage of SEO to improve its ranking and get more users to boost sales
Cross-platform function
PWAs are both cross-platform and cross-browser compatible as they can function with every device and web browser.
*Offline Usage *
Due to the caching, a PWA can store data on a device that allows users to access content even without an internet connection. So PWas work offline.
Security
PWAs are secure, fast user-friendly, and feature-rich web solutions to maximize your revenue.
How it can improve the e-commerce shopping experience
Login via social accounts
Push notification alerts
Simplify Payment Processing
Shopping with no internet
Track unique analytics
Still considering building PWAs?
Follow me on Twitter Handle: https://twitter.com/mchelleOkonicha
Follow me on LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/
Follow me on Instagram: https://www.instagram.com/michelle_okonicha/
Top comments (21)
This is, hands-down, one of the most incredible introductory write-ups I have ever seen.
You cover what a PWA is, you briefly touch on comparisons to other approach, you discuss what the basics of the tech stack here are, and most of all you help the reader understand why they should want to explore the idea further.
This article is very well done.
Thank you so much.
There would be more on PWA subsequently.
I can't wait to read it.
great
Good arguments for PWA here, the big drawback here is users trust apps from the big stores like Goog Play and Apple, seems things are improving for PWA here with some tools to help like Bubblewrap, I am not sure what limitations you run into using these tools.
So progressive web apps are progressive. This means there are always improvements to make it more user-friendly and mobile-like.
Yes, you can host your PWA on the Google store and Apple store.
A lot of limitations that were previously available for PWAs are becoming improvements.
I also know in a few years, more APIs, and advancements would come up to further enhance PWA.
You can also convert your PWA to various APKs with no effects.
What are some popular frameworks or tools for building PWAs using JavaScript?
Are there specific considerations for choosing a framework or tool when developing PWAs?
Angular, react, vue.
These are a few frameworks you can make use of while building PWAs.
Yes, one of the requirements of a PWA is the application shell architecture.
these standards ensure that your PWA is well structured for better loading time and user experience.
It also helps you structure your PWA project properly.
Quasar
Your guide on how to get started with progressive web apps was really helpful, especially your explanation of what is a PWA. It's great to see practical steps laid out clearly for beginners looking to dive into this technology.
I am glad you got value for this and thank you for sharing.
Very nice
thank you .
Since I built my first PWA I have always been bewildered why PWAs have so little popularity. May be your post will promote this technique. Thank you.
I am hopeful as well. Thank you.
i was learning react js for pwa and this article pushed me more.Great one so far !!
Amazing. I am glad to learn you'd build further.
sites.google.com/view/hollywood-mo...
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more