Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

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

via egghead.io

Overview

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.

Syllabus

  • 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

Taught by

Alex Jover Morales

Reviews

4.5 rating at egghead.io based on 58 ratings

Start your review of Offline-First Progressive Web Apps (PWA) in Vue.js

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.