Progressive Web Apps, or PWAs, are a new buzzword in the world of web development. They are very similar to a regular mobile app but designed to be used on a mobile device or desktop. This blog explains what a progressive web app is, how it differs from a regular web app, & more.
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).
PWAs have been shown to be extremely beneficial, with research from Simicart finding that after installing a PWA, the average time spent on-site increases by 119%. Not only that, but the average duration spent reading a page increases by 68.8%.
In this post, we’ll explain PWA meaning, how these apps work, their advantages, how they are different from AMP and native apps, and monetization options.
What is a Progressive Web App?
Progressive Web Apps are regular web pages 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 that 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 in 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: These 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 does not require complex installation.
So this was all that you need to about what is a progressive web app. Now, let’s take at how it works.
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.
- 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.
- A service worker is a JavaScript code that acts like 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.
- An icon is used to work as the app icon when a user keeps a PWA in their application drawer. Any JPEG image of size 512×512 pixels will work fine.
- 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.
What is the Difference Between Progressive Web Apps & Native Apps
There are many differences between these two. Below we have mentioned a few of the major ones.
Cost
Out of many progressive web app features, cost-effectiveness is one of the best advantages.
There is a significant cost difference between these two. While designing native apps, you need to have a strong grasp of the required language. Not to mention, you have to build apps for both the operating systems – Android and IOS.
On the other hand, progressive web apps are much more affordable to build. You don’t need to learn any coding languages, and you don’t need any extra resources to maintain or update each version of the app.
Unlike native apps, progressive web apps are a great way to save time and money when it comes to building and updating your app. You can have one single codebase for various platforms, which means you don’t have to worry about creating separate versions for each platform.
Discoverability
Since progressive web apps are built using web technologies like HTML, Javascript, .CSS, etc., they can be indexed by search engines. They work like a website, meaning they can also be listed in the search engines with the right search engine optimization techniques.
Native apps work differently. They are generally designed for Android and IOS and can only be ranked in their dedicated stores – Play Store & App Store.
Security
When it comes to safety, PWAs are more secure than traditional web apps because they’re required to run under HTTPS, a security protocol that safeguards against any exchanges between client and server being tampered with.
A native app allows you to include multiple security measures, such as Multi-Factor Authentication and Certificate Pinning.
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 the case of Pinterest, which converted its website into a Progressive Web App last year.
Since then, the website has witnessed a 60% increase in core engagement metrics, a 50% increase in ad clickthroughs, and a 44% increase in ad revenue.
Most of the advantages of PWAs are the same as apps: Faster, better user experience, and increased user stickiness.
Now that you have a grasp on what PWAs are and how they work, let’s compare them to AMPs.
PWAs and AMPs share some similarities, but there are also some key differences between the two.
Let’s take a look at what those are so you can better understand how each one works.
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 that delivered on its core promise of making mobile web pages load faster. However, it has struggled to meet publishers’ expectations, viz., monetization options and ad revenue.
“PWA’s can be monetized just as much as progressive websites and native apps can. 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.
Suppose advertising is your monetization method of choice. In that case, the options are all there, meaning you have the option to work with an external ad network and create your own internal ad campaigns if you have your own partnerships or agreements going.
Progressive Web Apps are well-suited to monetization 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 technologies such as DFP is an added advantage.
How to Build Progressive Web Apps?
Getting started with PWAs is easy – all you need are a few key ingredients, and you’ll be good to go! This small progressive apps tutorial will help you know the prerequisites to begin with PWA development.
Tools
There are many different technologies that you can use to develop PWAs. But the most popular and well-known option is AngularJS. Apart from that, you can also use ReactJS and Polymer.
HTTPS
The second step is making your progressive app secure. For that, it’s advisable to host your website on a server with an HTTPS connection. This ensures the privacy of your users’ data. It gives your website an additional degree of security.
Application Shell
The application shell is what the user sees first when they open your app. In other words, it’s the initial impression your app makes.
The shell sets the stage for the user’s experience with your app by providing a starting point for navigating and interacting with the app.
Manifest File
This JSON file is generated with a specific purpose – to contain all the information that would control how your PWA would appear and function.
In this file, you will be able to determine things like the name, description, icon, colors, and many features of your progressive web app.
This allows you to have full control over how your app appears and behaves, making it easier to create a unique and personalized experience for your users.
Service Workers
One of the fundamental technologies that enable PWAs is the use of service workers.
Service workers allow your app to operate offline and support advanced features by caching assets and managing background operations. Furthermore, it can carry out tasks even when your progressive web app is inactive.
Final Words
It should be obvious that Progressive Web Apps are the future. In the last few months, we’ve seen a lot of announcements and changes that are really exciting.
Google has been taking strides to make PWAs the first choice for developers, and Microsoft has followed suit with its announcement of progressive web apps on Windows. We’re super excited to see the future of PWAs unfold.
We hope the blog helped you understand what a progressive web app is, how it works, progressive web apps and native web apps, etc. Thanks for reading.
Frequently Asked Questions – Progressive Web Apps
Yes, now it is. Facebook was one of the first companies to start testing out progressive web applications (PWAs) in 2018 – just as PWAs were becoming a major buzzword in the tech industry. As such, Facebook played a big role in PWAs becoming more mainstream.
One of the best examples of progressive web apps is Starbucks new ordering system. In fact, you may have used it as well.
Starbucks has created an innovative new ordering system, which works through the progressive web app. It provides users with a similar experience to the existing native app but with the added ability to run in offline mode.
This means that customers can browse the menu, customize their orders, and add items to their carts without needing an internet connection.
Progressive Web App (PWA) comes with an array of features. These apps have been introduced to help the mobile internet ecosystem to evolve.
The key features are its ability to work in offline mode, push notifications, home screen icons, and desktop support.
Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.
3 Comments
Pingback: AdPushup on Twitter: "What are Progressive Web Apps and How Do They Work? https://t.co/jlObYXFvWr"
I understand Google AdSense for Content is not for PWAs because you have supposed to have text that AdSense can use to generate contextual ads.
The AdSense ads on my webapp have been stopping and starting recently (although no reason has been provided), so I’m looking for ad options that is well suited to PWAs.
Adsense can not be used for PWA.