What are Progressive Web Apps?

Facebooktwittergoogle_plusredditpinterestlinkedinmail

1. Introduction

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

What is a Progressive Web App?

A Progressive Web App is:

  • Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
  • App-like – Feels like an app, because the app shell model separates the application functionality from application content.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable – Makes re-engagement easy through features like push notifications.
  • Installable – Allows users to add apps they find most useful to their home screen without the hassle of an app store.
  • Linkable – Easily share the application via URL, does not require complex installation.

This codelab will walk you through creating your own Progressive Web App, including the design considerations, as well as implementation details, to ensure that your app meets the above key principles of a Progressive Web App.

 

What you will build

In this codelab, you’re going to build a Weather web app using Progressive Web App techniques. Your app will:

  • Utilize and demonstrate the above principles of Progressive Web Apps.
  • Use live weather data.
  • Provide app-like interactions to allow the user to add cities.

What you’ll learn

  • How to design and construct an app using the “app shell” method
  • How to make your app work offline
  • How to store data for later offline use

What you’ll need

  • A recent version of Chrome. Note, this works in other browsers as well, but we’ll be using a few features of the Chrome DevTools to better understand what’s happening at the browser level.
  • Web Server for Chrome, or your own web server of choice
  • The sample code
  • A text editor
  • Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools

This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Characteristics

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “progressive web apps” [3] to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system (OS). According to Google Developers,[3][4][5] these characteristics are:

  • Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independentService 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[6] 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.

Progressive web apps described by Shoaib in a follow-up post:[7] are an enhancement of existing web technology. As such, they do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. As of February 2018, progressive web apps are supported by the Google Chrome and Mozilla Firefox browsers, but more browsers may support the features needed in the future.

The technical baseline criteria for a site to be considered a progressive web app by browsers were described by Russell in a follow-up post:[8]

  • Originate from a secure origin. Served over TLS and green padlock displays (no active mixed content).
  • Load while offline (even if only a custom offline page). By implication, this means that progressive web apps require service workers.
  • Reference a web app manifest with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen)
  • An icon at least 144×144 large in png format. E.g.: “icons”: [ { “src”: “/images/icon-144.png”, “sizes”: “144×144”, “type”: “image/png” } ]

Leave a Reply

Your email address will not be published. Required fields are marked *

  • twitter
  • facebook
  • instagram
  • linkedin