The Fundamentals of Progressive Web Apps

Earlier this year Apple made an announcement that largely went unnoticed. In January, Apple released Safari 11.1, which contains service workers. Service workers implement background scripts for offline web applications and faster web pages, thus allowing progressive web apps to be built on the browser. While Apple’s addition of service workers will increase the popularization of progressive web apps, the term “progressive web app” was coined by Google, who has been the leader in progressive web apps since enabling their creation in 2015.

So what are progressive web apps, and why build one? At WillowTree, we pride ourselves on our ability to simplify complicated technical topics. In this post, we answer those questions and cover the basics of progressive web apps.

What is a progressive web app?

Google defines progressive web apps as user experiences that have the reach of the web and are reliable, fast, and engaging. Progressive web apps are web apps that function like native apps, meaning they can be installed locally on a device, have app-like features such as push notifications, and can function offline.

What are the criteria for a progressive web app?

In order for a web application to be considered a progressive web app, there are several criteria that must be met.

  • The app must be progressive. The app must work for every user regardless of browser choice stemming from the web design strategy of progressive enhancement. Progressive enhancement emphasizes core content first and then progressively adds technical layers depending on which browser is being used.
  • The app must be responsive. The app must adjust to each device, whether it is a desktop, tablet, or mobile device.
  • The app must be independent of connectivity. Progressive web apps can work offline. This gives frontend developers control over what the app can cache locally on the device, thus allowing it to work offline.
  • It must feel and work as a mobile app would. Progressive mobile apps include app-like interactions. An example would be the navigation being similar to standard mobile apps.
  • It must be fresh. Meaning that the app is updated regularly. Progressive web apps use service workers to keep the app updated. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.
  • The app must be safe and served over HTTPS.
  • The app must be discoverable. When a user arrives on a website that has progressive web app functionality, the browser lets the user know you can install the app on your device. The app must have reengagement features. Reengagement features are things such as push notifications that are enabled by service workers.
  • The app must be installable. Like a native app, progressive web apps can be saved to a device, though the installation process is different than that of a native app. While native apps can be downloaded from the app store, progressive web apps are installed from the web page itself.
  • The app must be linkable. Pages are made deep linkable via URLs. As URLs are unique for the purpose of shareability on social media, testing can be done for individual pages by opening and directly accessing the page in a new browser window.

Where are progressive web apps being used today?

While progressive web apps are becoming more mainstream, their use is still somewhat uncommon. One example of a progressive web app is Twitter Lite, which is a quick and data-friendly mobile web app for smartphones and tablets that gives people with slower or more expensive data networks easier access to Twitter.

Another example of a progressive web app is Flipkart Lite. Flipkart is India’s leading ecommerce marketplace with over 80 million products across 80+ categories. Flipkart lite provides a continuous experience for users throughout their journey. Flipkart Lite allows users to access past searches regardless of network connectivity.

How do I install a progressive web app on my mobile device?

Progressive web apps are not featured in the app store and instead must be installed directly from the website itself. To install a progressive web app users must click a button saying “Add to Home Screen.” In Safari, this button can be found by clicking on the share button at the bottom of the browser.

Installing a progressive web app on Safari. pwa article image 1

In Chrome, the button can be found by clicking on the three dot menu found in the top right corner.

Installing a progressive web app on Google Chrome. pwa article image 2

Chrome can also present users with an “Add to Home Screen” banner if it detects that the web app is a progressive web app.

Google Chrome install banner for a progressive web app. pwa article image 3

Why build a progressive web app?

So, what are the reasons a business would choose to build a progressive web app? Progressive web apps could be an appropriate solution based on a number of factors, including:

  1. Budget: While building a progressive web app is more expensive than building a website or app individually, it is a cost-effective way to provide an app like experience without having to build separate apps for iOS and Android in addition to a website.
  2. Limited Data Usage: Since progressive web apps are installable on devices and can be used offline, data use is minimized when engaging with the app.
  3. Platform Agnostic: Since progressive web apps are provided via the web, they are not limited to a single platform.

Progressive web apps are an opportunity to revolutionize the app experience, and could potentially replace native mobile apps.