User Engagement

What are Progressive Web Apps and How Do They Work?

Google+ Pinterest LinkedIn Tumblr

Over the past few years, Google has been trying to speed up the mobile web in order to deliver a better user experience. The first step in this journey was the launch of accelerated mobile pages. Although these ‘stripped down’ mobile webpages were fast, publishers hit a roadblock with setting up analytics, attribution, and monetization via display ads.

Even as continuous improvements are being made to AMP to make it more publisher-friendly, Google has launched an entirely different framework for web publishers called Progressive Web Apps (PWA).In this post, we’ll explain what Progressive Web Apps are, how they work, their advantages, how they are different from AMP, and monetization options.

What is a Progressive Web App?

Progressive Web Apps are regular webpages or websites that look, feel, and behave like native mobile applications in many ways. “A PWA lets you install the application from the browser window itself, is available on your phone like a native app, and works offline, just like a native app,” says Shruti Kapoor, software engineer at PayPal.

The reason these apps are called ‘progressive’ is because the UX improves based on available device and browser technology. So you could load a PWA on a basic phone and it will still work, but its functionality and user experience will improve as you move on to newer smartphones with the latest hardware. This allows publishers to build scalable experiences for the web without investing heavily into a traditional mobile app

The following characteristics define PWAs according to Google developers:

  • Progressive: Work for every user, regardless of browser choice.
  • Responsive: Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independent: Service workers allow work offline, or on low quality networks.
  • App-like: Feel like an app to the user with app-style interactions and navigation.
  • Fresh: Always up-to-date thanks to the service worker update process.
  • Safe: Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable: Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable: Make re-engagement easy through features like push notifications.
  • Installable: Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable: Easily shared via a URL and do not require complex installation.

How do Progressive Web Apps Work?

Progressive Web Apps take advantage of new features supported by modern browsers, including web app manifests and service workers. Any website / app must meet the four minimum conditions for it to be classified as a Progressive Web App

  1. A web manifest provides meta information about an application (such as its name, author, icon, and description) in a JSON text file. Publishers can write the web manifest themselves or generate the file using a web app manifest generator.
  2. A service worker is a JavaScript code that acts as a proxy server that sits between the app, the browser, and the network. They are used to deliver effective offline experiences by intercepting network requests and caching information in the background.
  3. An icon is used to work as the app icon when a user keeps a PWA in their applications drawer. Any JPEG image of size 512×512 pixels will work fine.
  4. You must serve the app over a secure HTTPS connection. Most hosting providers will bundle an HTTPS certificate at an extra cost. You can also secure them from a third-party provider. Having a secure website is also better for your brand.

The Advantages of Progressive Web Apps

Progressive Web Apps have many distinct advantages over regular websites. Just like apps, they learn more about the user, with every visit, even when they’re not logged in. So if someone visits the website a few times, the app can trigger a download or web notification prompt. Further, they can be accessed online, and can update content dynamically, creating a more seamless user experience

More importantly than all of those, Progressive Web Apps are fast. “Our own research has found that PWAs deliver two to four times faster page speeds, ensuring your hard-earned users stay engaged and convert,” says Igor Faletsky, CEO of Mobify. “Progressive Web Apps enable app-like experiences with the reach of the web. The user experience is immersive and loads instantly, even in poor network conditions. Think of it like a mobile app, but without having to go to the App or Play Store.

Progressive Web Apps have delivered great results for hundreds of web publishers and e-commerce vendors. Take a case of Pinterest, who converted their website into a Progressive Web App last year. Since then, the website has witnessed a 60% increase in core engagement metrics, 50% increase in ad clickthroughs, and 44% increase in ad revenue

Most of the advantages of PWAs are the same as apps: Faster, better user experience, and increased user stickiness.

PWA vs. AMP: What’s the Difference?

Progressive Web Apps are actually an offshoot of the Accelerate Mobile Pages project. While AMP is used to cut page load times on mobile, PWAs load just as fast but with added functionality. Development work is ongoing for both frameworks so choosing one becomes a question of use case and preference.

Publishers assume AMP has an SEO advantage. But Graeme Caldwell at Advanced Web Ranking blog explains, PWAs aren’t at any disadvantage. “Not too long ago, client-side web applications were an SEO nightmare. Today, businesses can safely embrace Progressive Web Apps and other JavaScript web applications without negatively affecting SEO,” he says.

Monetizing Progressive Web Apps

This is where Progressive Web Apps have a slight advantage over Accelerated Mobile Pages, albeit at a higher initial cost of setup. AMP is an ambitious project, and it delivered on its core promise of making mobile webpages load faster. However, one place where it has struggled is in meeting publishers expectations viz. monetization options and ad revenue.

“PWA’s can be monetized just as much as native apps can, and in fact your revenues can even end up being higher due to the fact that there’s no obligation to pay commission from any sales to 3rd party players (in the case of native apps, this would be the App Store or Google Play that takes a cut of all sales),” writes Alexandra Soroka at the GoodBarber blog. “If advertising is your monetization method of choice, the options are all there, meaning you have both the option to work with an external ad network as well as the one to create your own internal ad campaigns if you have your own partnerships or agreements going.

The reason Progressive Web Apps are well-suited to monetization is because revenue generation using “apps” is a solved problem. Just like apps, PWAs offer multiple places to display advertisements, various ad formats, and connections to several ad networks. Two of the most common formats include banner ads and interstitial ads. You can display ads on the home view, list view, and display view of your PWA. Easy integration with popular ad networks such as Google AdSense and DFP is an added advantage.

Write A Comment