Hi, I am Trishul
@trishulgoel
Progressive Web Apps
(aka PWA)
WHAT
@trishulgoel
@trishulgoel
"theyโre just websites that took all the right vitamins."
- Alex Russell
https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955
@trishulgoel
WEBSITE
NATIVE APP
PWA
@trishulgoel
Discoverability
of
web
Retention
of
app
PWA
WHY
@trishulgoel
PUSH NOTIFICATIONS
APP LIKE EXPERIENCE
@trishulgoel
WORKS OFFLINE
FASTER LOAD TIME
INSTALLABLE
SERVICEWORKERS
@trishulgoel
BUILDING BLOCKS OF PWA
@trishulgoel
@trishulgoel
CACHING
@trishulgoel
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cahce').then(function(cache) {
return cache.addAll(
[
'/css/style.css',
'/js/script.js',
'/index.html'
]
);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if(!response) response = fetch(event.request);
return response;
})
);
});
@trishulgoel
PUSH NOTIFICATIONS
@trishulgoel
self.addEventListener('activate', async () => {
try {
const options = {}
const subscription = await self.registration.pushManager.subscribe(options)
} catch (err) {
console.log('Error', err)
}
})
self.addEventListener('push', function(event) {
if (event.data) {
self.registration.showNotification("Here we are", event.data.text(),
}
})
PWA on STEROIDS
@trishulgoel
PREREQUISITES
@trishulgoel
- HTTPS
- Browser Compatibility
@trishulgoel
STEROIDS
@trishulgoel
VIBRATION
@trishulgoel
window.navigator.vibrate(200);
window.navigator.vibrate([300, 200, 400, 200, 300]);
VISIBILITY
@trishulgoel
document.addEventListener("visibilityChange", fn);
SPEECH SYNTHESIS
@trishulgoel
const synth = window.speechSynthesis;
const voices = synth.getVoices();
const say = new SpeechSynthesisUtterance(text);
say.voice = voices[<selectedindex>];
say.rate = <rate>;
say.pitch = <pitch>;
synth.speak(say);
SPEECH RECOGNITION
@trishulgoel
const recognition = new webkitSpeechRecognition();
recognition.onstart = fn;
recognition.onerror = fn;
recognition.onend = fn;
recognition.onresult = fn;
NETWORK INFO
@trishulgoel
navigator.onLine
navigator.connection.type
navigator.connection.effectiveType //bandwidth
navigator.connection.saveData
navigator.connection.downlink
ORIENTATION
@trishulgoel
window.addEventListener('deviceorientation', handleOrientation);
function handleOrientation(event) {
const x = event.beta; // In degree in the range [-180,180]
const y = event.gamma; // In degree in the range [-90,90]
}
BLUETOOTH
@trishulgoel
const device = await navigator.bluetooth.requestDevice({
filters: [{ namePrefix: 'Device-name' }],
optionalServices: [ 0xfff0 ] // what service(s)? -> uuid
});
const server = await device.gatt.connect();
const service = await server.getPrimaryService( 0xffe5 );
const characteristic = await service.getCharacteristic( 0xffe9 );
characteristic.writeValue(
new Uint8Array( .... ) // 'value' -> bytes
);
MANY MORE...
@trishulgoel
- Media Capture API
- web Audio API
- GeoLocation API
- Memory API
- WebUSB API
PROS & CONS
@trishulgoel
@trishulgoel
- DISCOVERABLE
- SHARABLE
- PLATFORM AGNOSTIC
- EASILY UPDATES
- LIGHTWEIGHT
- BROWSER APIs SUPPORT
- NOT ON PLAYSTORE(?)
- iOS ๐
PROS
CONS
SUCCESS STORIES
@trishulgoel
@trishulgoel
https://developers.google.com/web/showcase/
FUTURE
@trishulgoel
- WEBASSEMBLY ๐
- MORE APIs
- BETTER BROWSER SUPPORT
@trishulgoel
REFERENCES
- https://serviceworke.rs
- https://developer.mozilla.org
- https://developers.google.com/
@trishulgoel
LET'S DO IT!
@trishulgoel
@trishulgoel
@trishulgoel
PWA
By Trishul Goel
PWA
Take the web offline with service workers
- 1,947