Progressive Web Apps

An Introduction to PWA

Transcript

1. Max Böck // @mxbck // mxb.at
   Progressive Web Apps
   

   View Slide

2. Top 500 Apps vs. Top 500 Mobile Websites
   Source: comScore Mobile App Report, U.S., Age 18+, June 2017
   

   View Slide

3. Advantages of PWAs
   ● Better Re-Engagement
   ● Discoverable (Open App Stores)
   ● Installable on Home Screen
   ● Better Search Ranking
   ● Connectivity Independent
   ● Platform Independent
   

   View Slide

4. PWAs don’t have to be
   Applications”
   “
   

   View Slide

5. PWAs don’t have to be
   Single Page JS Apps
   

   View Slide

6. PWAs are not a
   Google / Android thing
   

   View Slide

7. Manifest File
   

   View Slide

8. View Slide

9. View Slide

10. Manifest File
    HTTPS
    

    View Slide

11. https://letsencrypt.org
    

    View Slide

12. Manifest File
    HTTPS
    Service Worker
    

    View Slide

13. Service Worker
    

    View Slide

14. View Slide

15. Offline
    Access
    Push
    Notifications
    Background
    Sync
    

    View Slide

16. Service Worker Support
    shipped shipped shipped shipped
    currently in
    development
    currently in
    development
    Source: https://jakearchibald.github.io/isserviceworkerready, September 2017
    

    View Slide

17. https://workboxjs.org
    

    View Slide

18. Google Lighthouse
    

    View Slide

19. View Slide

20. View Slide

21. Any web project can
    and should be a PWA.
    

    View Slide

22. Thank you! Max Böck
    @mxbck
    https://mxb.at
    

    View Slide