Progressive Web Apps — Syntax Podcast 050

A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 050: Progressive Web Apps

0:00

LOUDNESS

Jun 13th, 2018

Progressive Web Apps

👇 Download Show✏️ Edit Show Notes

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!