This slide deck was used during a live walkthrough of Offline Storage, a new solution that makes it easy to store, access, and manage data online and offline, across mobile and desktop, with built-in security and blazing-fast performance.

1. Offline Storage
Build secure, offline-first apps
September 2019

2. Housekeeping Items
This webinar is 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
matt.netkow@ionicframework.com

4. Agenda
Ionic Overview
Storage Solution Checklist
Storage Solution Options
Introducing Ionic Offline Storage
Demo!
Summary
Q&A

5. Ionic Framework
Mobile-ready UI library 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 A M 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, 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
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, 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
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 A M 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, and manage 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 A M 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 M O
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-device encryptionConnect & sync data Secure and offline

17. Bonus for Couchbase Customers
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 product page: 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
matt.netkow@ionicframework.com
Questions? ➔ sales@ionicframework.com