Progressive Web Apps - The Future

Transcript

1. Progressive Web Apps
   (The future is here)
   

   View Slide

2. @r31gN_
   JS Instructor, TLM
   GDE
   https://krak3n.co
   

   View Slide

3. 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)
   

   View Slide

4. Native vs. Web
   

   View Slide

5. “Google's Progressive Web Apps
   are blurring the lines between
   apps and the mobile web.”
   Business Insider
   

   View Slide

6. PWA Introduction
   

   View Slide

7. ● 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
   

   View Slide

8. PWA Characteristics
   

   View Slide

9. 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)
   

   View Slide

10. 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)
    

    View Slide

11. 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)
    

    View Slide

12. Architect your App Shell
    

    View Slide

13. 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
    

    View Slide

14. 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.)
    

    View Slide

15. Top bar
    Container
    

    View Slide

16. Content
    

    View Slide

17. Benefits of the App Shell
    ● Reliable performance that is consistently fast
    ● Native-like interactions
    ● Economical use of data
    

    View Slide

18. Moving on to Service Workers
    

    View Slide

19. ● 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
    

    View Slide

20. Installing
    Activated Error
    Idle
    Fetch
    Terminated
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. 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
    

    View Slide

25. The Web App Manifest
    

    View Slide

26. 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
    

    View Slide

27. View Slide

28. Push Notifications
    

    View Slide

29. 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
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. PRPL pattern
    

    View Slide

34. app.html
    list.html detail.html
    index.html
    list deps shared detail deps
    

    View Slide

35. app.html
    list.html detail.html
    index.html
    list deps shared detail deps
    fragment bundle fragment bundle
    shell bundle
    

    View Slide

36. 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
    

    View Slide

37. Measure & Debug
    

    View Slide

38. View Slide

39. Conclusions
    

    View Slide

40. 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!
    

    View Slide

41. Keep on smiling because you
    are the most beautiful people
    when you do.
    

    View Slide

42. Thank you!
    @r31gN_
    

    View Slide