The first Web Applications consisted of server-side scripts (usually Perl and other scripting languages) triggered by submitting an online HTML form.
Web Browsers were confined to just rendering HTML text. Today, applications consist of many interconnected software components running both server-side and client-side.
Browsers evolved into fully-featured software clients, capable of rendering online content and allowing instantaneous user experience. Progressive Web Applications, or PWAs, are one of the most recent steps in this evolution.
While there isn't an authoritative, concise definition of PWAs, the term applies to apps that can leverage modern features of browsers while still being functional for outdated clients, allow them to be installed, and are mostly network-independent.
This article will dive further into PWAs and why companies should consider adopting this app development paradigm.
Main characteristics of a Progressive Web App
The term "progressive" is used in PWAs to denote how their functionality can increment at predefined steps between legacy and newer web browsers. In other words, a PWA can run as a simple web app in an older browser while leveraging modern APIs in current browsers, such as service workers.
In a more general way, building a PWAs usually means the app at least runs securely over TLS, uses service workers, and provides a manifest for browsers to interpret. In practice, many other characteristics are associated with PWAs, which include:
- Connection independence: by using service workers and other means, the app can work offline and reconnect when the network is available
- Responsive UI design: PWAs adapt to multiple screen form factors, such as tablets, smartphones, and desktop devices.
- Native app UX: while not native applications, their user experience (UX) is usually comparable and sometimes even indistinguishable from a native program. PWAs usually keep their UIs up-to-date by using service workers too.
- Installable: a user can install PWAs to the underlying device, whether a desktop computer or a smartphone. Browsers offer the user to install apps in the form of shortcut icons to the app URL. This can also allow the app privileged access to the device, improving an app-like experience.
- Linkable: apps can be found via search engines and shared on social platforms using a simple URL. This eliminates the need for app stores to list the app and enables users to send apps to each other directly.
Among the many other vital aspects of PWAs, three foundational features are worth mentioning.
A Progressive Web App aims for high reliability, extended capabilities, and a seamless installation experience.
PWAs that score higher on these three fields will achieve a near-native code user experience.
PWAs and Reliability
One of the most common reliability issues a mobile application faces is the loss of network connectivity. Traditional web pages cease to exist in the absence of a network connection. PWAs strive to be dependable and robust even in connectivity failures.
Nowadays, users expect their work to be preserved offline while using the app naturally. It is expected that PWAs solve data synchronization issues in the background while allowing the user to continue using the app.
If a user's action exclusively depends on network availability, it is good to let the user know instead of hanging or failing mysteriously.
Another aspect of reliability is speed. Several articles and studies correlate response speed with conversion rates. This article by Greg Linden about his experience at Amazon in 2006 was one of the first references to this issue. Back in 2006, web performance only considered page load.
With current technology, including a heavy load of client-side javascript, service workers, and other browser-side APIs, measuring and optimizing performance is a little more complex. Besides page load times, page responsiveness generally affects overall performance.
Smoothness in animations, scrolling effects, and a clear indication of whether a user action was correctly registered or not are a must. Another e-commerce giant, eBay, made performance (precisely speed) a company-wide objective for 2019.
In this 2020 article, they share their successful experience in tackling speed issues that negatively affected user experience and how they increased the percentage of add-to-cart events.
A PWA can actively manage cached resources by using a service worker rather than the default passive approach of standard web apps.
A service worker can also perform prefetching of resources, which may enable PWAs to continue functioning even if network connectivity is lost.
PWAs distinct Capabilities
Traditionally, features like geolocalization, push notifications, access to hardware devices, local persistence, among many others, were reserved for native apps (whether an executable program for a desktop computer or a mobile app downloaded from an app store).
Nowadays, web applications in general, and PWAs in particular, are capable of these features.
Recent versions of the most popular web browsers like Chrome, Firefox, and even Edge, re-written based on Chromium, enable next-level PWAs.
Current web applications can run real-time video conferences, virtual environments with WebGL, augmented and virtual reality experiences, and portable binary code with WebAssembly.
Once reserved only for highly advanced native programs, all these capabilities are available as linkable and installable applications through the Web.
PWAs discovery and installation experience
Progressive Web Apps are installable, which means they become available through a Desktop or Home icon, much like any other native app or program.
Even though they run inside a browser, the user experience can happen in a standalone window. They integrate into the device application launcher completely.
PWAs can use their metadata to ask the OS to register them as handlers for specific content types.
This means the OS can launch a Progressive Web App to process a downloaded document or other types of user-provided data.
The business impact of Progressive Web Apps
PWAs are described mainly by their technical attributes. However, their adoption by companies impacts their businesses dramatically.
Aspects such as distribution strategy, time-to-market, and user engagement, to name a few, can be significantly affected by the implementation and adoption of a PWA-centric strategy.
Business impact on application distribution
A new phenomenon called "App Fatigue" or "Application Installation Fatigue" consists of users not wanting to install new apps on their devices. Comscore estimated that the average number of apps installed per month by a user is close to zero.
Many theories explain this behavior, from user interfaces being perceived as "vintage" to users becoming more selective about the storage space in their devices, security and permissions concerns, and others. Regardless of the root cause, businesses are starting to look for ways to circumvent this phenomenon.
Native apps present considerable friction in distribution. Native apps have to be approved by the app stores, share their revenue, and keep up with the ever-changing store policies.
On the contrary, PWAs distribution is trivial; they are publically available websites that users can discover using search engines and share their URLs without restriction.
If a PWA rolls out an update, users can experience a newer version immediately.
There is no formal review process bottleneck by any app store.
Impact of PWAs on time-to-market
PWAs almost always separate the frontend from backend architecture. This allows different front ends to connect to the available backend APIs, which translates to more end-user options.
Moreover, some companies open their APIs using some form of open-source licensing and allow users and even other businesses to connect to their APIs to create new user experiences.
This architectural pattern also usually translates to faster development cycles.
How PWAs can improve operational costs
Traditionally, a company would build a web application in the form of a standard website and one native app for each platform (namely Android and iOS).
The overall development cost of these products is higher than developing just one powerful PWAs.
A PWA is responsive (adapts itself and works on many different screen form factors) and progressive because it runs on many different types and generations of devices.
This directly translates to a smaller bug fixing and maintenance budget. A PWA-centric strategy produces lifetime operational costs-savings when compared to building and maintaining several products for each platform.
With Progressive Web Apps, companies can give users reliable and capable experiences while efficiently allocating development costs.
Customer engagement in Progressive Web Apps
Online businesses in general, and e-commerce and SaaS platforms in particular, usually consider a customer lifetime value or LTV. To improve LTV, having the ability to re-engage customers is crucial.
Traditional websites lack sufficient tools for re-engagement, but PWAs can resort to many native-like resources such as push notifications, OS integration, and others.
With these tools, PWAs are a better platform to implement an aggressive online marketing strategy that allows them to gain, regain and maintain customers along their lifecycle.
Typical implementation includes push notifications for special sales and offers, shopping cart recovery, retargeting, and similar product discovery, to name a few.
To summarize
While not officially defined anywhere, the term "progressive" in Progressive Web Applications refers to responsive websites that can run in several device generations.
There are many typical PWA characteristics: their installability, responsiveness, and resiliency to network issues are the most relevant.
By leveraging these characteristics, PWAs are a more efficient way of building apps and a better business platform for improving customers' lifetime value while avoiding some of the pitfalls of traditional native apps development.
Also we wanted to state that Devlane keeps growing in the region and lately we've been named as one of the most relevant Laravel Developers in the world, you can check it out at TopDevelopers
If your business is considering switching from traditional Web and native app development to PWA, or anything related to Mobile & Web development, drop us a line!
