A GDG Ibadan Progressive Web Apps Codelab

1. IndexedDB and Push
Notifications in Progressive
Web Apps
Adegoke Obasa

2. What you’ll learn - IndexedDB
Create an indexed database.
Create object stores.
Store data in the object stores.
Retrieve data from the object stores.
Update and delete data from the object stores.

3. What you’ll learn - Push Notifications
How to set up a Firebase Cloud Messaging (FCM) account
Techniques for requesting GCM to send a notification to a web client
Notification display
Notification click handling

4. What you’ll need
Chrome 42 or above
A basic understanding of git, and Chrome DevTools
Experience of service worker would also be useful, but is not crucial
The sample code
A text editor
Python or a simple local web server.

5. IndexedDB

6. What is IndexedDB?

7. Why IndexedDB?

8. Pros of IndexedDB
It stores the data as Key-Pair values.
It is asynchronous.
It is non relational.
Can access the data from the same domain.
It allows indexed database queries.

9. IndexedDB Support

10. “Talk is cheap, show me the code”
- Linus Torvalds

11. IndexedDB 101

12. IndexedDB Support
Method 1
Open the Chrome Developer Tools
Switch to the Console
Run `indexedDB`command
Method 2
Go to the Application tab
Method 1
Method 2

13. Todo App
Clone - https://github.com/goke-epapa/indexed-db-and-push-notifications
Switch to the indexed-db-starter branch
git reset --hard
git checkout indexed-db-starter

14. Create Database
and object store
Add code to js/idb.js file
var dbEngine = indexedDB.open(dbName, dbVersion);
dbEngine.onupgradeneeded = function (event) {
log("That's cool, we are upgrading");
// Create ObjectStore
var db = event.target.result;
if (!db.objectStoreNames.contains(TODO_STORE)) {
var objectStore = db.createObjectStore(TODO_STORE,
{keyPath: "id", autoIncrement: true});
}
};

15. Add todo
Add code to js/idb.js file
var engine = indexedDB.open(dbName, dbVersion);
engine.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction([TODO_STORE], "readwrite");
var store = transaction.objectStore(TODO_STORE);
var request = store.add(todo);
request.onsuccess = function (e) {
log('TODO inserted >> ', e.target.result);
};
request.error = function (e) {
error('An error occurred');
};
};
engine.onerror = function (error) {
error('An error occured ', error);
};

16. Clear all todos
Add code to js/idb.js file
var engine = indexedDB.open(dbName, dbVersion);
engine.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction([TODO_STORE], "readwrite");
var store = transaction.objectStore(TODO_STORE);
var request = store.clear();
request.onsuccess = function (e) {
log('All todos deleted');
};
request.error = function (e) {
error('An error occurred);
};
};
engine.onerror = function (error) {
error('An error occured ', error);
};

17. Render todos
Add code to js/idb.js file
...
store.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if(cursor) {
// Renders todo
log(cursor.value);
renderTodocallback(cursor.value);
cursor.continue();
} else {
log('All todos fetched');
}
};
};
...

18. Delete todo
Add code to js/idb.js file
...
var transaction = db.transaction([TODO_STORE], "readwrite");
var store = transaction.objectStore(TODO_STORE);
var request = store.delete(Number(id));
request.onsuccess = function (e) {
log('Todo ' + id + 'deleted');
if (typeof callback != 'undefined') {
callback();
}
};
request.error = function (e) {
error('An error occurred');
};
...

19. Push Notifications

20. Implementing Push Notifications in the
Todo App
Switch to the push-notifications-starter branch
git reset --hard
git checkout push-notifications-starter

21. Create a Firebase
Cloud Messaging
(FCM ) project.
Navigate to the Google Developers
Console -
https://console.cloud.google.com

22. Enable FCM
From Use Google APIs, select
Enable and manage APIs
From the Google APIs list, select
Google Cloud Messaging
Click the Enable button

23. Get credentials
From the API Manager menu,
select Credentials
Click the Create credentials
dropdown button and select
API key:
Click the Go to Credentials button
For Where will you be calling the
API from? Select Web Browser
(Javascript)
Click the What Credentials do I
need button
Give the key a name (anything you

24. Update Manifest
Add gcm_sender_id to the
manifest.json file. The gcm_sender_id
value should be the Project Number
you saved earlier.
{
"short_name" : "GDG Ibadan",
"name" : "GDG Ibadan",
"icons" : [
{
"src" : "/img/nn.min.png",
"sizes" : "192x192",
"type" : "image/png"
}
],
"start_url" : "/",
"display" : "standalone",
"theme_color" : "#666",
"background_color" : "#666",
"gcm_sender_id": "**************"
}

25. Set Variables
Add the code to js/app.js file in the
immediately after // TODO Set
subscribe button disabled
attribute to false
reg = serviceWorkerRegistration;
subscribeButton.disabled = false;

26. Add Subscription
Code
Add the code to js/app.js file
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function (pushSubscription) {
sub = pushSubscription;
console.log('Subscribed! endpoint:', sub.endpoint);
subscribeButton.textContent = 'Unsubscribe';
isSubscribed = true;
})

27. Add
Unsubscription
Code
Add the code to js/app.js file
sub.unsubscribe().then(function (event) {
subscribeButton.textContent = 'Subscribe';
console.log('Unsubscribed!', event);
isSubscribed = false;
}).catch(function (error) {
console.log('Error unubscribing', error);
subscribeButton.textContent = 'Subscribe';
})

28. Get Subscription ID
Open the Chrome Developer Tools
and switch to Console
Click on the Subscribe button
Right click on the link in the
console and copy it
The subscription ID is the part after
the last slash in the url
Usually looks like this:
eRiejdjxANbd_aY:APA91bFx_ZbfwOMbwL7hHVomb-
47EMwDGTxOKTnf1JJEgj9nWxZ_yr7lLqwBtj_P_JZsEHjVCcw
leVKnNEJpLVUYjejfIvSD9Y1WFhvsp4ic8wUxloqaPnZwUMRB
-dJbOsDPm48biXYvshdhj

29. Send GCM Push
message request
Using curl or any HTTP Client
Sample command using curl:
curl --header "Authorization: key=XXXXXXXXXXXX" -
-header "Content-Type: application/json"
https://android.googleapis.com/gcm/send -d
"{"registration_ids":["fs...Tw:APA...SzXha"]}
"

30. Show Notification
Add the code to sw.js file
self.addEventListener('push', function (event) {
console.log('Push message received', event);
var title = 'Push Message';
// Show notification
event.waitUntil(
self.registration.showNotification(title, {
body: 'The Message',
icon: 'img/nn.min.png',
tag: 'my-tag'
})
);
});

31. Handle notification
clicks
Add the code to sw.js file
self.addEventListener('notificationclick', function (event) {
event.notification.close();
var url = 'https://attending.io/events/buildpwa-v2';
event.waitUntil(
clients.matchAll({
type: 'window'
}).then(function (windowClients) {
windowClients.forEach(function (client) {
if (client.url == url && 'focus' in client) {
return client.focus();
}
});
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});

32. Pat yourself on the back. You
built a web app that enables
Push Notifications!

33. References
Google Developers - Your First Push Notifications Web App

34. Further Reading / Recommendations
Udacity Course - Offline Web Applications

35. Thanks!
Adegoke Obasa
Software Engineer
Cotta & Cush Limited | adKandi
@goke_epapa
www.adegokeobasa.me