Image

progressive-web-apps-vue-3

4 min read
Last update: December 19, 2021

Overview and Setup

If you want to follow along with this course, be sure to check out this repo we have under code-pop at PWA with Vue 3.

The base of this app is built upon to do MVC. Which many of you might be familiar with as it’s a common way to basically demonstrate how a lot of different frameworks can build the same functionality. That said for those who might not have used it, we’re going to do a quick review of what TodoMVC includes.

Project App Overview

Here we have an input button where I can add tasks like milk, bread, and peanut butter. So you can see, you just can add items. You just can also complete those tasks. Let’s say we have our bread and our peanut butter, and we can see different states that have been toggled. We can delete individual items. We can toggle the different views.

So you can see that we have all of the items. We have only the active items and we have the completed items. You’ll also see that we also have the number of items left being calculated here as well. And then here, we can also then toggle all of them on or all of them off. If any of the items are completed, can use this button right here to delete any of the tasks from the view that said what’s missing.

The Missing Pieces

Well, here’s the thing. When it comes to the thing like a todo app, you want the ability to reference your to-do items, even if you’re offline and in the state it’s in right now, if I go ahead and add a few items back in, you’ll see that if I just complete one and I refresh the page, everything is reset and I lose all my data and we don’t want that.

And just as you might expect in the event that we don’t have internet, we won’t be able to connect to our application at all. And these are some of the common problems that progressive web apps help to fix. For this course, I recommend having experience working with Vue 3 and the Vue CLI.

How to Add PWA to a Vue 3 App with Vue CLI

When we open our project inside of VS code, we’ll see that we have mostly the same scaffold as you would normally get when you set up a brand new project with Vue CLI. The main difference being that if you look inside of App.vue, this will contain all of our TodoMVC code, which I’ve already converted into Vue 3. And this handles all the functionality that we demoed earlier. In addition, we have the styles folder here that contains all the TodoMVC CSS that we need to make sure that our app looks and feels the same way as other TodoMVC applications.

With that said, let’s go ahead and add progressive web app functionality to our application. Luckily for us, we don’t have to set everything up from scratch. We can utilize a Vue CLI plugin, let’s go and do that now.

Inside of our terminal, all we need to do to accomplish this, believe it or not is just vue add pwa

A Tour of Vue PWA Changes

Once that’s finished installing, you’ll see that we have a couple of new changes. We have the package.json that’s been modified to now include our plugin for PWA, which is right here. We have a new robots.txt file, which is there mainly for configuration purposes. You don’t have to worry about it for now.

Inside of our public folder, we have this new image folder, which contains a folder of icons for all the different ways that PWAs might appear on different devices. And inside of main.js, we’re also importing this thing called a service worker, which you can see right here in the source directory. And believe it or not, your app is now set up to be a progressive web app, but we have more to dive into.

Next Steps

So in the next lesson, we’ll talk about this new thing called a service worker. See you there.