Professional Development

Knowledge: Progressive apps

BASICS

What are Progressive apps?

DEFINITIONWHAT CAN YOU DOHOW GOOGLE DEFINES A PROGRESSIVE APP

Definition• Progressive Apps are web

apps, they begin life in a tab. • When you go to a progressive

app enough, browsers prompt users to keep them.

• The app appears on your home screen as a shortcut.

• You can also add them right away using options in your browser.

WHAT ARE PROGRESSIVE APPS

Get prompted to add

WHAT ARE PROGRESSIVE APPS

What can you do

• Allow users to engage with your content without using an app store

• Meet the user where they are (on your site)

• Allow the user to access your content through their phone’s app icons

• Update your content as you normally do for the web

WHAT ARE PROGRESSIVE APPS

How Google defines a progressive app

• Responsive 

WHAT ARE PROGRESSIVE APPS

How Google defines a progressive app

• Responsive• App-like 

WHAT ARE PROGRESSIVE APPS

How Google defines a progressive app

• Responsive• App-like • Fresh (Service Worker updates)

WHAT ARE PROGRESSIVE APPS

How Google defines a progressive app

• Responsive• App-like • Fresh (Service Worker updates)

• Safe

WHAT ARE PROGRESSIVE APPS

What are Progressive apps?

ADD ONE YOURSELFAPPLICATION

Application

WHAT ARE PROGRESSIVE APPS

https://airhorner.com/ https://voice-memos.appspot.com/

www.flipkart.com

Add one yourself (a shortcut)

WHAT ARE PROGRESSIVE APPS

Add one yourself (a shortcut)

WHAT ARE PROGRESSIVE APPS

Resources

Resources

• Some basic information: https://support.google.com/fusiontables/answer/2571232?hl=en

• Deeper information: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

• A more technical dive from Google: https://developers.google.com/web/progressive-web-apps?hl=en

RESOURCES

Browser support• Progressive apps use Service Workers to implement offline

capabilities for the app• Service Workers are currently only supported on Chrome and Opera

.• Service Workers are a new browser feature that provide event-

driven scripts that run independently of web pages.• Defined: A Service Worker is a script that runs in the background

and can intercept network requests and return a cached response. • Service Workers also support Push Notifications.• Resource: Instant

Loading Web Apps With An Application Shell Architecture.

RESOURCES

How Google defines a progressive app

• 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 whatever is next.• Connectivity independent - Enhanced with service workers to work offline or on low quality

networks.• App-like - Feel like an app to the user with app-style interactions and navigation because it's

built on the app shell model.• 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 share via URL and not require complex installation.

RESOURCES