Geek in the box - Future Sync 2017

GEEK IN THE BOX Short guide to PWA through cross
t.

WARM UP

NATALIA WANICZEK Developer & Cross tter @natkuTala @nixonDesign

AGENDA What is PWA What makes PWA Examples

Cross t - a high-intensity tness programme incorporating elements from
several sports and types of exercise. - Greg Glassman

I'M A DEVELOPER

Progressive Web App (PWA) is a term used to denote
web apps that uses the latest web technologies. Progressive web apps are technically regular web pages (or websites) but can appear to the user like traditional applications or (native) mobile applications. - Wikipedia

PROGRESSIVE WEB APP No install required Loads quickly Push noti
cations Icon on the home screen Full screen Of ine

PROGRESSIVE ENHANCEMENT Service Workers and W3C Manifest.

Intercept between a server and a website Lets you control
network connectivity Push noti cations Background sync HTTPS only SERVICE WORKERS

Register Download Install Activate 4 STEPS

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' });
} 1. REGISTER

2. DOWNLOAD

self.addEventListener('install', event => { // Do install stuff }); 3.
INSTALL

self.addEventListener('activate', event => { // Do activate stuff.. }); 4.
ACTIVATE

OFFLINE FIRST

json le containing metadata How the app appears to the
user Served by requesting a le in the header <link rel="manifest" href="manifest.json"> WEB APP MANIFEST

Demo screenshots

WHAT HAVE WE LEARNT What are they and how to
use Service Workers What do we need web manifest for Cross t is great!

THANK YOU

USEFUL LINKS Smashing Magaznie: https://www.smashingmagazine.com/2016/02/making-a-service-worker Jake Archibald: https://jakearchibald.github.io/isserviceworkerready/ Jake Archibald:
https://jakearchibald.com/2014/using-serviceworker-today/ Service Workers browser supporthttp://caniuse.com/#search=service%20workers Web App Manifest browser support http://caniuse.com/#search=web%20app%20manifest

Geek in the box - Future Sync 2017

Geek in the box - Future Sync 2017

Natalia Waniczek

More Decks by Natalia Waniczek

Other Decks in Technology

Featured

Transcript

GEEK IN THE BOX Short guide to PWA through cross

WARM UP

NATALIA WANICZEK Developer & Cross tter @natkuTala @nixonDesign

AGENDA What is PWA What makes PWA Examples

Cross t - a high-intensity tness programme incorporating elements from

I'M A DEVELOPER

Progressive Web App (PWA) is a term used to denote

PROGRESSIVE WEB APP No install required Loads quickly Push noti

PROGRESSIVE ENHANCEMENT Service Workers and W3C Manifest.

Intercept between a server and a website Lets you control

Register Download Install Activate 4 STEPS

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' });

2. DOWNLOAD

self.addEventListener('install', event => { // Do install stuff }); 3.

self.addEventListener('activate', event => { // Do activate stuff.. }); 4.

OFFLINE FIRST

json le containing metadata How the app appears to the

Demo screenshots

WHAT HAVE WE LEARNT What are they and how to

THANK YOU

USEFUL LINKS Smashing Magaznie: https://www.smashingmagazine.com/2016/02/making-a-service-worker Jake Archibald: https://jakearchibald.github.io/isserviceworkerready/ Jake Archibald: