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. 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)
  2. • 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
  3. 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)
  4. 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)
  5. 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)
  6. 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
  7. 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.)
  8. Benefits of the App Shell • Reliable performance that is

    consistently fast • Native-like interactions • Economical use of data
  9. • 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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!