Introduction to

Progressive
Web Applications

Sylvain Pollet-Villard

Yassine Benabbas

27 April 2018

You are already using a PWA

A trending topic

“A Progressive Web App uses modern web capabilities to deliver an
app-like user experience.”

Google, 2015

Reliable:

Fast:

Engaging:

3 main goals of PWA

instant loading in any network condition

UI and UX are immersive
feel like a native experience on any device

smooth UI and scrolling
fast interactions on any platform

Advantages of web over native

Multi-platform, OS agnostic
No app store constraints or fees
Can be accessed and shared with a single URL
No installation required, just a compatible browser
Updates are transparent and maintenance is cheap

PWA bonuses

Add a shortcut to home screen and app panel
Full screen, splash screen
More caching capabilities
Push Notifications on supported browsers
(even when the browser is closed !)

Web technologies are backward-compatible by definition.

Even if there are unsupported features,

the app still works

This is Progressive enhancement

Why Progressive ?

Illustration by Tiffany Tse

Main ingredients of a PWA :

A single page and responsive web app
A web application manifest
A Service Worker
HTTPS

You can spice it with :

Server side rendering
Push notifications
HTTP/2

Web app manifest

Provides info about the app
Allows to add a bookmark to homescreen

Service Worker

Asynchronous thread
that intercepts all network requests

Coded in Javascript
Acts as a proxy between the web app and the network
Has powerful APIs for caching and offline support
Can also be used for background sync and push notifications

Example of a basic caching strategy
(Service Worker code)

Caching strategies

Common caching strategies :

Cache as fallback
Cache, update, refresh
Pre-caching
Other examples here : https://serviceworke.rs

Common error handling strategies:

Retry initiated by the user
Automatic retry with a incrementing delay
Stack of failed requests

Demo time

PWA and Frameworks

Many PWA implementations compared

Audit tool: Lighthouse

Open source tool
Generates a report and a score

Available in:

Chrome Devtools
CLI
Node modules

Why consider PWA

for a mobile project ?

Key features: push notifications, network resiliation...
Platform integration: big steps towards by Google & Microsoft
- Apple is following with a slower pace
User engagement: PWA are easier to find, to try and to share
Decent UX & performance: give the web another chance
Time and cost: common dev skills, cheap maintenance
Upgradability: Transparent updates + progressive enhancement
New abilities constantly coming to the web platform
- try https://whatwebcando.today/

Our expert topic

Tasks and goals:

A complete and exhaustive support:
pwa-cookbook.js.org

Evangelize about PWA

Project templates for quick boot

Custom support