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
- What's the deal with the GitHub / Microsoft acquisition?
- What is a Progressive Web App?
What are the baseline features for a Progressive Web App?
- Site is served over HTTPS
- Let's Encrypt
- Pages are responsive on tablets & mobile devices
- All app URLs load while offline
- Use a Service Worker
- Metadata provided for Add to Home screen
- First load fast even on 3G
- Site works cross-browser
- Page transitions don't feel like they block on the network
- Each page has a URL
What makes an exemplary Progressive Web App?
- All content is indexed by Google
- Schema.org metadata is provided where appropriate
- Social metadata is provided where appropriate
- Canonical URLs are provided when necessary
- Content doesn't jump as the page loads
- Scott's Pro Gatsby Course
- Pressing back from a detail page retains scroll position on the previous list page
- When tapped, inputs aren't obscured by the on screen keyboard
The Best of the rest
- Content is easily shareable
- Site is responsive
- Any app install prompts are not used excessively
- The Add to Home Screen prompt is intercepted
- Use cache-first networking
- Use Lighthouse to improve the quality of your web apps