Progressive Web Apps with Henrik Joreteg, Ada Rose Edwards, Nolan Lawson, and Ben Kelly
Description:
A Progressive Web App "uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction." The JavaScript Air website uses some of these techniques and technologies. Let's learn about this awesome stuff!
Show sponsors:Egghead.io - Bite-sized web development video trainingFrontend Masters - Expert front-end training{Track:js} - JavaScript Error MonitoringSparkPost - Email. We've Got It Down.WebStorm - Smart JavaScript IDEAuth0 - Authentication Made SimpleTrading Technologies - Building For What's Next
Links, Picks, and Tips:
Henrik JoretegLinks: Introducing Pokedex.org: a progressive webapp for Pokémon fans, Mozilla's SW Cookbook, sw-toolbox (so much good stuff here), and Background SyncTips: Sometimes it's just easier to disable registering SW in development. Just helps when you're trying to build/fix other parts of the site., It's very important to test your update process when deploying new versions of apps with SW. It's possible to “brick” a web app since if you successfully register a SW, then push an update that has a JS error that prevents your SW registration code from running. Pushing a new version won't fix it because it won't register the new SW and keeps serving the broken code from the previous SW. , and It's early to say this, but I think GraphQL will eventually replace REST as dominant http API approach for applications.Picks: I <3 reselect for Redux apps
Ada Rose EdwardsLinks: Caching best practices & max-age gotchas by Jake Archibald, My stupidest webapp, and The FT’s webappTips: If you do 'network first' routes in the service worker, fallback set a timeout to wait for the response and if it fails respond with cached or fallback content. This keeps the app responsive when the device is "online" but no data is going anywhere this stops infinite loading spinners when connected to captive portals, or have low phone signal. I do 2-5s timeout usually.Picks: sw-toolbox, sw-precache, and lighthouse
Nolan LawsonLinks: Jake's article on appcache, Infographic on service worker, Paul Lewis on CORS, Ionic and PWAs, Differences between PWAs and AppCache apps, On URLs in Progressive Web Apps by Bruce Lawson, The importance of URLs by Stuart Langridge, Regressive Web Apps by Jeremy Keith, and Progressive Web Apps and the future of the Web (video) by Bruce LawsonTips: Chrome Canary now has an “Application” tab showing PWA and storage information, Chrome Canary has a “clear all storage” button (so handy!), and sw-precache and sw-toolbox are awesome, see web-starter-kit for a full working app that uses themPicks: Hoop Dreams (1994 documentary)
Ben KellyLinks: CORS for Concern by Paul Lewis and Infographic on Service WorkerTips: Make sure you use waitUntil() for any async operations outside of respondWith(). Many examples will try to do things like cache resources after resolving the respondWith() promise without calling waitUntil(). The browser can kill the worker before these async operations complete. You may not see this in development, though, because the browser sometimes keeps the worker alive with devtools open.Picks: Sound Slice
Kent C. DoddsLinks: JavaScriptAir.com is a progressive web app!Tips: Avoid nesting your tests: Nested Unit Tests: An Anti-PatternPicks: vaadin Progressive Web App Competition
About JavaScript Air:
JavaScriptAir is the live broadcast podcast all about JavaScript hosted by egghead.io instructor Kent C. Dodds. Please visit the JavaScript Air website (javascriptair.com) to see upcoming and past episodes. Go to suggest.jsair.io to suggest topics and guests for the show. Go to feedback.jsair.io to provide feedback on this and other episodes. Also be sure to follow JavaScript Air on Twitter and Google+ to stay up to date with future episodes. Also, all episodes are on the YouTube channel as well.