Offline First Web Development电子书

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

Checking the revision before loading the data

Implementing the conflict resolution

Adding the supporting methods

Adding fields to the edit views

Adding controller logic

Trying it out

Conflict resolution for maps and images

Comparing and contrasting with the design principles

Where does it need to improve?

Summary

7. Choosing Intelligent Defaults

Low-hanging fruit

Error messages

Empty states

Restoring the last view

Creating a store and model

Specifying which pages to restore

Loading the page when the app starts

Cache limits

List frequency

Clearing the cache

Google Chrome

Mozilla Firefox

Apple Safari

Microsoft Edge

Usage scenarios

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 high-definition videos from YouTube

Online shopping with your phone

Getting work done at a conference

Comparing and contrasting with the design principles

Where does it need to improve?

Summary

8. Networking While Offline

What it means to be offline

Device support

Bluetooth

NFC

Peer-to-peer Wi-Fi

Platform-independent libraries

USB

Bluetooth

NFC

Wi-Fi P2P

USB

Synchronization over Wi-Fi

Setting up the P2P connection

Assigning an IP address to each device

Testing the connection

Implement support for offline syncing

Making the setup less painful

Multiprotocol sync

Services on a mobile

Zero configuration networking

Automatic switching to offline mode

Summary

9. Testing and Measuring the UX

Manual testing

Creating a to-do item

Adding and removing collaborators

The bandwidth notifications

Cleaning up

Testing frameworks

Bryntum Siesta

Installing Siesta

Writing a test

Before and after

Before – offline only

After – offline plus online

Future improvements

Conflict resolution

The cache size limits

Account management

Offline Maps

Granular sync indicators

Offline sync

Summary

A. References

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Chapter 6

Chapter 7

Chapter 8

Chapter 9

Index