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

Offline Sync for Progressive Web Apps at IBM Think

Offline Sync for Progressive Web Apps at IBM Think

With the introduction of progressive web apps and browser APIs like persistent storage, payments, geolocation and push notifications, it's now possible to build full-featured mobile apps on the web platform. One important aspect of progressive web apps is the concept of building your app to be "offline-first." With an offline-first approach, you first design your app for the most resource-constrained environment. This approach provides a consistent user experience whether the user’s device has no connectivity, limited connectivity or great connectivity. One of the biggest benefits of offline-first apps is that they can be very fast, as they provide zero-latency access to content and data stored directly on the device.

Bradley Holt

March 19, 2018
Tweet

More Decks by Bradley Holt

Other Decks in Programming

Transcript

  1. Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Offline Sync for
    Progressive Web Apps

    Bradley Holt
    Developer Advocate
    Senior Software Engineer

    View Slide

  2. View Slide

  3. Web or
    mobile
    app?
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    iPhone 4 - Bottom View with Bumper by William Hook, on Flickr (CC BY-SA 2.0).

    View Slide

  4. http://gph.is/2dhW35c

    View Slide

  5. Progressive Web Apps
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Provides both the
    discoverability of a
    web app and the
    reliable, fast, and
    engaging user
    experience of a
    native mobile app

    View Slide

  6. https://www.pwastats.com/

    View Slide

  7. https://developers.google.com/web/showcase/2017/twitter

    View Slide

  8. Pokedex.org
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    An offline-capable
    Progressive Web
    App built with
    Service Worker and
    PouchDB
    https://www.pokedex.org/

    View Slide

  9. View Slide

  10. Not just
    offline…
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr (CC BY 2.0).

    View Slide

  11. Reliable, fast, and
    engaging user
    experience—
    regardless of network
    connectivity
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Static Wallpaper by James Spinks, on Flickr (CC BY-SA 2.0).

    View Slide

  12. Zero-latency
    access to
    content & data
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    speed 3 by Monkieyes, on Flickr (CC BY 2.0).

    View Slide

  13. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Offline, Online & ¯\_(ツ)_/¯
    underground by weckgeschnappt_, on Flickr (CC BY 2.0).

    View Slide

  14. The next
    billion people
    on the internet
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    the galaxy by tommy@chau, on Flickr (CC BY 2.0).

    View Slide

  15. Geolocation API
    Network Information API
    IndexedDB
    WebRTC API
    Push API
    Notifications API
    Device Orientation API
    Screen Orientation API
    Permissions API
    Proximity API
    Pointer Lock API
    Vibration API
    Payment Request API
    Battery Status API
    Ambient Light Sensor API
    Service Worker API
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).

    View Slide

  16. Service Workers
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Service Workers
    allow for fine-
    grained control
    over caching of
    content and
    assets, enabling
    cache-first web
    apps
    Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  17. https://caniuse.com/#feat=serviceworkers

    View Slide

  18. Registering a service worker example by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  19. Install and activate a service worker example by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  20. Custom service worker response example by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  21. IndexedDB
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    IndexedDB enables
    app data to be
    stored locally
    within a browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).

    View Slide

  22. https://caniuse.com/#search=indexdb

    View Slide

  23. localForage
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    localForage is a
    polyfill that wraps
    IndexedDB,
    WebSQL, or
    localStorage,
    providing a
    consistent API
    regardless of which
    storage mechanism
    is supported by the
    end user’s browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).

    View Slide

  24. https://github.com/localForage/localForage

    View Slide

  25. Sync
    is
    Hard
    Technological devices designed by D3Images / Freepik .
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation

    View Slide

  26. View Slide

  27. Apache CouchDB
    PouchDB
    IBM Cloudant

    View Slide

  28. “CouchDB’s superpower is sync.
    Sometimes I even try to explain it to
    people by saying, ‘CouchDB isn’t a
    database; it’s a sync engine.’ It’s a
    way of efficiently transferring data
    from one place to another, while
    intelligently managing conflicts and
    revisions. It’s very similar to Git.
    When I make that analogy, the light
    bulb often goes off.”
    Nolan Lawson
    PouchDB & CouchDB: An interview with Nolan Lawson
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    https://blog.couchdb.org/2017/04/04/pouchdb-couchdb-an-interview-with-nolan-lawson/

    View Slide

  29. Offline Sync for
    Progressive
    Web Apps
    PouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    IBM Cloudant

    View Slide

  30. https://pouchdb.com/

    View Slide

  31. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Multi-User
    Apps with
    Hoodie
    http://hood.ie/

    View Slide

  32. View Slide

  33. Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    IBM Cloudant
    PouchDB

    View Slide

  34. Cloudant Envoy

    View Slide

  35. View Slide

  36. Shopping List
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    A series of demo
    Progressive Web
    Apps, hybrid
    mobile apps,
    native mobile
    apps, and a
    desktop app—
    each built using a
    different stack
    https://ibm-watson-data-lab.github.io/shopping-list-demo

    View Slide

  37. https://github.com/ibm-watson-data-lab/shopping-list

    View Slide

  38. Join the
    Offline First
    community
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation

    View Slide

  39. Offline Camp
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    We are building an
    Offline First
    community, one
    campfire at a time.
    Offline Camp has
    visited the Catskills
    of New York, the
    Central Coast of
    California, Berlin,
    and Oregon.

    View Slide

  40. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    offlinefirst.org/chat

    View Slide

  41. View Slide

  42. https://medium.com/offline-camp

    View Slide

  43. Notices and disclaimers
    Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    © 2018 International Business Machines Corporation. No part of this
    document may be reproduced or transmitted in any form without
    written permission from IBM.
    U.S. Government Users Restricted Rights — use, duplication or
    disclosure restricted by GSA ADP Schedule Contract with IBM.
    Information in these presentations (including information relating to
    products that have not yet been announced by IBM) has been reviewed
    for accuracy as of the date of initial publication and could include
    unintentional technical or typographical errors. IBM shall have no
    responsibility to update this information. This document is distributed
    “as is” without any warranty, either express or implied. In no event,
    shall IBM be liable for any damage arising from the use of this
    information, including but not limited to, loss of data, business
    interruption, loss of profit or loss of opportunity. IBM products and
    services are warranted per the terms and conditions of the agreements
    under which they are provided.
    IBM products are manufactured from new parts or new and used parts.
    In some cases, a product may not be new and may have been previously
    installed. Regardless, our warranty terms apply.”
    Any statements regarding IBM's future direction, intent or product
    plans are subject to change or withdrawal without notice.
    Performance data contained herein was generally obtained in a
    controlled, isolated environments. Customer examples are presented as
    illustrations of how those
    customers have used IBM products and the results they may have
    achieved. Actual performance, cost, savings or other results in other
    operating environments may vary.
    References in this document to IBM products, programs, or services
    does not imply that IBM intends to make such products, programs or
    services available in all countries in which IBM operates or does
    business.
    Workshops, sessions and associated materials may have been prepared
    by independent session speakers, and do not necessarily reflect the
    views of IBM. All materials and discussions are provided for
    informational purposes only, and are neither intended to, nor shall
    constitute legal or other guidance or advice to any individual participant
    or their specific situation.
    It is the customer’s responsibility to insure its own compliance
    with legal requirements and to obtain advice of competent legal counsel
    as to the identification and interpretation of any relevant laws and
    regulatory requirements that may affect the customer’s business and
    any actions the customer may need to take to comply with such
    laws. IBM does not provide legal advice or represent or warrant that its
    services or products will ensure that the customer follows any law.

    View Slide

  44. Notices and disclaimers
    continued
    Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Information concerning non-IBM products was obtained from the
    suppliers of those products, their published announcements or other
    publicly available sources. IBM has not tested those products about this
    publication and cannot confirm the accuracy of performance,
    compatibility or any other claims related to non-IBM
    products. Questions on the capabilities of non-IBM products should be
    addressed to the suppliers of those products. IBM does not warrant the
    quality of any third-party products, or the ability of any such third-party
    products to interoperate with IBM’s products. IBM expressly disclaims
    all warranties, expressed or implied, including but not limited to, the
    implied warranties of merchantability and fitness for a purpose.
    The provision of the information contained herein is not intended to, and
    does not, grant any right or license under any IBM patents, copyrights,
    trademarks or other intellectual property right.
    IBM, the IBM logo, ibm.com and [names of other referenced IBM
    products and services used in the presentation] are trademarks of
    International Business Machines Corporation, registered in many
    jurisdictions worldwide. Other product and service names might
    be trademarks of IBM or other companies. A current list of IBM
    trademarks is available on the Web at "Copyright and trademark
    information" at: www.ibm.com/legal/copytrade.shtml.
    .

    View Slide

  45. Thank you
    Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Bradley Holt
    Developer Advocate
    Senior Software Engineer

    ibm.com

    View Slide

  46. Think 2018 / March 19, 2018 / © 2018 IBM Corporation

    View Slide