Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going "Offline First"

Going "Offline First"

This talk was about how to create an "Offline First" Progressive Web Application.

For the Google Progressive Web Apps Roadshow in Sub-Saharan Africa (Nairobi and Lagos)

Ire Aderinokun

August 18, 2016
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. • Ire Aderinokun • UI Designer and Front-End Developer •

    Head of Technology, Big Cabal • Google Developer Expert (Web Technologies)
  2. The Steps 1. Architect the App Shell 2. Implement the

    App Shell 3. Start with a “Fast First” Load 4. Use Service Workers to Pre-Cache the App Shell 5. Use Service Workers to Cache Fetched Data 6. Support Native Integration 7. Deploy to a Secure Host (and Celebrate ) 8. Audits and Testing
  3. Designing an App Shell • What needs to be on

    the screen immediately? • What other UI components are key to the application? • What supporting resources are needed for the application?
  4. The Components • The HTML — Should include the key

    components of the application that are repeated on each visit • The CSS — Styles for the key components • The JavaScript — Scripts for UI Components (e.g. slide-out navigation) and scripts for main application logic
  5. Store Data Locally with IndexedDB IndexedDB is a low-level API

    for client-side storage of significant amounts of structured data • JavaScript-based object-oriented • Asynchronous operations • Global storage limit of 50% of free disk space (More about storage limits - https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_evicti on_criteria)
  6. What is a Service Worker? A service worker is a

    script that runs in the background that can provide features like intercepting and handling fetch requests, background sync, push notifications and more.
  7. Prepare Assets for Production • Minify HTML • Concatenate and

    minify JavaScript • Minify CSS (and optionally inline Critical CSS)
  8. Choose a Secure Host • Github Pages — Free, Open

    Source • Firebase Hosting — Free, Closed Source, Easy HTTPS with Custom Domain Or just get the certificate - • LetsEncrypt.org
  9. Lighthouse Auditing and performance metrics for Progressive Web Apps •

    Chrome Extension - https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefeh nmjammfjpmpbjk • CLI - npm install -g GoogleChrome/lighthouse
  10. The Steps 1. Architect the App Shell 2. Implement the

    App Shell 3. Start with a “Fast First” Load 4. Use Service Workers to Pre-Cache the App Shell 5. Use Service Workers to Cache Fetched Data 6. Support Native Integration 7. Deploy to a Secure Host (and Celebrate ) 8. Audits and Testing