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

Offline Sync for Progressive Web Apps "Ask Me Anything" at IBM Think

Offline Sync for Progressive Web Apps "Ask Me Anything" 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
    Meet the Experts:
    Offline Sync for
    Progressive Web Apps

    Bradley Holt
    Developer Advocate
    Senior Software Engineer

    View full-size slide

  2. 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 full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

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

    View full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. Apache CouchDB
    PouchDB
    IBM Cloudant

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. https://developer.ibm.com/code/patterns/create-an-offline-first-shopping-list-with-polymer-and-pouchdb/

    View full-size slide

  19. Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Appendix A:
    Multi-User Apps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Cloudant Envoy

    View full-size slide

  23. Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Appendix B:
    Code Examples

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. https://github.com/localForage/localForage

    View full-size slide

  28. https://pouchdb.com/

    View full-size slide

  29. Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Appendix C:
    Browser Support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Think 2018 / March 19, 2018 / © 2018 IBM Corporation
    Appendix D:
    Offline First Community

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

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

    ibm.com

    View full-size slide

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

    View full-size slide