Next gen UX with Progressive Web Apps

1995
JS
creation
1997
ECMA
standard
2007
V8 project starts
2008 - 2010
Race for speed
2009
AngularJS
2013
React
2009
NodeJS
2014
VueJS
2018
> 5B
devices

👍 everywhere

👍 powerful

👍 no install

👎 connection

👎 installs every time

👎 not "the norm" on mobile

Web

Native

PWA's

🚀

Demo
icons from iconfinder

Service

Worker

...is a worker registered against an origin and a path. 

It takes the form of a JavaScript file that can control the web page/site it is associated with [...].
Service
Worker
Client
Server

0. Service Worker

👨‍🏭

Code snippet
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
navigator.serviceWorker
    .register('service-worker.js')
    .then(reg => {
        console.log("Successfully registered!");
    })
    .catch(err => {
        console.error("Oups", err);
    });
if ('serviceWorker' in navigator) {








}

👨‍🏭 DEMOOOOOO

1. works* offline

🚫📶

Code snippet
📁 index.html
📁 style.css
📁 ...
Server
📁 index.html
📁 style.css
📁 ...
example.com
I am currently at my parents' place in Rawatbbata, Rajasthan [India]. Since my parents don't have a computer they only consume internet through their smartphone [...] providers which in our town are still 2G.

Right now I have connected my laptop via WiFi hotspot. Opening Gmail in basic HTML version takes 30s to a minute

Step 1: Cache Files

Step 2: GEt them from cache when needed

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
const filesToCache = ['/', 'style.css'];
self.addEventListener('install', event => {















});
event.waitUntil(new Promise((res, rej) => {
    










}));
caches.open('static-files')
    .then(cache => {







    })
    .catch(rej);
Promise.all(
    filesToCache.map(url =>
        fetch(url).then(resp => {
            cache.put(url, resp);
        });
    )
).then(res);
1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
self.addEventListener('fetch', event => {
















});
event.respondWith( 
    new Promise((res, rej) => {











    })
);
const clonedRequest = event
                        .request
                        .clone();
return caches
        .match(event.request, {
            cacheName: 'static-files'
        })
.then(resp => 
    resp || fetch(clonedRequest)
);
2

📶 DEMOOOOOO

2. APP LIKE

📱

Code snippet
<link rel="manifest" href="manifest.json" />
manifest.json
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
{
    "name": "Geek Alert",
    "short_name": "Geek Alert",
    "theme_color": "#4141ac",
    "background_color": "#b1fcf8",
    "display": "standalone",
    "orientation": "portrait",
    "scope": ".",
    "start_url": ".",
    "icons": [{
            "src": "icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        /* ... */
    ]
}

3. Engaging

📢

Code snippet
Server
service-worker
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
firebase
    .messaging()
    .useServiceWorker(swRegistration);
Notification
    .requestPermission()
    .then(permission => {







    });
if (permission === 'granted') {




}
messaging.getToken().then(token => {
    console.log(token);
});
app.js
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
service-worker.js
self.addEventListener('push', event => {









});
const payload = event.data.json().data;
event.waitUntil(





);
self
    .registration
    .showNotification(payload.title, {
        body: payload.body
    })

📢 DEMOOOOOO

but now what...?

🔥 Are u excited? 😲

- follow -

CHECK OUT THE APP

get busy PWA'ing

🙄 Q&A

Thank you!

Further reading

Next gen UX with Progressive Web Apps

By Pava

Next gen UX with Progressive Web Apps

  • 512
Loading comments...

More from Pava