Offline Storage: Build secure, offline-first apps

Offline Storage: Build secure, offline-first apps

• 1.
  Offline Storage Build secure,offline-first apps September 2019
• 2.
  Housekeeping Items This webinaris being recorded The presentation will be about 50 minutes All registrants will receive a link to the on-demand recording following the event You can submit questions to the speakers during the live event using the Q&A panel
• 3.
  Today’s Presenters Max Lynch CEO/ @MaxLynch Matt Netkow Head of DevRel / @dotNetkow [email protected]
• 4.
  Agenda Ionic Overview Storage SolutionChecklist Storage Solution Options Introducing Ionic Offline Storage Demo! Summary Q&A
• 5.
  Ionic Framework Mobile-ready UIlibrary that works everywhere: any platform, any device, any framework. ➔ Build for iOS, Android, Electron, PWAs, Web ➔ One codebase across all platforms ➔ Use basic web skills: HTML, JS, CSS ➔ Full access to Native APIs
• 6.
  Hybrid Architecture HTML, CSS,JavaScript Runs in a “browser” WebView Wrapped in native app shell Access device capabilities via plugins Native runtime: Cordova or Capacitor Deploy to App Stores, Desktop, and Web (PWA)
• 7.
  Storage Solution Checklist 1.Mobile, desktop, and web support 2. Secured on user devices via strong encryption 3. Fast, reliable offline access 4. Quick and easy deployment 5. Data Sync 6. Advanced query support 7. Company backed and supported
• 8.
  LocalStorage E X AM P L E localStorage.setItem(“name”, “Max”); const name = localStorage.getItem(“name”); localStorage.removeItem(“name”); Mobile, desktop, and web support Secured on user devices via strong encryption Fast, reliable offline access Quick and easy deployment Data Sync Advanced query support Company backed and supported Simple key-value pairs. Strings only.
• 9.
  WebSQL Mobile, desktop, andweb support Secured on user devices via strong encryption Fast, reliable offline access Quick and easy deployment Data Sync Advanced query support Company backed and supported database.transaction(function(tx) { tx.executeSql( 'INSERT INTO tasks (id, text) values (?, ?)', [task.id, task.text]); }); Relational, SQL database. Deprecated in 2010. E X A M P L E
• 10.
  IndexedDB Mobile, desktop, andweb support Secured on user devices via strong encryption Fast, reliable offline access Quick and easy deployment Data Sync Advanced query support Company backed and supported Transactional, NoSQL database. Objects/Files/Blobs. E X A M P L E // Save image blob transaction.objectStore("elephants").put( blob, "image"); // Retrieve the file that was just stored transaction.objectStore("elephants").get( "image").onsuccess = function (event) { var imageFile = event.target.result; }
• 11.
  E X AM P L E SQLite Mobile, desktop, and web support Secured on user devices via strong encryption Fast, reliable offline access Quick and easy deployment Data Sync Advanced query support Company backed and supported this.sqlite.create({ name: 'data.db', location: 'default' }) .then((db: SQLiteObject) => { db.executeSql( 'create table danceMoves(name VARCHAR(32))', []) .then(() => console.log('Executed SQL')) .catch(e => console.log(e)); }) .catch(e => console.log(e)); Transactional, SQL database. File-based.
• 12.
  Store, access, andmanage data online and offline, with built-in security and blazing-fast performance. ➔ On-device data encryption ➔ Powerful NoSQL query engine ➔ (Optional) Ready to integrate with Couchbase Server ➔ Built and supported by Ionic
• 13.
  E X AM P L E Mobile, desktop, and web* support Secured on user devices via strong encryption Fast, reliable offline access Quick and easy deployment Data Sync Advanced query support Company backed and supported * Coming soon const query = QueryBuilder.select( SelectResult.property('name'), SelectResult.property('description')) .from(DataSource.database(this.database)) .orderBy(Ordering.property('name')); const ret = await query.execute(); const result = await ret.allResults(); Secure, offline-first NoSQL database.
• 14.
  D E MO Building an advanced search experience
• 15.
  Storage Options Summary LocalStorage:Simple, key-value pairs. Small bits of data. Web SQL: Deprecated. Don’t use! IndexedDB: NoSQL. Fast, store all types of data. SQLite: SQL. Fast, reliable. Mobile/desktop only. Ionic Offline Storage: NoSQL. Fast, reliable, secure.
• 16.
  Powerful Query EngineOn-deviceencryptionConnect & sync data Secure and offline
• 17.
  Bonus for CouchbaseCustomers Additional cloud sync features powered by Couchbase. ➔ Cloud Data Sync with Couchbase Server & Sync Gateway ➔ Data Replication ➔ Conflict Resolution ➔ Delta Sync
• 18.
  Resources Offline Storage productpage: https://ionicframework.com/offline-storage Documentation: https://ionicframework.com/docs/enterprise/offline-storage Demo App: https://github.com/ionic-team/demo-offlinestorage-search Couchbase Mobile: https://www.couchbase.com/products/mobile Couchbase Lite docs: http://docs.couchbase.com/couchbase-lite/2.6/index.html Sync Gateway docs: https://docs.couchbase.com/sync-gateway/2.6/index.html
• 19.
  Q&A Max Lynch CEO /@MaxLynch Matt Netkow Head of Dev Rel / @dotNetkow [email protected] Questions? ➔ [email protected]