You are previewing Offline First Web Development.
O'Reilly logo
Offline First Web Development

Book Description

Design and build robust offline-first apps for exceptional user experience even when an internet connection is absent

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.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Offline First Web Development
      1. Table of Contents
      2. Offline First Web Development
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. The Pain of Being Offline
        1. The offline paradigm
        2. Developing for a worst-case scenario
          1. Going on an off-the-grid vacation
          2. Living in a third-world country
          3. Commuting on public transportation
          4. Working on a Wi-Fi only device
          5. Sharing files between mobile devices
          6. Streaming a high-definition video from YouTube
          7. Online shopping with your phone
          8. Getting work done at a conference
        3. Principles of a good offline design
        4. Making the case to yourself
        5. Making the case to others
          1. Convincing other developers
          2. Convincing other designers
          3. Convincing your boss or the upper-level management
        6. Summary
      9. 2. Building a To-do App
        1. Configuring the development tools
          1. A text editor
          2. A browser
          3. A command line
          4. Homebrew
          5. npm
          6. Java
          7. Arranging your workspace
        2. Configuring Sencha Touch
        3. Creating a Git repository
        4. Designing the offline experience
          1. What do users need from this app and why?
          2. How will people accomplish their goals using the app?
            1. Items should display while offline
            2. Keep all my devices in sync
            3. Don't keep me waiting
            4. Sharing with friends should be bulletproof
            5. Safeguard my data
          3. What does the app look like, roughly?
            1. A list of to-dos
            2. Creating a new item
            3. Editing an existing item
        5. Creating a skeleton application
          1. Generating files with Sencha cmd
          2. Creating the main view
          3. Adding the list view
          4. Adding the create view
          5. Adding the edit view
          6. Committing your changes
        6. Building an offline to-do app
          1. Breaking the views into their own files
          2. Connecting the views together
          3. Creating a store to populate the list view
          4. Adding buttons to each to-do item
          5. Making the buttons functional
          6. Deploying the app to a phone
        7. Comparing and contrasting with the design principles
          1. How does it compare?
          2. Where does it need to improve?
          3. Using the app as a baseline for the future
        8. Summary
      10. 3. Designing Online Behavior
        1. Designing the online workflow
          1. Keep all my devices in sync
          2. Sharing with friends should be bulletproof
          3. Safeguard my data
        2. The online/offline transition
          1. Being informative about what can or cannot be done
          2. Graceful degradation
          3. Recovering when things go horribly wrong
          4. Example scenarios
            1. Susan creates a to-do item while offline
            2. Susan tries to share a to-do item while offline
            3. Susan synchronizes her lists over a weak connection
            4. Susan adds a video attachment over a weak connection
            5. Susan adds multiple to-do items while offline
        3. Adding an online data store
          1. Creating a Cloudant account
          2. Data structures and validation
          3. Writing a validation function
          4. Testing the validation function
        4. Implementing image support
          1. Installing the Cordova camera plugin
          2. Creating a custom image component
          3. Enabling image support
        5. Implementing mapping support
          1. Creating a custom map component
          2. Adding logic to the view
          3. Wiring up the controller
            1. Building the map view
            2. Adding drilldown support to the controller
            3. Wiring up the map view
            4. Refactoring the map views
        6. Comparing and contrasting with the design principles
          1. Where does it need to improve?
        7. Summary
      11. 4. Getting Online
        1. Offline databases
          1. Sencha Touch
          2. PouchDB
          3. The remotestorage.io library
          4. Hoodie
        2. Connecting to our Web API
          1. Adding PouchDB to the app
          2. Enabling live synchronization
          3. Update PouchDB when changes occur
          4. Tweaking how the store is used
          5. Sharing lists between devices
        3. Adding online-only features
          1. User account management
            1. Generating credentials
            2. Expanding the stores
            3. Creating the sign in view
            4. Updating the controller references
            5. Adding the handler functions
            6. Tweaking the item store
          2. Multiple lists
            1. Refactoring our views
            2. Implementing new views
            3. Creating the backing store
            4. Removing sync logic from the item store
            5. Giving the list store a model
            6. Adding logic to the controller
          3. Sharing lists
            1. Creating share views
            2. Modifying the existing views
            3. Adding a model
            4. Adding a store
            5. Modifying the list store
            6. Adding logic to the controller
        4. Comparing and contrasting with the design principles
          1. Where does it need to improve?
        5. Summary
      12. 5. Be Honest about What's Happening
        1. Exposing the system state to the user
          1. Creating an online/offline indicator
            1. Adding a global toolbar
            2. Adding indicator logic
          2. Displaying error messages
        2. Building trust through up front communication
        3. Predicting the future
          1. Writing a predictive algorithm
            1. Is the location accurate enough?
            2. Creating a seed location
            3. Adding additional points
            4. Updating the existing points
            5. Ensuring that the velocity is significant enough
            6. Predicting future connectivity
            7. Setting our online/offline state
            8. Creating the position store
        4. Letting users provide direction
          1. Letting the users know when encountering turbulence
            1. Displaying messages at regular intervals
            2. Creating a timestamp when the sync starts
          2. Getting user guidance
            1. Adding modal to the app
            2. Showing the modal once per sync
        5. Staying functional in bad network conditions
          1. Creating new databases and users
          2. Refactoring the Main controller
          3. Updating the Item store
            1. Defining new databases
            2. Retrieving the data from the databases
            3. Flagging the databases for sync
            4. Piecing items together from multiple databases
            5. Splitting items apart
            6. Removing the individual data items
            7. Updating the individual data items
          4. Updating the list store
            1. Creating a pointer to the metadata database
            2. Flagging the databases when they change
          5. Updating models and views
          6. Wiring up the Sync controller
            1. Initializing the databases
            2. Tweaking the connection logic
            3. Changing how the syncing works
            4. Prioritizing the synchronization
          7. Sending the follow-up communication
        6. Comparing and contrasting with the design principles
          1. Where does it need to improve?
        7. Summary
      13. 6. Be Eventually Consistent
        1. What is a split-brain?
          1. A collective agreement
          2. A self-appointed dictator
        2. Refactoring the item store
          1. Restricting sync to the user's lists
          2. Only set the data if needed
          3. Refactoring the event handlers
            1. The onLoad method
            2. The onAddRecords method
            3. The onRemoveRecords method
            4. The onUpdateRecord method
        3. Implementing conflict detection
          1. Getting PouchDB to return conflicts
          2. Attaching conflicts to the item model
          3. Attaching the current revision to the item model
          4. Checking the revision before loading the data
        4. Implementing the conflict resolution
          1. Adding the supporting methods
          2. Adding fields to the edit views
          3. Adding controller logic
          4. Trying it out
          5. Conflict resolution for maps and images
        5. Comparing and contrasting with the design principles
          1. Where does it need to improve?
        6. Summary
      14. 7. Choosing Intelligent Defaults
        1. Low-hanging fruit
          1. Error messages
          2. Empty states
          3. Restoring the last view
            1. Creating a store and model
            2. Specifying which pages to restore
            3. Loading the page when the app starts
        2. Cache limits
        3. List frequency
        4. Clearing the cache
          1. Google Chrome
          2. Mozilla Firefox
          3. Apple Safari
          4. Microsoft Edge
        5. Usage scenarios
          1. Going on an off-the-grid vacation
          2. Living in a third-world country
          3. Commuting on public transportation
          4. Working on a Wi-Fi only device
          5. Sharing files between mobile devices
          6. Streaming high-definition videos from YouTube
          7. Online shopping with your phone
          8. Getting work done at a conference
        6. Comparing and contrasting with the design principles
          1. Where does it need to improve?
        7. Summary
      15. 8. Networking While Offline
        1. What it means to be offline
        2. Device support
          1. Bluetooth
          2. NFC
          3. Peer-to-peer Wi-Fi
        3. Platform-independent libraries
          1. USB
          2. Bluetooth
          3. NFC
          4. Wi-Fi P2P
          5. USB
        4. Synchronization over Wi-Fi
          1. Setting up the P2P connection
          2. Assigning an IP address to each device
            1. Testing the connection
          3. Implement support for offline syncing
        5. Making the setup less painful
          1. Multiprotocol sync
          2. Services on a mobile
          3. Zero configuration networking
          4. Automatic switching to offline mode
        6. Summary
      16. 9. Testing and Measuring the UX
        1. Manual testing
          1. Creating a to-do item
          2. Adding and removing collaborators
          3. The bandwidth notifications
          4. Cleaning up
        2. Testing frameworks
          1. Bryntum Siesta
            1. Installing Siesta
            2. Writing a test
        3. Before and after
          1. Before – offline only
          2. After – offline plus online
        4. Future improvements
          1. Conflict resolution
          2. The cache size limits
          3. Account management
          4. Offline Maps
          5. Granular sync indicators
          6. Offline sync
        5. Summary
      17. A. References
        1. Chapter 1
        2. Chapter 2
        3. Chapter 3
        4. Chapter 4
        5. Chapter 6
        6. Chapter 7
        7. Chapter 8
        8. Chapter 9
      18. Index