Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Progressive Web Apps

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps.</p> <h2><a id="Freshbooks__Sponsor_9" name= "Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p>Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put <strong>SYNTAX</strong> in the “How did you hear about us?” section.</p> <h2><a id="LogRocket__Sponsor_13" name= "LogRocket__Sponsor_13"></a>LogRocket - Sponsor</h2> <p><a href="https://logrocket.com/syntax">LogRocket</a> 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 <a href= "https://logrocket.com/syntax">https://logrocket.com/syntax</a></p> <h2><a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p>2:00</p> <ul> <li>What’s the deal with the GitHub / Microsoft acquisition?</li> </ul> <p>6:05</p> <ul> <li>What is a Progressive Web App?</li> </ul> <p>8:55 - <a href= "https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web App Checklist</a></p> <h3><a id= "What_are_the_baseline_features_for_a_Progressive_Web_App_29" name= "What_are_the_baseline_features_for_a_Progressive_Web_App_29"></a>What are the baseline features for a Progressive Web App?</h3> <p>09:25</p> <ul> <li>Site is served over HTTPS</li> <li><a href="https://letsencrypt.org/">Let’s Encrypt</a></li> </ul> <p>11:05</p> <ul> <li>Pages are responsive on tablets & mobile devices</li> </ul> <p>11:35</p> <ul> <li>All app URLs load while offline</li> <li><a href= "https://developers.google.com/web/fundamentals/primers/service-workers/"> Use a Service Worker</a></li> </ul> <p>16:35</p> <ul> <li>Metadata provided for Add to Home screen</li> </ul> <p>18:40</p> <ul> <li>First load fast even on 3G</li> </ul> <p>20:00</p> <ul> <li>Site works cross-browser</li> </ul> <p>20:15</p> <ul> <li>Page transitions don’t feel like they block on the network</li> </ul> <p>22:20</p> <ul> <li>Each page has a URL</li> </ul> <h3><a id="What_makes_an_exemplary_Progressive_Web_App_65" name= "What_makes_an_exemplary_Progressive_Web_App_65"></a>What makes an exemplary Progressive Web App?</h3> <p>27:42</p> <ul> <li>All content is indexed by Google</li> </ul> <p>28:38</p> <ul> <li><a href="http://schema.org/">Schema.org</a> metadata is provided where appropriate</li> <li>Social metadata is provided where appropriate</li> </ul> <p>29:42</p> <ul> <li>Canonical URLs are provided when necessary</li> </ul> <h3><a id="User_experience_80" name="User_experience_80"></a>User experience</h3> <p>31:43</p> <ul> <li>Content doesn’t jump as the page loads</li> <li><a href= "https://www.leveluptutorials.com/tutorials/pro-gatsby">Scott’s Pro Gatsby Course</a></li> </ul> <p>36:52</p> <ul> <li>Pressing back from a detail page retains scroll position on the previous list page</li> </ul> <p>37:34</p> <ul> <li>When tapped, inputs aren’t obscured by the on screen keyboard</li> </ul> <h3><a id="The_Best_of_the_rest_95" name= "The_Best_of_the_rest_95"></a>The Best of the rest</h3> <p>38:22</p> <ul> <li>Content is easily shareable</li> <li>Site is responsive</li> <li>Any app install prompts are not used excessively</li> <li>The Add to Home Screen prompt is intercepted</li> </ul> <p>39:20</p> <ul> <li>Use cache-first networking</li> </ul> <h3><a id="Device_APIs_108" name="Device_APIs_108"></a>Device APIs</h3> <p>40:34</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">Web RTC</a></li> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia%20"> Get User Media</a></li> </ul> <p>41:50</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push API</a></li> </ul> <p>45:12</p> <ul> <li>Accelerometer</li> <li>GPS</li> </ul> <p>45:55</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API"> Payment Request API</a></li> </ul> <p>47:12</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage"> Local Storage</a></li> </ul> <p>48:03</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li> </ul> <p>48:35</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/StorageManager">StorageManager</a></li> </ul> <p>51:45</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API">Vibration API</a></li> </ul> <p>52:58</p> <ul> <li>Use <a href= "https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> to improve the quality of your web apps</li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__148" name= "_SIIIIICK__PIIIICKS__148"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://mynoise.net/">myNoise</a></li> <li>Wes: <a href= "https://www.walmart.com/search/?query=ozark%20trail%20rambler&cat_id=0">Ozark Trail Drinkware</a></li> </ul> <h2><a id="Shameless_Plugs_153" name= "Shameless_Plugs_153"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/store">Scott’s Level 2 React Course</a></li> <li><a href="https://wesbos.com/courses">Wes’ Courses</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_158" name= "Tweet_us_your_tasty_treats_158"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Progressive Web Apps

Poslechněte si podcast