Ever wondered why brands, despite developing an app, still maintain a website? Or vice versa? It’s simple, brands look to make themselves more visible and increase customer interaction on all fronts. Along with an increase in interactive fronts, brands are also looking to improve on the experience customers have from the very moment they click on the webpage link. One factor that decides the rate of interaction or visibility is the webpage load time. Long load times often end up with users getting impatient and leaving the site, resulting in a huge loss for the brand as the customer most likely won’t come back to that website.
The problem of load times was solved with the advent of mobile apps, which have a much smoother interface and, definitely, much quicker load times. Despite apps significantly reducing load times, brands encountered yet another hurdle with many people not wanting to go through the hassle of having to download and install an app. The direct solution for this was to decrease webpage load time so that people do not quit on the brand altogether. The solution presented itself in the form of a progressive web app (PWA).
Progressive web apps are much like an app in many ways but still maintain their status as a webpage. PWAs have tremendously reduced webpage load times, have a much smoother interface as compared to traditional websites, and also possess features that websites do not. The look and feel of progressive web apps are identical to that of a mobile application, to the extent that they even give users the option to add themselves to the mobile device’s homepage. In simple terms, a PWA is a combination of the best of mobile applications and websites.
The term ‘progressive web apps’ was coined by Alex Russell, who says that PWAs are, “websites that took all the right vitamins.” PWAs have been defined differently by people, groups, and organizations.
According to a simplistic definition by web developer and author, Jeremy Keith,
However, just one definition does not suffice and fulfill the true measure of a PWA. According to Google’s developer site, PWAs are defined using adjectives such as ‘reliable,’ ‘fast,’ and ‘engaging.’ These definitions are more suited for marketers rather than developers. In another instance, Mozilla’s Developer Network’s progressive web app section states, “Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.”
Jeremy Keith manages to bring the criteria for a website to qualify as a PWA under the following three baseline criteria:
Progressive Web Apps are cross-platform hybrid web-app ecosystems that comprise faster load times, smoother user interface, with increased engagement and enhanced user experience. PWAs use service workers and a web manifest file to enable push notifications and homepage addition on mobile devices.
How Do PWAs Work
A progressive web application (PWA) is a software application written in the Web platform, uses a browser to run, and behaves like a cloud-delivered traditional, native app. Due to the app-like structuring, a PWA installs and runs code on the user’s device with faster speeds and abilities than normal webpages. It is considered a website as it is written in the coding languages of the Web, i.e. HTML, CSS, and JavaScript. As for the ‘progressive’ part, it lazy-loads itself along with relevant data and assets as the user browses different parts of a brand’s website.
Progressive web apps keep the web’s ask-when-required permission model and also add new features such as being top-level in the task switcher, on the homepage, and in the notification tray. Users are not subjected to signing up for something dangerous by clicking on a link as sites that want to send notifications or add themselves to the homepage need to earn that right over time. Therefore, progressively becoming ‘apps.’ Essentially, progressive web apps deliver a much better user experience than traditional web apps, which makes it worth building websites this way.
What Makes a Good PWA
Although there is no specific set description for a progressive web app, there are a few attributes that make a good PWA. The attributes defined by Alex Russell are as follows:
PWA Use Cases
An important question arises in the minds of the marketing and other related teams as to whether they need to opt for a progressive web app or not. Brands make use of native apps in cases where they expect users to return frequently, and PWAs are no different. Before making a decision, brands must identify their users and important user actions. As the name suggests, a web application must be progressive and work in all browsers, with the experience improving with each time that the browser is updated with advanced features and APIs.
PWAs enforce the betterment of user experience compared to traditional websites; however, developers may have to choose which functions are to be supported offline, and also facilitate navigation (this is specific to standalone modes, wherein the user is not granted access to a ‘back’ button). If a brand’s website already has an interface similar to that of an app, applying PWA concepts will further enhance the website.
In the case of the need for the addition of certain features that are not yet available but required for critical user actions, native mobile apps prove to be a better option. Native mobile apps guarantee the same experience for all users as PWAs.
PWAs VS Apps in Terms of Associated Costs
Take a quick peek at the revenues of some of the top mobile applications, and many would want to foray into developing an app the very same day. While it’s great to look at these figures, the hidden costs of building and maintenance of mobile apps are equally disappointing. When the actual costs are revealed, it dawns on us that these apps aren’t such a smart investment for most anymore. This is why marketers and brands need to give PWAs some serious consideration.
One of the first things marketers and brands need to think about when choosing between a mobile app and a PWA is app monetization. While popularity gets a brand’s customers, it certainly does not ensure profit. No matter how popular a mobile application may be, it’s really difficult to profit from it. ‘Difficult,’ here, does not mean ‘impossible,’ and many apps do make a ton of money. However, simply making money does not equate to the smartest option a brand can choose.
If a brand carefully looks at the bigger picture, the details portray that PWAs possess a greater opportunity to cash in on and, also, profit from. The criteria that prove PWAs to be more cost-effective than mobile apps are as follows:
-
Building Costs
Whether it is a mobile application or a progressive web app, building an app is no easy task. PWAs are significantly cheaper as compared to traditional mobile applications. In cases where the build pricing for both is comparable, PWAs take much lesser time to develop. Mobile apps will take longer to develop in each case as every store that the app is to be put in necessitates the development of a separate app.
-
Maintenance Costs
Any software requires maintenance and upgrades. This is mainly because users look for new designs and new content. Another key reason for the maintenance is the need to free the software of any glitches, security bugs, and performance improvement. The way of maintaining and managing apps and PWAs, however, is completely different.
In the case of mobile apps, brands are given update and maintenance estimates that are around 20% of the total initial fee that they paid for app development. Also, these updates take time for the app stores to review changes to the software that the brand is looking to implement.
PWAs, on the other hand, are much easier to maintain and upgrade as they are web-based applications. Most of the maintenance and upgrades are managed by the brand themselves. Progressive web app updates can directly be published onto the site without the need for any app store-like approval.
-
User Acquisition Costs
Once brands get an estimate of the development costs of an app, the next factor to look out for is the cost of acquisition of each user. This is where PWAs excel and pull far ahead of mobile applications.
To acquire users for a mobile app, brands must accomplish the following:
-
-
- Gain app Store Membership
- Detailed Market Testing
- Choose an Acquisition Model
- Optimization to App Store
- Build a Website
- Paid Publicity
- Retention Rate Optimization
-
To acquire users for a PWA, brands must accomplish the following:
-
-
- Search Engine Optimization
- Paid Promotion
- Provide the ‘Add To Home Screen’ Button
-
-
Monetization Costs
Why would a brand incur costs for monetization? Well, in the case of mobile applications, monetization does come at a price. A few mobile app monetization types that brands make use of are as follows:
-
-
- Paid Apps
- Freemium Apps
- In-App Purchase Apps
- Sponsored Content Apps
- Ad-Free Apps
- eCommerce Apps
- Free Apps
-
The variety of monetization types is great, however, there are two major points to note: One, app stores take a portion of the money a brand earns via the app (30%). Second, app stores don’t pay brands right away. Plus, app stores have necessitated a minimum threshold that apps must generate. If the app doesn’t generate that amount, brands have to wait even longer to be paid.
Examples of Successful PWA Implementations
-
AliExpress
Owned by the Alibaba Group, AliExpress is a popular e-commerce site that recently converted its mobile site into a progressive web app. It decided to invest in a cross-browser PWA, which significantly improved user experience and overall website performance.
Image as seen on Website
AliExpress noted a 104% increase in conversions for new users, with 2x more pages visited per session, and a 74% increase in the time spent per session.
-
Flipkart
India’s largest e-commerce site, Flipkart, recently updated its mobile site to a PWA known as Flipkart Lite. This came after Flipkart shut down its website and had an app-only approach, which led to a loss of users. Flipkart Lite is fast and delivers streamlined experiences to its mobile application users.
Image as seen on Website
Flipkart Lite saw a 70% increase in conversions, a 40% higher re-engagement, 3x more time spent on the website, and 3x lesser data utilization.
-
Forbes
Forbes, a top U.S. business magazine, publishes articles on marketing, finance, investment, and industry topics. Forbes recently developed a progressive web app to improve user experience on its mobile web.
Image as seen on Website
The PWA decreased webpage load times, increased engagement rates two-fold through push notifications and the option to add the Forbes PWA to the home screen, noted a 43% increase in sessions per user, 20% increase in impressions per page, 100% increase in engagement rates, and a 6% increase in the number of readers completing articles.
Common PWA Challenges Marketers Face
Nothing is perfect, and PWAs are no different. While PWAs offer a familiar UI and numerous advantages over mobile apps and traditional websites, there are significant backend differences that could potentially affect developers and marketers. Three potential problem areas for marketers could be as follows:
-
Analytics Tracking
To effectively market their products/ services, marketers need to know the intricate details of the likes and dislikes and more of their potential customers, which necessitates analytics tracking. The challenge for marketers utilizing PWAs is tracking while customers make use of the progressive web app offline. Since a progressive web app is a hybrid web-app ecosystem, data tracking is somewhat tricky.
Analytics requires an internet connection to work and collect user data. However, fortunately for marketers, there is a workaround. Marketers must make use of the Fetch API to be able to listen and respond to offline requests. The service worker comes into play here and intercepts requests to Google Analytics. A tip for marketers would be to differentiate the requests according to their origin, i.e. offline and online requests. This is all possible through adjustments and variations in the tracking code, analytics property, and a Workbox configuration. Marketers need to make the most of the resources they have and make sure their PWA works efficiently.
-
App Store Presence
While a PWA is a cost-effective option that also increases company profits, many users and customers expect brands to have an app. This is a problem for brands that want to have an app store presence as well and results in these brands having to spend more.
Google has recently allowed the addition of PWAs in the Google Play Store, which increases discoverability from the customer’s perspective and also simplifies the process for the app owners. Marketers may think of this as an easy fix, however, the challenge for marketers is that the Play Store only allows the uploading of APK files of Android apps.
-
Limited Browser/ OS Support
While multiple OSs and browsers support PWAs to a certain extent, PWAs mainly target the Android OS and the Chrome browser. The reason for this is quite simple, these devices and browsers are well equipped for PWAs, whereas the others, not so much. The Safari browser installed in iOS devices supports PWAs but does not allow the PWAs to send push notifications through, and bars background sync, and the web manifest file.
It is pretty clear by now that these are some of the essential features that make a progressive web application development. As of now, marketers need to leverage progressive web applications via Android devices and Chrome browsers, at least until other browsers and iOS devices fully support PWAs.
PWAs for Business and the Advantages
Progressive web apps are the modern marketer’s gold mine. They enable faster downloading, online and offline browsing, increase customer interaction, and a whole lot more. Although PWAs are relatively new to the market, many businesses have already started utilizing them to increase profits by enhancing customer experience. Progressive web apps enable users to have an immersive, seamless experience that increases user engagement and conversion rates.
Progressive web apps provide numerous benefits for businesses, over both mobile applications and traditional websites as well. Some key advantages of utilizing a PWA for business are as follows:
-
- Progressive web apps follow a mobile-first approach, which means they function especially well on mobile devices.
- Lower development costs as compared to native applications.
- PWAs are platform- and device-agnostic, meaning they do not depend on the features or capabilities of the platform or device they run on.
- Hassle-free updating of PWAs.
- Push notifications increase customer interaction with the company.
- Progressive web apps offer enhanced security as they use HTTPS that minimizes security risk.
- Stores made using PWAs function smoothly as they combine the user experience of a native mobile application along with the benefits of a traditional website.
- PWAs are built to work in hybrid web-app ecosystems, which allows users to browse offline.
- PWAs maintain a loading time that is two to three times faster than that of traditional webpages.
- Faster loading times mean reduced server loads and increased server stability, in terms of crashes during periods of intense traffic.
- Faster loading times also help in gaining a higher ranking on Google, which means increased visibility.
- Since PWAs are a mix of apps and websites, the app size is drastically reduced. PWAs are generally 80–90% smaller in size as compared to native apps. For instance, the native Twitter app takes up around 100MB, and the Twitter Lite PWA takes just 1.5MB.
The benefits of PWAs are endless, and these are just the beginning. There is tremendous scope for progressive web apps to further develop and improve with time and technological advancements. A possible enhancement and lifting of PWA-based regulations in iOS and other browsers could lead to more efficient audience targeting. Businesses should realize that progressive web apps are no magic bullet that drives online success. PWAs are an approach that improves a brand’s online presence and provides the tools and channels to engage audiences.
What the Future Holds for PWAs
Progressive web apps provide so much more than just the addition of a web manifest file, making use of a service worker, and running under HTTPS. PWAs are all about providing users with an enhanced online experience. The web has come a long way with the advent of PWAs, which have capabilities that are at par with native applications, without the unnecessary app store hassle. Progressive web apps allow businesses to make a profit and also do away with the need for payment to Apple, Google, or Microsoft.
Progressive web apps provide brands with the ability to reach out to their audience, reengage them, and improve business outcomes. PWA design offers brands a method of building better user experiences across devices within a single codebase but requires a largescale shift in a brand’s understanding and tools. Today, developing immersive apps by leveraging web technology does not require giving up the web altogether. Progressive web apps are the ticket out of the traditional browser tab, brands just need to make a decision and make the shift to reap the bountiful benefits of PWAs.
