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

Progressive Web Apps - The Future

Progressive Web Apps - The Future


May 11, 2017

More Decks by r31gN_

Other Decks in Technology


  1. Progressive Web Apps (The future is here)

  2. @r31gN_ JS Instructor, TLM GDE https://krak3n.co

  3. Mobile Landscape • Mobile traffic surpassed desktop traffic • Mobile

    phone internet user penetration worldwide is at 52.7% (in US, at 75.1%) • App usage dominates browser usage in mobile landscape (90% of the time spent in apps)
  4. Native vs. Web

  5. “Google's Progressive Web Apps are blurring the lines between apps

    and the mobile web.” Business Insider
  6. PWA Introduction

  7. • The best of the web and the best of

    apps • No install required • Loads quickly, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience PWA in a nutshell
  8. PWA Characteristics

  9. PWA Characteristics • Progressive (progressive enhancement used throughout) • Discoverable

    (easily discovered by search engines) • Linkable (it’s the web, linkable by definition) • Responsive (UI fits device’s screen size) • App-like (looks and interacts like a native app)
  10. PWA Characteristics • Connectivity independent (offline first + cache via

    SW) • Re-engageable (engage users through PN) • Installable (install to device’s home screen) • Fresh (always get the latest data) • Secure (always served via HTTPS)
  11. PWA Characteristics • Low friction (just use it) • Just

    web (HTML/CSS/JS) • Fast (keep the experience smooth) • Instant loading (SW FTW!) • Shiny future (more things to come)
  12. Architect your App Shell

  13. What is the App Shell? • The app's shell is

    the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app. • Separates the core application infrastructure and UI from the data • After the first load, the app shell related resources are cached via SW to local device
  14. Design the App Shell • What needs to be on

    screen immediately? • What other UI components are key to our app? • What supporting resources are needed for the app shell? (e.g: images, JS, styles, etc.)
  15. Top bar Container

  16. Content

  17. Benefits of the App Shell • Reliable performance that is

    consistently fast • Native-like interactions • Economical use of data
  18. Moving on to Service Workers

  19. • A script that your browser runs in the background

    • It includes features like push notifications and background sync • The ability to intercept network requests + managing a cache of responses SW in a nutshell
  20. Installing Activated Error Idle Fetch Terminated

  21. None
  22. None
  23. None
  24. SW summary • Works on HTTPS only (avoid man in

    the middle attacks) • Allows you to manipulate cache (via multiple strategies) • Runs in background, in a separate thread • Doesn’t have access to DOM • Doesn’t control origin page on first load • Only one SW active at a single time
  25. The Web App Manifest

  26. Web App Manifest in a nutshell • Simple JSON file

    • Control how your app appears to the user, direct what the user can launch, and define its appearance at launch
  27. None
  28. Push Notifications

  29. Push Notifications in a nutshell • Web Push Notifications allow

    users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, relevant content • Push is invoked when a server supplies information to a SW • A notification is the action of a SW or web page script showing information to a user
  30. None
  31. None
  32. None
  33. PRPL pattern

  34. app.html list.html detail.html index.html list deps shared detail deps

  35. app.html list.html detail.html index.html list deps shared detail deps fragment

    bundle fragment bundle shell bundle
  36. PRPL summary • Push critical resources for the initial URL

    route. • Render initial route • Pre-cache remaining routes • Lazy-load and create remaining routes on demand
  37. Measure & Debug

  38. None
  39. Conclusions

  40. Conclusions • The web is definitely closer to mobile (they

    can compete) • We have advancements in the platform itself (SW, HTTP/2) and in the tools we use to build apps • We have come up with new strategies and new architectures (App Shell, PRPL) • More ideas yet to try but, for web apps, the future is already here!
  41. Keep on smiling because you are the most beautiful people

    when you do.
  42. Thank you! @r31gN_