Episode 4: Progressive Web Apps (PWAs) with Maxim Salnikov
John, Ward, and Dan talk with Maxim Salnikov about his experience as PWA expert. Maxim discusses what they are and when he uses them, along with browser support, and how he uses service workers. Maxim shares a lot of tips on building and debugging PWAs that you don't want to miss.
Recording date: 2018-09-20
John Papa https://twitter.com/john_papa
Ward Bell https://twitter.com/wardbell
Dan Wahlin https://twitter.com/danwahlin
(0:01:51) John reads the mailbag about browser support, service workers performance imapc,t and adding home screens to PWAs.
(0:01:51) Mailbag https://twitter.com/RealTalkJS/status/1042572672025194496
(00:2:15) Maxim describes PWA support in the browsers
(0:03:10) Ward points out that Addy Osmani https://twitter.com/addyosmani says: "It's important to remember that
Progressive Web Apps work everywhere but are supercharged in modern browsers. Progressive enhancement is a
backbone of the model."
(0:03:42) Service worker support in "Can I Use" https://caniuse.com/#feat=serviceworkers
(0:03:50) Maxim recommends using the PWA feature detector https://github.com/tomayac/pwa-feature-detector
(0:04:10) Maxim answers John's question about how PWAs have changed over the past few years
(0:05:45) Maxim answers what a PWA is and the value to developers and users
(0:07:00) Ward asks "What problem does PWA solve?"
(0:07:43) Dan asks what he benefits of PWA are to an enterprise business
(0:08:50) Maxim points out how low wifi (LiFi) can be hard to deal with
(0:09:22) What is a PWA https://developers.google.com/web/progressive-web-apps/
(0:09:30) Ward asks if a PWA magically knows if its offline or not
(0:11:50) Maxim talks about LiFi as really low connectivity
(0:13:20) John clarifies with Maxim that PWAs uses browser APIs to check their connectivity
(0:14:00) Ward asks if he should use the raw service worker protocol
(0:15:15) Dan and Ward asks Maxim what makes this easier
(0:16:57) Maxim talks about the Workbox project https://developers.google.com/web/tools/workbox/
(0:18:15) John asks Maxim what else besides Service Workers, that is a part of PWAs
(0:18:30) Maxim discusses web app manfiest https://developer.mozilla.org/en-US/docs/Web/Manifest
(0:21:10) Maxim talks about Service Worker precache https://github.com/GoogleChromeLabs/sw-precache
(0:22:22) Ward asks Maxim to tell a story about one of Maxim's successful experiences with PWAs
(0:28:26) mobile era rocks PWA https://mobileera.rocks/
(0:28:46) Ward raises how conferences are notorious for low wifi
(0:33:00) John asks Maxim when not to do a PWA
(0:38:00) Ward, John and Maxim discuss security concerns with PWAs
(0:44:30) Lighthouse tool for PWAs
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
(0:45:30) Maxim mentions the Web Hint tool for PWAs https://webhint.io/ (tip: npx hint https://example.com )
(0:46:50) Someone to follow: Nicholas Zakas https://twitter.com/slicknet https://humanwhocodes.com/
(0:47:38) Someone to follow: Simona Cotin https://twitter.com/simona_cotin?lang=en
(0:48:10) Someone to follow: Arthur Stolyar https://twitter.com/nekrtemplar
Additional Resources
PWA Checklist
https://developers.google.com/web/progressive-web-apps/checklist
Curated list of PWA news by Maxim:
https://twitter.com/progwebnews/
PWA Feature Detector
https://tomayac.github.io/pwa-feature-detector/
Mobile Era PWA:
https://mobileera.rocks/
Workbox:
https://workboxjs.org
Webhint:
https://webhint.io
PWA Get Started:
https://developers.google.com/web/progressive-web-apps/
https://developer.microsoft.com/en-us/windows/pwa
Excellent post on PWA: https://developers.google.com/web/updates/2015/12/getting-started-pwa