Offline First Web Development

Daniel Sauble

• Publisher: Packt Publishing
• Year: 2015
• eBook ISBN: 9781785884573
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

Design and implement a robust offline app experience using Sencha Touch and PouchDB

About This Book

• Understand the design principles behind a well-designed offline experience
• Create the illusion of being online when you're really offline
• Use common libraries such as Sencha Touch and PouchDB to enhance the offline experience of mobile apps

Who This Book Is For

Do you want to make your app experience more robust and delightful? Are you eager to write apps that cater to a wider audience, not just the Silicon Valley crowd? Do you need to persuade your peers that offline-first is a worthwhile development paradigm? If your answer to all or any one of these questions is yes, then this is the book is for you. Some previous coding and command-line experience would be useful, but is not required.

What You Will Learn

• Design the behavior of the app, taking offline, online, and the transition between those two states into account
• Seamlessly implement the offline/online experience that you've designed using Sencha Touch and PouchDB
• Show the user what's happening under the hood with online/offline indicators and Good Mobile Messaging
• Employ various strategies to cope with unreliable network conditions
• Help the user resolve conflicts related to the "split-brain" problem
• Choose intelligent defaults based on usage of the app
• Use point-to-point networking to partially overcome a lack of Internet connectivity

In Detail

When building mobile apps, it's easy to forget about the moments when your users lack a good Internet connection. Put your phone in airplane mode, open a few popular apps, and you'll quickly see how they handle being offline. From Twitter to Pinterest to Apple Maps, some apps might handle being offline better—but very few do it well. A poor offline experience will result in frustrated users who will abandon your app, or worse, turn to your competitor's apps!

Expert or novice, this book will teach you everything you need to know about designing and building a rigorous offline app experience. By putting the offline experience first, you'll have a solid foundation to build upon, avoiding the unnecessary stress and frustration of trying to retrofit offline capabilities into your finished app. This basic principle, designing for the worst-case scenario, could save you countless hours of wasted effort.

Style and approach

This book adopts an iterative approach to designing and building a mobile app, where each chapter builds on the one before, resulting in a fully-functional app that demonstrates the concepts taught, each one of which is explained through the use of an example.

Offline First Web Development

---

Table of Contents

Offline First Web Development

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. The Pain of Being Offline

The offline paradigm

Developing for a worst-case scenario

Going on an off-the-grid vacation

Living in a third-world country

Commuting on public transportation

Working on a Wi-Fi only device

Sharing files between mobile devices

Streaming a high-definition video from YouTube

Online shopping with your phone

Getting work done at a conference

Principles of a good offline design

Making the case to yourself

Making the case to others

Convincing other developers

Convincing other designers

Convincing your boss or the upper-level management

Summary

2. Building a To-do App

Configuring the development tools

A text editor

A browser

A command line

Homebrew

npm

Java

Arranging your workspace

Configuring Sencha Touch

Creating a Git repository

Designing the offline experience

What do users need from this app and why?

How will people accomplish their goals using the app?

Items should display while offline

Keep all my devices in sync

Don't keep me waiting

Sharing with friends should be bulletproof

Safeguard my data

What does the app look like, roughly?

A list of to-dos

Creating a new item

Editing an existing item

Creating a skeleton application

Generating files with Sencha cmd

Creating the main view

Adding the list view

Adding the create view

Adding the edit view

Committing your changes

Building an offline to-do app

Breaking the views into their own files

Connecting the views together

Creating a store to populate the list view

Adding buttons to each to-do item

Making the buttons functional

Deploying the app to a phone

Comparing and contrasting with the design principles

How does it compare?

Where does it need to improve?

Using the app as a baseline for the future

Summary

3. Designing Online Behavior

Designing the online workflow

Keep all my devices in sync

Sharing with friends should be bulletproof

Safeguard my data

The online/offline transition

Being informative about what can or cannot be done

Graceful degradation

Recovering when things go horribly wrong

Example scenarios

Susan creates a to-do item while offline

Susan tries to share a to-do item while offline

Susan synchronizes her lists over a weak connection

Susan adds a video attachment over a weak connection

Susan adds multiple to-do items while offline

Adding an online data store

Creating a Cloudant account

Data structures and validation

Writing a validation function

Testing the validation function

Implementing image support

Installing the Cordova camera plugin

Creating a custom image component

Enabling image support

Implementing mapping support

Creating a custom map component

Adding logic to the view

Wiring up the controller

Building the map view

Adding drilldown support to the controller

Wiring up the map view

Refactoring the map views

Comparing and contrasting with the design principles

Where does it need to improve?

Summary

4. Getting Online

Offline databases

Sencha Touch

PouchDB

The remotestorage.io library

Hoodie

Connecting to our Web API

Adding PouchDB to the app

Enabling live synchronization

Update PouchDB when changes occur

Tweaking how the store is used

Sharing lists between devices

Adding online-only features

User account management

Generating credentials

Expanding the stores

Creating the sign in view

Updating the controller references

Adding the handler functions

Tweaking the item store

Multiple lists

Refactoring our views

Implementing new views

Creating the backing store

Removing sync logic from the item store

Giving the list store a model

Adding logic to the controller

Sharing lists

Creating share views

Modifying the existing views

Adding a model

Adding a store

Modifying the list store

Adding logic to the controller

Comparing and contrasting with the design principles

Where does it need to improve?

Summary

5. Be Honest about What's Happening

Exposing the system state to the user

Creating an online/offline indicator

Adding a global toolbar

Adding indicator logic

Displaying error messages

Building trust through up front communication

Predicting the future

Writing a predictive algorithm

Is the location accurate enough?

Creating a seed location

Adding additional points

Updating the existing points

Ensuring that the velocity is significant enough

Predicting future connectivity

Setting our online/offline state

Creating the position store

Letting users provide direction

Letting the users know when encountering turbulence

Displaying messages at regular intervals

Creating a timestamp when the sync starts

Getting user guidance

Adding modal to the app

Showing the modal once per sync

Staying functional in bad network conditions

Creating new databases and users

Refactoring the Main controller

Updating the Item store

Defining new databases

Retrieving the data from the databases

Flagging the databases for sync

Piecing items together from multiple databases

Splitting items apart

Removing the individual data items

Updating the individual data items

Updating the list store

Creating a pointer to the metadata database

Flagging the databases when they change

Updating models and views

Wiring up the Sync controller

Initializing the databases

Tweaking the connection logic

Changing how the syncing works

Prioritizing the synchronization

Sending the follow-up communication

Comparing and contrasting with the design principles

Where does it need to improve?

Summary

6. Be Eventually Consistent

What is a split-brain?

A collective agreement

A self-appointed dictator

Refactoring the item store

Restricting sync to the user's lists

Only set the data if needed

Refactoring the event handlers

The onLoad method

The onAddRecords method

The onRemoveRecords method

The onUpdateRecord method

Implementing conflict detection

Getting PouchDB to return conflicts

Attaching conflicts to the item model

Attaching the current revision to the item model

Ch...

Table of contents

• Offline First Web Development