Progressive Web Apps

59:47
 
Share
 

Manage episode 208629952 series 1469447
By Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers. Discovered by Player FM and our community — copyright is owned by the publisher, not Player FM, and audio is streamed directly from their servers. Hit the Subscribe button to track updates in Player FM, or paste the feed URL into other podcast 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!

376 episodes