Progressive Web Apps
source link: https://syntax.fm/show/050/progressive-web-apps
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
- What's the deal with the GitHub / Microsoft acquisition?
- 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
41:50
45:12
- Accelerometer
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK