Progressive Web Apps - The Future

Transcript

1. Progressive Web Apps (The future is here)

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

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)

4. Native vs. Web

5. “Google's Progressive Web Apps are blurring the lines between apps

   and the mobile web.” Business Insider

6. PWA Introduction

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

8. PWA Characteristics

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)

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)

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)

12. Architect your App Shell

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

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

15. Top bar Container

16. Content

17. Benefits of the App Shell • Reliable performance that is

    consistently fast • Native-like interactions • Economical use of data

18. Moving on to Service Workers

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

20. Installing Activated Error Idle Fetch Terminated

21. None
22. None
23. None

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

25. The Web App Manifest

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
27. None

28. Push Notifications

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
30. None
31. None
32. None

33. PRPL pattern

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

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

    bundle fragment bundle shell bundle

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

37. Measure & Debug

38. None

39. Conclusions

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!

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

    when you do.

42. Thank you! @r31gN_