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

PWWA: Progressive WordPress Web App

Andriy
September 12, 2018

PWWA: Progressive WordPress Web App

Un case study sullo sviluppo di Progressive Web App (PWA) con WordPress. Esempi e best practices su come creare temi offline-first e come aggiungere funzionalità delle PWA a temi esistenti.

Andriy

September 12, 2018
Tweet

More Decks by Andriy

Other Decks in Programming

Transcript

  1. PWWA
    Progressive WordPress Web App
    WP Meetup Milano
    11/09/2018
    Andriy Frankevych

    View full-size slide

  2. Andriy Frankevych
    ● Back end web developer @ facile.it
    ● @alsoknownasdrew on GitHub, Twitter, Telegram etc...
    ● 3+ years of experience with WordPress
    ● https://t.me/webdevhub

    View full-size slide

  3. What is a PWA?

    View full-size slide

  4. PWA ARE:
    Reliable
    ● Load instantly
    ● No downasaur even when offline
    Fast
    ● Respond quickly to user interactions
    ● Smooth animations
    ● No janky transitions
    Try them on https://pwa.rocks/
    Engaging:
    ● Home screen launch
    ● Full screen experience
    ● Access to native features like push
    notifications, payments API(full list on
    https://whatwebcando.today/)

    View full-size slide

  5. PWA are reliable

    View full-size slide

  6. 53%
    of users will abandon your website if it takes longer than 3 seconds to load
    (Google DoubleClick Blog)

    View full-size slide

  7. One of the most popular WP theme metrics

    View full-size slide

  8. Minify and concatenate your assets

    View full-size slide

  9. Deregister everything!

    View full-size slide

  10. Inline critical CSS and load the rest later

    View full-size slide

  11. Inline critical CSS (lazy way)

    View full-size slide

  12. Inline critical CSS

    View full-size slide

  13. Use system font stack

    View full-size slide

  14. Offline first

    View full-size slide

  15. Service Worker
    ● Javascript file executed on a separate thread
    ● Acts like a proxy between your client(browser) and network
    ● Can intercept fetch events
    ● Have access to IndexedDB and Cache API

    View full-size slide

  16. Service Worker Registration

    View full-size slide

  17. Service Worker Installation

    View full-size slide

  18. Fetch event interception

    View full-size slide

  19. Cache API Access

    View full-size slide

  20. Retrieving from cache

    View full-size slide

  21. Google Workbox
    https://developers.google.com/web/tools/workbox/

    View full-size slide

  22. Offline homepage

    View full-size slide

  23. PWA are fast

    View full-size slide

  24. PWA are engaging

    View full-size slide

  25. Launch from home screen

    View full-size slide

  26. Manifest.json

    View full-size slide

  27. A2HS Requirements
    ● The web app is not already installed
    ● The user has interacted with the domain for at least 30 seconds
    ● Includes a web app manifest that includes
    ● Served over HTTPS (required for service workers)
    ● Has registered a service worker with a fetch event handler

    View full-size slide

  28. A2HS Handler

    View full-size slide

  29. PWA are
    Reliable:
    ● Fast load and first contentful and meaningful paint
    ● Website responds with status 200 when offline
    Fast:
    ● Client side Ajax routing
    ● Content transitions and animations on user interaction
    Engaging:
    ● A2HS prompt
    ● Lunch from home and standalone fullscreen experience

    View full-size slide

  30. Thanks!
    Resources:
    ● _S: https://underscores.me/
    ● Gulp.js: https://gulpjs.com/
    ● loadCSS: https://github.com/filamentgroup/loadCSS
    ● Lighthouse: https://developers.google.com/web/tools/lighthouse/
    ● Workbox: https://developers.google.com/web/tools/workbox/
    ● Barba.js: http://barbajs.org/
    ● Favicon generator: https://realfavicongenerator.net/
    ● Firebase Web manifest generator: https://app-manifest.firebaseapp.com/

    View full-size slide