In an increasingly mobile-first world, optimizing the time to access our content and the user experience for our users can be the success of our business.
However, native mobile apps can be expensive to develop, require downloads from app stores, and take up valuable storage space on phones. This is where Progressive Web Apps (PWAs) shine - offering a powerful and user-friendly alternative.
This article cuts through the technical jargon to focus on the big picture.
Do you wish to learn all the secrets behind PWAs?
Check my PWA course teaching you in detail how to develop and optimize PWAs with ease.
What are Progressive Web Apps (PWAs)?
A PWA is a web application that, thanks to modern technologies, can provide extended and rich features to users.
Below is a screenshot of the Twitter/X native app for Android and its PWA version. Once a PWA is installed on a device, it is almost impossible to distinguish it from a native app.
One of the goals of Progressive Web Apps is exactly to combine the accessibility and discoverability of a website with the functionality and user experience (UX) of a native app. Our customers can access the PWA directly from their web browser, without any download required from an app store.
PWAs Core Parts
Two key components can make PWAs installable and working offline: the web manifest file and service workers.
Web Manifest
A web manifest file can be seen as a blueprint for our PWA.
It instructs the browser agent that our PWA can be installed on the home screen, just like a native app. An install banner (named A2HS - Add To Home Screen) is automatically displayed on the user's device. It also specifies essential visual details like the app's name, icon, and if we want to display the application in portrait (vertical) or landscape (horizontal) mode. The latter is the preferred option for media-rich content or web games.
Thanks to the display property of the manifest file we can instruct whether the browser's UI elements (e.g. URL address bar) should be rendered or less.
Three main values are possible (in the pictures below from left to right respectively):
- browser (default mobile experience)
- standalone
- fullscreen
As we can see, with these properties it is possible to remove some UI elements of the browser or even use the whole device's viewport. All these aspects help to create a familiar and app-like feel.
Service Workers
Let's delve into the engine that powers offline functionality and allows for drastic performance improvements – service workers (SW). These are essentially scripts that run in the background, separate from your PWA's main thread, and can offload our application from heavy tasks.
They act as intermediaries between the app and the network, offering several advantages:
Caching: Service workers can intelligently cache essential static resources like HTML pages, JS or CSS files, and HTTP responses as well. This means that when a user visits our PWA, even without an internet connection, the cached resources can be used to deliver a functional, albeit potentially limited, experience.
Improved Performance: This aspect relates tightly to the previous point. Responses from the local cache are provided almost instantaneously since no network roundtrip is needed. We can implement multiple caching strategies to cover wide scenarios and ensure that, if needed, the provided cached data is not stale but in an up-to-date state.
Push Notifications: SW enables push notifications, a powerful tool for keeping users engaged. Web notifications were for a long time precluded to iOS devices, but since v16.4 are now available for Apple users as well).
Even when the PWA is not actively running, service workers can receive and display notifications, prompting users to revisit your app. This is possible because Service workers run in the background and, therefore do not require the user to be actively on the PWA to perform actions.
Background Syncing: This web API allows to register actions (sync tags) that, in case the user does not have a valid internet connection, will be kept on hold for later execution.
Once the user regains internet connectivity, service workers are notified by the API and seamlessly synchronize any offline actions taken within the PWA.
Imagine we are building an e-commerce website where users can add items to their cart and submit orders. A user adds items to their cart and proceeds to checkout. While filling out the order form, the user's internet connection drops (maybe because of commuting from/to work). Without Background Sync API, the user would lose their order progress, leading to frustration and a new order for our company. This combination of web APIs and service workers ensures data consistency and a smooth user experience in these scenarios.
Benefits of Native Apps
PWAs offer a multitude of advantages over traditional mobile apps, making them a compelling option for businesses of all sizes:
Reduced Development Costs: PWAs leverage existing web development technologies, making them significantly cheaper and faster to develop than native apps. There is no need to have dedicated developer teams to create iOS or Android apps. This translates into substantial cost savings for your business.
Reduced Time To Market: PWAs bypass the app store approval process, avoiding potential delays in the release date due to the restrictions or controls imposed by app stores.
Extended Functionalities: Thanks to Web APIs, all web apps, PWAs included, can benefit from new and modern features out of the box. For instance, we can interact with the hardware of the hosting mobile phone to detect the amount of light in the surroundings. This allows the development of smart capabilities and switching automatically from a light to a dark theme if the user is in a room with insufficient light. The native app Google Maps has the same behavior, switching to the dark mode when we cross a tunnel while driving, for instance.
Improved Conversion Rates: By providing a seamless, app-like experience, PWAs can significantly improve conversion rates, leading to more sales and increased revenue for your business. The website PWA Stats collects several success stories of companies that adopted PWAs.
Search Engine Optimization (SEO) Friendly: PWAs are indexed by search engines like websites, making it easier for potential customers to discover our business online.
Easy to Maintain: Updates to PWAs happen automatically in the background, ensuring users always have access to the latest features and bug fixes without the need to download a new patched version. Differently from a native app, PWAs have only one version live to be maintained.
Small Memory Footprint: PWAs do not come with 3rd party libraries as native apps and, therefore require much less space on the hosting device. This can be a crucial aspect for our business if a portion of our user base does not have modern devices or the cost for mobile data is significantly high in their country.
Conclusion
In conclusion, opting for a progressive web app over a native app can represent a strategic advantage for our business.
PWAs offer a user experience that rivals native apps, reaching a wider audience without the burden of individual app store downloads for a fraction of the development costs. This streamlined approach translates to broader customer accessibility and increased engagement, ultimately driving growth for our company.
Top comments (0)