Modern PWA with Vue-CLI 3 + Vuetify + Firestore + Workbox[Part 3]

This is the third part of our PWA Project, if you haven’t seen the previous chapters, you can see the first part here and the second part here.

Until now our project works as a normal SPA allowing us to create posts, see details and save the data in a remote DB (Firestore). In this chapter we are going to set up offline capabilities to never see the downasaur again.

We’ll never see the downasaur again

[Part 3] Implementing offline mode

May be you’re wondering how is that possible. Well, step one is to save locally the files we normally get through internet (html, css, js, images, etc.).

In an existing app we should set up a tool to make this like workbox, sw-precache or save the files by ourselves through a service worker. But fortunately Vue-CLI-3 comes with workbox ready to use and when we created our PWA project Vue-CLI configured it for us, so everything we have to do is compile to to production and serve the files with a HTTP server.

I use HTTP-server but you can use whatever you want. Install it globally with the following command.

npm install http-server -g

Once installed, compile to production with this command:

yarn run build

or npm run build if you aren’t using yarn

dist folder will be created, serve this new folder with an HTTP server.

http-server dist

Do ctrl + click in http://127.0.0.1:8080 to see the production version of our PWA.

Let’s do an offline test. Open chrome devtools with F12 then select application tab, select service worker option and mark the offline checkbox

Now refresh the App with F5 and…

As you can see we don’t see the downasour any more, but we still have some issues, first we aren’t rendering the material design icons and second we aren’t getting the firestore data.

In order to Fix the material design icons issue, install material design icons trough NPM with this command.

yarn add material-design-icons-iconfont

npm install material-design-icons-iconfont --save if you aren’t using yarn

Once installed add this line to main.js

Compile to production and serve de dist folder again to check if material design icons issue was solve.

You’ll need to update the service worker manually. To do it go to Application tab, select service worker and click to skipWaiting to install the new version of service worker. And then refresh the app with Ctrl +F5. Be sure to do this every time you compile to production.

If you can’t solve this issue try to delete all the app data with chrome developer tools. Click on Application tab, clear storage, and then click on clear site data button.

In order to solve the second Issue (database data), normally we’d have to set up a local DB as Indexed DB. But we have a great advantage, we are using Firestore.

We can set up Firestore to work offline with only one line of code. Firestore sets up an Indexed DB under the hood.

Let’s set up Firestore offline capabilities. Open your configFirebase file and paste this line of code after db.settings({ timestampsInSnapshot: true}).

Compile to production and serve the dist folder to test the app offline again.

Congratulations, now you have a PWA working offline mode successfully.

I hope you’ve enjoyed this chapter, there are many cool features we can add to our PWA like access to device camara and send push notifications.

I’ll see you in the next chapter.