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
-
19
Raymond Camden
-
13
In 2020, internet traffic is split 44/52 between desktop and mobile. As 71% of customers expect a comparable...
-
13
This week I had the pleasure of attending the Progressive Web Apps Dev Summit, an event organised by Google in the beautiful city of Amsterdam. These are my takeaways from the event.
-
14
Start Building with Web Bluetooth and Progressive Web AppsControlling the Bluetooth-Enabled World from the Comfort of the WebA Short IntroductionWeb Bluetooth is a a new technology that connects the Web w...
-
9
In 2020, internet traffic is split 44/52 between desktop and mobile. As 71% of customers expect a comparable...
-
10
What Are Progressive Web Apps?April 16th 2021 new story5
-
13
Table of contentsUse the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.Related Guides:
-
9
-
10
What's New in Progressive Web Apps 10/11/2021 5 minutes to read The following sections list the updates to PWAs and Web Apps from the Microsoft Edge web app...
-
19
October 19, 2021 Learn to build great Progressive Web Apps Just last week, more than 5000 people attended the very first online
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK