DEV Community

Syntax - Tasty Web Development Treats

Progressive Web Apps

Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax

Show Notes

2:00

  • What’s the deal with the GitHub / Microsoft acquisition?

6:05

  • What is a Progressive Web App?

8:55 - Progressive Web App Checklist

What are the baseline features for a Progressive Web App?

09:25

11:05

  • Pages are responsive on tablets & mobile devices

11:35

16:35

  • Metadata provided for Add to Home screen

18:40

  • First load fast even on 3G

20:00

  • Site works cross-browser

20:15

  • Page transitions don’t feel like they block on the network

22:20

  • Each page has a URL
What makes an exemplary Progressive Web App?

27:42

  • All content is indexed by Google

28:38

  • Schema.org metadata is provided where appropriate
  • Social metadata is provided where appropriate

29:42

  • Canonical URLs are provided when necessary
User experience

31:43

36:52

  • Pressing back from a detail page retains scroll position on the previous list page

37:34

  • When tapped, inputs aren’t obscured by the on screen keyboard
The Best of the rest

38:22

  • Content is easily shareable
  • Site is responsive
  • Any app install prompts are not used excessively
  • The Add to Home Screen prompt is intercepted

39:20

  • Use cache-first networking
Device APIs

40:34

41:50

45:12

  • Accelerometer
  • GPS

45:55

47:12

48:03

48:35

51:45

52:58

  • Use Lighthouse to improve the quality of your web apps
××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!

Episode source