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 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