Modern Tools for Building Progressive Web Apps
Download as PPTX, PDF1 like106 views
The document discusses modern tools for building Progressive Web Apps (PWAs), which are web applications designed to provide reliable, fast, and engaging user experiences. Key components of PWAs include HTTPS, service workers, and web app manifests, enabling features like offline functionality and background sync. Additionally, it covers automation tools like PWA Builder and Workbox for implementing caching strategies to enhance PWA performance.
Modern Tools for Building Progressive Web Apps
- 1. Modern Tools for Building Progressive Web Apps John M. Wargo https://johnwargo.com @johnwargo
- 2. About Me • Software developer, writer, presenter, father, husband, and geek • Specializes in mobile development • Principal Program Manager @ Microsoft • App + Cloud Experiences team • Responsible for Visual Studio App Center Push and Azure Notification Hubs • Author of 7 (+1)* books • Former contributor to the Apache Cordova project • Live in Charlotte, NC • Previously @ AT&T, BlackBerry, BoxTone, Forrester Research, Hewlett Packard Enterprise (HPE), others
- 4. Learning Progressive Web Apps • Available in early 2020 • https://learningpwa.com/
- 5. Modern Tools for Building Progressive Web Apps
- 6. Progressive Web Apps Google: Progressive Web Apps are user experiences that have the reach of the web, and are: • Reliable - Load instantly and never show the downasaur*, even in uncertain network conditions. • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. • Engaging - Feel like a natural app on the device, with an immersive user experience. Jeremy Keith: Progressive Web Apps consist of: • HTTPS • A service worker • A Web App Manifest * When using Google Chrome and your internet connectivity dies, you'll see a little Tyrannosaurus. This is called the 'downasaur' https://developers.google.com/web/progressive-web-apps https://adactio.com/journal/13098 With service workers and manifest files, PWAs: • Are installable • Are available (run while) offline • Can perform background sync operations
- 7. Anatomy of a PWA
- 8. index.html
- 10. index.html* *or loaded from an external file
- 11. sw.js
- 12. PWAs Now Automatic Through Many Common Frameworks
- 15. PWA Tooling
- 16. Assessing the PWA-ness of a Web App with Lighthouse • Multiple entry points • Chrome extension • Developer Tools • Command-line https://developers.google.com/web/tools/lighthouse
- 22. PWA Automation (Part 1) PWABuilder
- 28. PWA Automation (Part 2) Workbox
- 30. Workbox • JavaScript library for adding offline operation to a web app • Locally cached resources • Two approaches: • Precache all app resources • Custom caching strategies • Command-line driven
- 31. Workbox Caching Strategies • CacheFirst: Return the cached version of a resource, retrieving the resource from the network (and adding it to the cache) if it’s not already in the cache. • CacheOnly: Return the resource from the cache. If the resource is not in the cache, the fetch will fail. Note: Your service worker must populate the cache during service worker installation to enable this option. • NetworkFirst: Return the network version of the resource, retrieving the resource from the cache if the network is not available. The fetch fails when the network version is not available, and the resource is not in the cache. • NetworkOnly: Return the network version of the resource, failing if it’s not available. • StaleWhileRevalidate: Return the cached version of a resource, then update the cached version from the network so it’s there the next time the app requests the resource. This gets resources to an app quickly, but it may not always be the most recent version.
- 33. Implementing a Caching Strategy
- 34. Custom Routes
- 35. Questions?