BROADCASTS.com

Published: June 13, 2018, 1 p.m.

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\xa0freshbooks.com/syntax\xa0and put\xa0SYNTAX\xa0in the \u201cHow did you hear about us?\u201d section.

LogRocket - Sponsor

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

Show Notes

2:00

• What\u2019s the deal with the GitHub / Microsoft acquisition?

6:05

• What is a Progressive Web App?

8:55 -\xa0Progressive Web App Checklist

What are the baseline features for a Progressive Web App?

09:25

• Site is served over HTTPS
• Let\u2019s Encrypt

11:05

• Pages are responsive on tablets & mobile devices

11:35

• All app URLs load while offline
• Use a Service Worker

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\u2019t 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\xa0metadata is provided where appropriate
• Social metadata is provided where appropriate

29:42

• Canonical URLs are provided when necessary

User experience

31:43

• Content doesn\u2019t jump as the page loads
• Scott\u2019s Pro Gatsby Course

36:52

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

37:34

• When tapped, inputs aren\u2019t 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

• Web RTC
• Get User Media

41:50

• Push API

45:12

• Accelerometer
• GPS

45:55

• Payment Request API

47:12

• Local Storage

48:03

• IndexedDB

48:35

• StorageManager

51:45

• Vibration API

52:58

• Use\xa0Lighthouse\xa0to improve the quality of your web apps

\xd7\xd7\xd7 SIIIIICK \xd7\xd7\xd7 PIIIICKS \xd7\xd7\xd7

• Scott:\xa0myNoise
• Wes:\xa0Ozark Trail Drinkware

Shameless Plugs

• Scott\u2019s Level 2 React Course
• Wes\u2019 Courses

Tweet us your tasty treats!

• Scott\u2019s Instagram
• LevelUpTutorials Instagram
• Wes\u2019 Instagram
• Wes\u2019 Twitter
• Wes\u2019 Facebook
• Scott\u2019s Twitter
• Make sure to include\xa0@SyntaxFM\xa0in your tweets