Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
IndexedDB and Push
Notifications in Progressive
Web Apps
Adegoke Obasa
What you’ll learn - IndexedDB
Create an indexed database.
Create object stores.
Store data in the object stores.
Retrieve ...
What you’ll learn - Push Notifications
How to set up a Firebase Cloud Messaging (FCM) account
Techniques for requesting GC...
What you’ll need
Chrome 42 or above
A basic understanding of git, and Chrome DevTools
Experience of service worker would a...
IndexedDB
What is IndexedDB?
Why IndexedDB?
Pros of IndexedDB
It stores the data as Key-Pair values.
It is asynchronous.
It is non relational.
Can access the data fro...
IndexedDB Support
“Talk is cheap, show me the code”
- Linus Torvalds
IndexedDB 101
IndexedDB Support
Method 1
Open the Chrome Developer Tools
Switch to the Console
Run `indexedDB`command
Method 2
Go to the...
Todo App
Clone - https://github.com/goke-epapa/indexed-db-and-push-notifications
Switch to the indexed-db-starter branch
g...
Create Database
and object store
Add code to js/idb.js file
var dbEngine = indexedDB.open(dbName, dbVersion);
dbEngine.onu...
Add todo
Add code to js/idb.js file
var engine = indexedDB.open(dbName, dbVersion);
engine.onsuccess = function (event) {
...
Clear all todos
Add code to js/idb.js file
var engine = indexedDB.open(dbName, dbVersion);
engine.onsuccess = function (ev...
Render todos
Add code to js/idb.js file
...
store.openCursor().onsuccess = function (event) {
var cursor = event.target.re...
Delete todo
Add code to js/idb.js file
...
var transaction = db.transaction([TODO_STORE], "readwrite");
var store = transa...
Push Notifications
Implementing Push Notifications in the
Todo App
Switch to the push-notifications-starter branch
git reset --hard
git check...
Create a Firebase
Cloud Messaging
(FCM ) project.
Navigate to the Google Developers
Console -
https://console.cloud.google...
Enable FCM
From Use Google APIs, select
Enable and manage APIs
From the Google APIs list, select
Google Cloud Messaging
Cl...
Get credentials
From the API Manager menu,
select Credentials
Click the Create credentials
dropdown button and select
API ...
Update Manifest
Add gcm_sender_id to the
manifest.json file. The gcm_sender_id
value should be the Project Number
you save...
Set Variables
Add the code to js/app.js file in the
immediately after // TODO Set
subscribe button disabled
attribute to f...
Add Subscription
Code
Add the code to js/app.js file
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function (p...
Add
Unsubscription
Code
Add the code to js/app.js file
sub.unsubscribe().then(function (event) {
subscribeButton.textConte...
Get Subscription ID
Open the Chrome Developer Tools
and switch to Console
Click on the Subscribe button
Right click on the...
Send GCM Push
message request
Using curl or any HTTP Client
Sample command using curl:
curl --header "Authorization: key=X...
Show Notification
Add the code to sw.js file
self.addEventListener('push', function (event) {
console.log('Push message re...
Handle notification
clicks
Add the code to sw.js file
self.addEventListener('notificationclick', function (event) {
event....
Pat yourself on the back. You
built a web app that enables
Push Notifications!
References
Google Developers - Your First Push Notifications Web App
Further Reading / Recommendations
Udacity Course - Offline Web Applications
Thanks!
Adegoke Obasa
Software Engineer
Cotta & Cush Limited | adKandi
@goke_epapa
www.adegokeobasa.me
Upcoming SlideShare
Loading in …5
×

IndexedDB and Push Notifications in Progressive Web Apps

706 views

Published on

A GDG Ibadan Progressive Web Apps Codelab

Published in: Technology
  • Be the first to comment

IndexedDB and Push Notifications in Progressive Web Apps

  1. 1. IndexedDB and Push Notifications in Progressive Web Apps Adegoke Obasa
  2. 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. 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. 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. 5. IndexedDB
  6. 6. What is IndexedDB?
  7. 7. Why IndexedDB?
  8. 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. 9. IndexedDB Support
  10. 10. “Talk is cheap, show me the code” - Linus Torvalds
  11. 11. IndexedDB 101
  12. 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. 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. 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. 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. 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. 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. 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. 19. Push Notifications
  20. 20. Implementing Push Notifications in the Todo App Switch to the push-notifications-starter branch git reset --hard git checkout push-notifications-starter
  21. 21. Create a Firebase Cloud Messaging (FCM ) project. Navigate to the Google Developers Console - https://console.cloud.google.com
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Pat yourself on the back. You built a web app that enables Push Notifications!
  33. 33. References Google Developers - Your First Push Notifications Web App
  34. 34. Further Reading / Recommendations Udacity Course - Offline Web Applications
  35. 35. Thanks! Adegoke Obasa Software Engineer Cotta & Cush Limited | adKandi @goke_epapa www.adegokeobasa.me

×