PWA vs. AMP: Which is Better & How are They Different from Each Other?

PWA vs. AMP: Which is Better & How are They Different from Each Other?

Last updated on by Ted Vrountas in Advertising, Conversion Optimization

About a decade after the introduction of the first iPhone, the mobile web is finally catching up to the lifestyles of its users. The pinch and zoom has been wiped out by responsive pages. AMP and native apps fight slow load times…

But there’s still a major problem area for the mobile web: engagement. The top 1,000 mobile websites reach 4x more people than the top 1,000 native apps. However, those websites engage users for 20x fewer minutes, on average, than mobile apps do.

It seems mobile websites can attract visitors, but not keep them. One of the newer technologies solving this problem is progressive web apps.

What are progressive web apps?

Progressive web apps are mobile website experiences designed to look, feel, and work the way native mobile apps do. Users encounter them in a browser as they would any mobile website. After engaging with that site, the user is prompted to install the web app on their device. Should they choose to install, the app will download to the device in the way a native app would.

The term “progressive web apps” was coined by Google in 2015. The company says progressive web apps meet three criteria:

Upon meeting these requirements, the mobile web app can be offered as downloadable to users. Before we dive deeper into progressive web apps, let’s backpedal to the surface briefly and define native apps and another technology speeding the mobile web, Accelerated Mobile Pages (AMP).

What is a native app?

Native apps are installed via a marketplace like the App Store or Google Play and live as icons on a device’s home screen. They are designed specifically for a particular device, and can use all its features, like GPS, camera, contacts list, and more. These are apps likely to be on your device currently, like Google Maps, Gmail, or Instagram.

What is AMP?

The open-source Accelerated Mobile Pages project (AMP for short) allows developers to build web pages that load near-instantly with a unique coding language. That language is a stripped-down version of HTML and CSS which restricts the use of JavaScript. These pages are hosted on a CDN, which delivers a cached version of the page when it’s visited by a user.

Progressive web apps vs. native apps

Native apps offer instant and seamless user experiences, and they’re supported by big marketplaces like the App Store and Google Play, so why opt for a progressive web app over the traditional native version? In an article for Forbes, Andrew Gazdecki offers a high-level explanation:

Mobile websites are quick and easy to get to, but they tend to be less pleasant regarding user experience. Native apps provide the finest user experience, but they are limited to certain devices and have high barriers to adoption. Native apps require a download, which means generating considerable buy-in from consumers first and losing the benefit of impulse behavior. Sitting between these options is the newest mobile solution: the PWA.

For a more refined explanation, let’s look at some of the biggest differences between native apps and progressive web apps:

Progressive web apps vs. AMP

People like Gazdecki believe progressive web apps will eventually replace native applications, but what about AMP? Where do accelerated mobile pages come in here, and is there a place for both? A few key differences between these two:

In Smashing Magazine Paul Bakaus sums up the tradeoff between the two formats well:

To make the experience reliably fast, you need to live with some constraints when implementing AMP pages. AMP isn’t useful when you need highly dynamic functionality, such as Push Notifications or Web Payments, or anything requiring additional JavaScript.

Also, since AMP pages are usually served from an AMP Cache, you won’t get the biggest Progressive Web App benefits on that first click, since your own Service Worker can’t run. On the other hand, a Progressive Web App can never be as fast as AMP on that first click, as platforms can safely and cheaply prerender AMP pages – a feature that also makes embedding simpler (e.g., into an inline viewer).

But, in the end, do we really have to choose one over the other?

Cooperation over competition

You could choose to use AMP solely to create a fast but simple experience. You could rely on a progressive web app to create a dynamic but slower user experience. Or, you could start fast and stay fast by incorporating both into your web design.

Today, uses of AMP together with progressive web apps are becoming more prevalent, with developers leveraging both in three ways.

1. AMP as a progressive web app

If your content is primarily static and you can settle for AMP’s limited functionality, this option allows you to create lightning fast experiences as a progressive web app. AMP by example, is built like this — progressive web app entirely AMP-charged. It has a service worker, which allows offline access, as well as a manifest, which prompts the “Add to home screen” banner.

2. AMP to a progressive web app

Another way to use AMP and a progressive web app together is by thinking of your AMP page as the hook to your website. It catches the user with an instantaneous load, then reels them into your progressive web application. This allows you to combine the quick-loading AMP pages with a more dynamic PWA than the first option.

3. AMP in a progressive web app

As was the case with AMP vs. PWA, it doesn’t have to be all or nothing. You don’t need to build all your pages with AMP; you also don’t need to separate AMP and PWA’s as hook and rod either. Now, you can actually AMP only a small subsection of a single page, thereby decreasing its size and lowering its load time without the complete tradeoff of dynamic functionality.

This involves using another form of AMP called “Shadow AMP,” which allows AMP to nest within an area of a web page. The results is AMP within the shell of a progressive web application. To see it in action, check out the demo that Google created called ShadowReader:

Ready to create your own progressive web app?

Creating a fast, native-app-like experience with the discoverability of the web starts here, where you can learn all the boxes you need to check to meet Google’s criteria for PWAs. For more information on using AMP and PWAs together, check out:

When you’re ready, start using the AMP landing page builder in Instapage to deliver your fastest user experience yet.

AMP landing pages demo Instapage
Get Started Now

Try the most powerful all-in-one landing page solution today. Start a 14-day free trial, no credit card required, or schedule a demo to learn more about the Enterprise plan.

We use cookies to give you the best experience on our website, deliver our services, personalize content, and to analyze traffic. By continuing to use our website you agree to allow our use of cookies. To know more please refer to our Cookie Policy.
Got it close