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

Progressive Web Applications (PWA) and the Offline Work of Web Applications

Progressive Web Applications (PWA) and the Offline Work of Web Applications

PWA and the Offline Work of Web Applications (RU)

Vladislav Kotelnikov,
Software Developer, Exactpro

Dev Meetup
7 February 2020, Kostroma

Video (RU): https://youtu.be/wks-ui5D8MM

To learn more about Exactpro, visit our website https://exactpro.com/

Follow us on
LinkedIn https://www.linkedin.com/company/exactpro-systems-llc
Twitter https://twitter.com/exactpro
Facebook https://www.facebook.com/exactpro/
Instagram https://www.instagram.com/exactpro/

Subscribe to Exactpro Vimeo channel https://vimeo.com/exactpro
Subscribe to Exactpro YouTube channel https://www.youtube.com/c/exactprosystems

5206c19df417b8876825b5561344c1a0?s=128

Exactpro
PRO

February 07, 2020
Tweet

Transcript

  1. Build Software to Test Software exactpro.com Progressive Web Applications 7th

    February 2020 Vladislav Kotelnikov
  2. 2 Build Software to Test Software exactpro.com Progressive Web Applications

  3. 3 Build Software to Test Software exactpro.com Modern web-application Service

    Workers
  4. 4 Build Software to Test Software exactpro.com 1. Fast and

    reliable 2. “Installability” 3. Native-like UX 4. Offline-first 5. Moblie-first Progressive Web Applications
  5. 5 Build Software to Test Software exactpro.com Yet another Electron?

  6. 6 Build Software to Test Software exactpro.com Web app manifest

  7. 7 Build Software to Test Software exactpro.com Web app manifest

  8. 8 Build Software to Test Software exactpro.com Web app manifest

  9. 9 Build Software to Test Software exactpro.com Web app manifest

  10. 10 Build Software to Test Software exactpro.com SPA load timeline

    Time JS bundle load start Render start (First Meaningful Paint) Render start (First Paint) Render start (First Contentful Paint) Network Time JS Time or native-like “Splash Screen”
  11. 11 Build Software to Test Software exactpro.com • JS script

    • No access to DOM • Handling network requests • Managing network cache • Push-notifications • Background sync • Requires HTTPS to run Service Worker to the rescue!
  12. 12 Build Software to Test Software exactpro.com Service Worker basic

    usage
  13. 13 Build Software to Test Software exactpro.com Service Worker basic

    usage
  14. 14 Build Software to Test Software exactpro.com Service Worker basic

    usage
  15. 15 Build Software to Test Software exactpro.com to the rescue!

  16. 16 Build Software to Test Software exactpro.com Cache First </>

    Page Network Service Worker Cache 1 3 2 4
  17. 17 Build Software to Test Software exactpro.com Network Network First

    </> Page Service Worker 1 3 2 4 Cache
  18. 18 Build Software to Test Software exactpro.com Cache Only </>

    Page Service Worker Cache 1 2 3
  19. 19 Build Software to Test Software exactpro.com Network Network Only

    </> Page Service Worker 1 2 3
  20. 20 Build Software to Test Software exactpro.com Stale While Revalidate

    Network </> Page Service Worker 1 2 4 3 Cache 5
  21. 21 Build Software to Test Software exactpro.com SPA load timeline

    with cached resources Time JS bundle load start Render start (First Meaningful Paint) Render start (First Paint) Render start (First Contentful Paint) Network Time JS Time
  22. 22 Build Software to Test Software exactpro.com • SSR and

    hybrid render • PerformanceObserver API for performance metrics • Network Information API (Chrome 61) • Reporting API Improving performance: further steps
  23. 23 Build Software to Test Software exactpro.com Thanks!