Mohit Bajoria
Open source lover!
Progressive Web Apps
What are they ?
-
Progressive
-
Responsive
-
Connectivity independent
-
App-like
-
Fresh
-
Safe
-
Discoverable
-
Re-engageable
-
Installable
-
Linkable
“These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.“— Alex Russel
Specific Technologies
-
Service Workers
-
Background Sync
-
Installable Web Apps
-
Push Notifications
Service-Workers
Note - Served only via https
Registering a service-worker
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}Just add these 5 lines in app.js and you are done !
Cache the site assets
var CACHE_NAME = 'mifos-community-app';
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});Return Requests
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});It also has a offline fallback functionality
Testing Service workers
Chrome’s Service Worker Internals page (chrome://serviceworker-internals) is a life saver
Libraries
SW-TOOLBOX
Sw-toolbox makes handling api requests very easy ;)
You can provide a list of resources which will be cached at service worker install time
Precaching
toolbox.precache(['/index.html', '/site.css', '/images/logo.png']);Methods
toolbox.router.get(urlPattern, handler, options)
toolbox.router.post(urlPattern, handler, options)
toolbox.router.put(urlPattern, handler, options)
toolbox.router.delete(urlPattern, handler, options)
toolbox.router.head(urlPattern, handler, options)Mostly they are used for API calls
Handlers
toolbox.networkFirst
toolbox.cacheFirst
toolbox.fastest
toolbox.cacheOnly
toolbox.networkOnlyBrowser-Sync
Requesting a sync
navigator.serviceWorker.ready.then(function(registration) {
registration.sync.register('outbox').then(function() {
// registration succeeded
}, function() {
// registration failed
});
});Responding to a sync
self.addEventListener('sync', function(event) {
if (event.tag == 'outbox') {
event.waitUntil(sendEverythingInTheOutbox());
}
});Woah,It's done :)
Installable web-app
Manifest file
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone"
}Push Notifications
self.addEventListener('push', function(event) {
var obj = event.data.json();
if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
fireNotification(obj, event);
port.postMessage(obj);
} else if(obj.action === 'init' || obj.action === 'chatMsg') {
port.postMessage(obj);
}
});When notifications is fired ?
function fireNotification(obj, event) {
var title = 'Subscription change';
var body = obj.name + ' has ' + obj.action + 'd.';
var icon = 'push-icon.png';
var tag = 'push';
event.waitUntil(self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
}));
}References
The Future of WEB is Here !
Thankyou
@mbj36
Progressive-Web-Apps
By Mohit Bajoria
Progressive-Web-Apps
GSoC 2016 project presentation
