Successfully reported this slideshow.
Your SlideShare is downloading. ×

Working with Data in Service Workers

Ad

Working with Data in
Service Workers

Ad

The PWA Pillars

Ad

Performance

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 34 Ad
1 of 34 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Working with Data in Service Workers

  1. 1. Working with Data in Service Workers
  2. 2. The PWA Pillars
  3. 3. Performance
  4. 4. Offline Scenarios
  5. 5. User Experience
  6. 6. Working with Data in Service Workers
  7. 7. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 9 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
  8. 8. Agenda • Storing data in the browser • IndexedDB • Storing data in service workers
  9. 9. Storing Data in The Browser • Cookies • Super small storage, string based, API not friendly • Web Storage (localStorage / sessionStorage) • String based dictionary, synchronous API • Web SQL database • Deprecated for years!
  10. 10. Enter IndexedDB
  11. 11. IndexedDB • Advanced key-value data management IndexedDB Front-end App Fast Reliable Limited capacity Local access only Information loss
  12. 12. IndexedDB – The Database Database objectStore Cursor on objectStore key : value key : value key : value Index Cursor on index
  13. 13. IndexedDB API • Very massive! • Asynchronous • Important note: synchronous APIs were deprecated by W3C • Exposed through window.indexedDB object
  14. 14. DEMO: IndexedDB in Action
  15. 15. IndexedDB – Open the Database var db; var request = window.indexedDB.open("dbName"); request.onerror = function(event) { … }; request.onsuccess = function(event) { db = request.result; };
  16. 16. IndexedDB – Creating an objectStore var request = indexedDB.open(‘dbName’, 2); request.onupgradeneeded = function(event) { // Create an objectStore to hold information about customers. var objectStore = db.createObjectStore("products", { keyPath: "id" }); // Create an index to search customers by name. objectStore.createIndex("name", "name", { unique: false }); };
  17. 17. IndexedDB – Creating a Transaction var transaction = db.transaction(["products"], "readwrite"); transaction.oncomplete = function(event) { … }; transaction.onerror = function(event) { … }; // will add the object into the objectStore var objectStore = transaction.objectStore("products"); var request = objectStore.add({ id: 7, name: "IndexedDB" }); request.onsuccess = function(event) { // event.target.result == object.id }
  18. 18. IndexedDB – Using a Cursor var transaction = db.transaction(["products"]); var objectStore = transaction.objectStore("products"); var cursor = objectStore.openCursor(); cursor.onsuccess = function(event) { var cursor = event.target.result; if (cursor) { … cursor.continue(); } else { console.log("No entries"); } };
  19. 19. IndexedDB – Working with Indexes var transaction = db.transaction(["products"]); var objectStore = transaction.objectStore("products"); var index = objectStore.index("name"); var request = index.get("John"); request.onsuccess = function(event) { … };
  20. 20. DEMO: Let’s Code with IndexedDB
  21. 21. Where IndexedDB Shines? • Data driven scenarios • As a hybrid application database • Combined with service workers • Or for any other offline scenarios
  22. 22. Combining IndexedDB and Service Workers • IndexedDB is currently the only way to store data in service workers secanrio • Combining Cache API and IndexedDB in service worker can satisfy PWA offline guidelines
  23. 23. Guidelines for Storing Data in Service Worker Scenario Cache API • Static resources IndexedDB • Dynamic data (JSON) { “id”: “1”, “name”: “name”, “price”: “20” }
  24. 24. Storing Data Locally App Network IndexedDB Cache JSON Resources
  25. 25. Working with Service Workers Events • When service worker activates • Create the database if needed var db; function createDB() { var request = indexedDB.open(‘dbName’, 1); /// wire into upgradeneeded event and create the db } self.addEventListener('activate', function(event) { event.waitUntil(createDB()); });
  26. 26. Working with Service Workers Events – Cont. • When service worker installs • Cache resources function cacheResources() { return caches.open('cacheV1').then(function(cache) { return cache.addAll([ … ]); // array of resource urls }); } self.addEventListener('install', function(event) { event.waitUntil(cacheResources()); });
  27. 27. Offline Scenarios App Network IndexedDB Cache JSON Resources
  28. 28. Demo: Storing Data in Service Worker
  29. 29. Syncing To The Server • Background sync and periodic background sync • Sync data when there is connectivity or periodicly • Non standard – available only in Chrome • The online/offline events and navigator.onLine property
  30. 30. Online/Offline events Example window.addEventListener(‘DOMContentLoaded', function() { function syncIfNeeded(event) { // implement } function switchToOffline(event) { // implement } window.addEventListener('online’, syncIfNeeded); window.addEventListener('offline’, switchToOffline); });
  31. 31. Summary • IndexedDB is a full blown database in your app’s front-end • It can help you to persist your front-end data • IndexedDB is suitable for offline scenarios
  32. 32. Resources • IndexedDB on MDN - http://mzl.la/1u1sngQ • Free online PWA course - https://developers.google.com/web/ilt/pwa/ • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
  33. 33. Thank You!

×