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
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
Questions ?
Introduction to Progressive Web Applications (MobileDG WL)
By yostane
Introduction to Progressive Web Applications (MobileDG WL)
This presentation explains of the main concepts of PWA : the manifest and the service worker
