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!
