Offline-First Progressive Web Apps (PWA) in Vue.js

Progressive Web Apps are just Web pages, but with superpowers. They load under uncertain network conditions, even offline. They’re fast and engaging, providing the best user experience. They can be installed on your smartphone if the browser supports it, feeling like a native app.
In this course I’m gonna show you how to take an existing Single Page App made in Vue.js and pragmatically convert it to a Progressive Web App by creating a web manifest, then it goes through caching static assets, external resources and streams using service workers, applying code-splitting and lazy loading, notifying new versions of the app or wether is online or offline, understanding the preload and precache directives, finishing up by showing how to audit a Progressive Web App.

• Intro to Offline-First Progressive Web Apps in Vue.js
• Add a Web App Manifest to Create a Progressive Web Application
• Add Meta Tags for Other Browsers on a PWA
• Cache Static Assets with Service Workers using sw-precache
• Integrate Service Worker Generation into Webpack's Build with SW-Precache
• Register a Service Worker in Production
• Hot Reload Static Files by Clearing Service Worker Cache while Developing
• Use a no-op Service Worker in Development
• Show Notifications when a Service Worker is Installed or Updated
• Cache External Resources during Runtime with sw-precache
• Cache Data from TCP/IP Connections with IndexedDB
• Lazy load Images using Intersection Observer API
• Check Online Status by using the NavigatorOnLine API
• Lazy Load a Route by using the Dynamic Import in Vue.js
• Audit your App with Chrome Devtools
• Optimize Assets Delivery using preload and prefetch