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
  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
  3. What is a PWA?

  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/)
  5. PWA are reliable

  6. 53% of users will abandon your website if it takes

    longer than 3 seconds to load (Google DoubleClick Blog)
  7. One of the most popular WP theme metrics

  8. Minify and concatenate your assets

  9. Deregister everything!

  10. Inline critical CSS and load the rest later

  11. Inline critical CSS (lazy way)

  12. Inline critical CSS

  13. Use system font stack

  14. Offline first

  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
  16. Service Worker Registration

  17. Service Worker Installation

  18. Fetch event interception

  19. Cache API Access

  20. Retrieving from cache

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

  22. Offline homepage

  23. PWA are fast

  24. Barba.js

  25. PWA are engaging

  26. Launch from home screen

  27. Manifest.json

  28. <head>...</head>

  29. 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
  30. A2HS Handler

  31. 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
  32. 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/