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

PWA - Fastrack to mobile experience

PWA - Fastrack to mobile experience

A brief look at the basics of a PWA

Adrian Moya

November 20, 2018
Tweet

More Decks by Adrian Moya

Other Decks in Programming

Transcript

  1. PWA
    Fastrack to a
    mobile experience

    View full-size slide

  2. Adrian E. Moya G.
    2
    Computer Engineer.
    Software Developer.
    Agile Trainer.
    ▪ http://adrianmoya.com
    [email protected]
    ▪ @adrianmoya

    View full-size slide

  3. Agenda 1. PWA basics
    a. What is a PWA
    b. Service Worker
    c. Manifest File
    2. Angular PWA support
    3

    View full-size slide

  4. WHAT IS
    A PWA?
    5
    Progressive Web Apps are user experiences that have the reach of the web,
    and are:
    Reliable - Load instantly and never show the downasaur, even in uncertain
    network conditions.
    Fast - Respond quickly to user interactions with silky smooth animations and no
    janky scrolling.
    Engaging - Feel like a natural app on the device, with an immersive user
    experience.
    This new level of quality allows Progressive Web Apps to earn a place on the
    user's home screen.

    View full-size slide

  5. 6
    RELIABLE
    Service Workers enable a
    Progressive Web App to
    load instantly, regardless of
    the network state.

    View full-size slide

  6. Service
    Workers
    A service worker, written in JavaScript, is like a client-side
    proxy and puts you in control of the cache and how to
    respond to resource requests. By pre-caching key resources
    you can eliminate the dependence on the network, ensuring
    an instant and reliable experience for your users.
    7

    View full-size slide

  7. 8
    FAST
    53% of users will abandon a
    site if it takes longer than 3
    seconds to load! And once
    loaded, users expect them
    to be fast—no janky
    scrolling or slow-to-respond
    interfaces.

    View full-size slide

  8. 9
    ENGAGING
    Installable and live on the
    user's home screen.
    Immersive full screen
    experience.
    Push notifications.

    View full-size slide

  9. The Manifest
    File
    The web app manifest is a simple JSON file that tells the
    browser about your web application and how it should
    behave when 'installed' on the user's mobile device or
    desktop. Having a manifest is required by Chrome to show
    the Add to Home Screen prompt.
    10

    View full-size slide

  10. Web Push
    Notifications
    11
    Demo at https://adrianmoya.github.io
    Built with OneSignal: a high volume and reliable push
    notification service for websites and mobile applications.

    View full-size slide

  11. ANGULAR PWA
    12

    View full-size slide

  12. 13
    Angular CLI
    Add manifest, configurable
    service worker, icons &
    more.

    View full-size slide

  13. Resources
    14
    PWA
    https://developers.google.com/web/progressive-web-apps/
    Lighthouse:
    https://developers.google.com/web/tools/lighthouse/
    Workbox:
    https://developers.google.com/web/tools/workbox/
    Success:
    https://developers.google.com/web/showcase/
    Service Worker Support:
    https://jakearchibald.github.io/isserviceworkerready/index.html

    View full-size slide

  14. Thank you very much
    for your time
    15
    ▪ http://adrianmoya.com
    [email protected]
    ▪ @adrianmoya

    View full-size slide