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
Site is served over HTTPS
Let’s 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’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
Content doesn’t jump as the page loads
Scott’s 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’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
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 Lighthouse to improve the quality of your web apps
××× SIIIIICK ××× PIIIICKS ××× Scott: myNoise
Wes: Ozark Trail Drinkware
Shameless Plugs Scott’s Level 2 React Course
Wes’ Courses
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets