Offline First Web Development

图书信息

作者	Daniel Sauble
出版社	Packt Publishing
ISBN	9781785885662
出版时间	2015-11-20
字数	279.1万
分类	进口书,外文原版书,电脑,网络

读书简介

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 to enhance the offline experience of mobile apps with this comprehensive guide Who This Book Is For Do you want to make your app experience more robust and delightfulAre you eager to write apps that cater to a wider audience, not just the Silicon Valley crowdDo you need to persuade your peers that offline-first is a worthwhile development paradigmIf 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 Convince others that the offline-first paradigm is worth doing Design the behavior of the app, taking offline, online, and the transition between those two states into account Implement the offline/online experience that you’ve designed 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. Try this: put your phone in airplane mode and open a few popular apps to see how they handle being offline. From Twitter to Pinterest to Apple Maps, some apps handle being offline better than others, but very few do it well. A poor offline experience will result in frustrated users who may stop using 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

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