SLIDE 1
BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH
Offline web applications don’t exist anymore 2
Offline web applications dont exist anymore Francesco Leardini - - PowerPoint PPT Presentation
Offline web applications dont exist anymore Francesco Leardini - - PowerPoint PPT Presentation
Offline web applications dont exist anymore Francesco Leardini Consultant francesco.leardini@trivadis.com @paco_ITA BASLE BERN BRUGG DSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH
SLIDE 2
SLIDE 3
Modern websites nowadays!
3
Branded offline pages Engaging pages
Offline web applications don’t exist anymore
SLIDE 4
PWA Stats
4
www.pwastats.com
Offline web applications don’t exist anymore
SLIDE 5
What is a Progressive Web Application (PWA)
5
A PWA is a web app using modern web capabilities to provide a native app experience to users
- Installable: thanks to the web app manifest
- Work offline: using service workers (sw)
- Can send push notifications
Offline web applications don’t exist anymore
SLIDE 6
Web App Manifest (manifest.json)
6
Chrome criteria
Https Registered SW
Offline web applications don’t exist anymore
SLIDE 7
Add to Home Screen (A2HS)
7 Offline web applications don’t exist anymore
SLIDE 8
How does a PWA makes websites available offline?
8
- is a component of JavaScript code
- works as a proxy between the browser and the network
- runs in the background on a separate thread (no blocking)
- works only on secure connections (localhost is considered secure)
service worker A :
Offline web applications don’t exist anymore
SLIDE 9
Service worker caching strategies for data resources
9
Performance optimization (cache only) Needed data has to be previously cached (typically during the sw install phase)
Offline web applications don’t exist anymore
SLIDE 10
Service worker caching strategies for data resources
10
Data freshness Useful for things that have no offline equivalent, such as analytics pings
Offline web applications don’t exist anymore
SLIDE 11
Service worker caching strategies for data resources
11
Cache, falling back to network Ideal for the majority of requests in offline-first apps
Offline web applications don’t exist anymore
SLIDE 12
Service worker in action
12
The first time the app is accessed, the service worker stores the required resources in the browser cache.
cache service worker.js
When the user visits the app next time, the service worker checks the cache and returns the response to the user even before accessing the web server.
web server
Offline web applications don’t exist anymore
SLIDE 13
13
SLIDE 14
14 Offline web applications don’t exist anymore
SLIDE 15
Service Workers in Angular
15
With angular-cli (1.6+) we can easily turn an existing application into a PWA: Two new files will be created and added to our project:
- ngsw-config.json
- manifest.json
Offline web applications don’t exist anymore
SLIDE 16
16
Angular PWA demo
Offline web applications don’t exist anymore
SLIDE 17
17
Can we do better?
Offline web applications don’t exist anymore
SLIDE 18
Firebase platform
18 Offline web applications don’t exist anymore
SLIDE 19
Cloud Firestore
19
- Still in beta release (Oct 2017)
- NoSQL Database
- Real-time data updates (3-way binding)
- Offline support for mobile (iOS/Android) and web
Offline web applications don’t exist anymore
SLIDE 20
Enable offline data in Cloud Firestore
20
- A copy of the data used is cached locally and made available
when the device is offline.
- It is still possible to write, read and query the cached data.
- Once back online, Cloud Firestore synchronizes local changes
with the server DB.
Offline web applications don’t exist anymore
SLIDE 21
Offline data limitations
21
- Only one browser tab per time version 5.5.0 (12.09.2018)
- Max 500 offline transactions possible
- Possible saving conflicts (last write wins)
Offline web applications don’t exist anymore
SLIDE 22
22
A «never offline» app demo
Offline web applications don’t exist anymore
SLIDE 23
BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH
Questions?
SLIDE 24
BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH