Transform your Flashcard Carousel into a Progressive Web App (PWA) in an evening

Good evening internet! This is my second blog post in what has surprisingly become a series. In the first post (read it here), we created this flashcard application (try it here) with the intention of helping language learners learn words of interest using Vue, Vite and Vercel. In this post we will extend the application by turning it into a Progressive Web App (PWA) all in a single evening!

What exactly is a PWA?

PWAs bring the best of both worlds from platform specific apps (IOS & Android) and web apps into one solution. PWAs can be downloaded and installed directly from the browser or via the App/Play Store and appear on the device like any other app. My favourite benefit of PWAs is that they can be used without network connectivity. This is mighty helpful for this app and many others when I'm travelling and want to cram in some last minute revision but don't have access to the internet. For example, you might be on a plane or bored on a train and can't access your mobile data/a WiFi network.

Getting started

You can find the respository here.

Before we dive in, please note that the main branch runs the flashcard app and the PWA branch offers the complete flashcard PWA. Our goal in this tutorial is to learn what a PWA is and the steps we must take to transform our web app into a progressive web app.
If you are following along from the first tutorial great, though, we will spend less time focussing on deploying the app in this tutorial. For the sake of simplicity, complete your work on the main branch as this will make deployments smooth (unless you're a wizz with Vercel and know how to configure builds from other branches).

Clone the repository then let's get started! 🤓

Installing vite-plugin-pwa

Vite has a plugin that converts a Single Page App (SPA) into a PWA. This is awesome and very versatile as it isn't restricted to working with Vue (the JavaScript (JS) framework used in this tutorial), React or any other JS library/framework supported by Vite.

Issue the following command within your terminal/command windows within the repository:

npm i vite-plugin-pwa --save-dev

Now that vite-plugin-pwa is installed we can add it into our vite.config.js file like so:

import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    vue(),
    VitePWA()
  ]
})

Transforming our application

Now we can begin the serious work of turning our app into something that we can install on our devices. PWAs have a number of requirements that we must meet to enable us to install our app locally.

We will now take the steps to figure out the necessary requirements for our PWA. Let's build our app using the npm run build command in the terminal. Once this is complete inspect the output in your terminal; you will see the following:

building for production...
✓ 15 modules transformed.
dist/registerSW.js               0.13 kB
dist/manifest.webmanifest        0.17 kB
dist/index.html                  0.57 kB │ gzip:  0.34 kB
dist/assets/index-200d626d.css   3.29 kB │ gzip:  1.05 kB
dist/assets/index-27c61d9b.js   64.32 kB │ gzip: 25.25 kB

PWA v0.16.5
mode      generateSW
precache  5 entries (66.72 KiB)
files generated
  dist\sw.js
  dist\workbox-27b29e6f.js
✓ built in 3.07s

Now that the built application has been generated, issue the npm run serve command to view the app in your browser. It is typical for web apps that can be installed as PWAs to indicate this with an install icon within your browser's search bar like so:

As this is not yet available to us we must investigate why. We can use the Developer Tools to view the Application tab for insights and errors like so:

We have a number of errors that we must first resolve before we can attempt to rebuild our app and check if it can be installed again. The errors we have received concern our web app manifest (this was one of our build outputs: manifest.webmanifest). VitePWA enables us to provide a manifest object to the VitePWA plugin in the vite.config.js file, feel free to explore the VitePWA docs to learn more here.

The Web App Manifest

This is a set of criteria that informs the browser that the app can be installed and information about said app. This includes but is not limited to:

• name, short_name and description
• theme_color, background_color and display
• icons and optionally screenshots

To learn more about potential members of the manifest file check this out.

We must now populate the aforementioned fields. Within the public directory some icons and screenshots have been provided. We can reference these within our manifest. You may want to include your own icons and screenshots. You can generate your own icons for your PWA here.

Within the VitePWA plugin in the vite.config.js file add the following:

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
    manifest: {
        name: "French Flashcards",
        short_name: "Français Flashcards",
        description: "Install this flashcard app for quick reference on the go! \nAvoid loading this again and again; train your mind whenever you feel like it, even when you don't have an internet connection!",
        theme_color: "#ffffff",
        background_color: "#ffffff",
        display: "standalone",
        icons: [
        {
            src: "/192x192.png",
            sizes: "192x192",
            type: "image/png",
            purpose: ""
          },
          {
            src: "/512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: ""
          }
        ],
        screenshots:[
          {
            src: "/narrow-screenshot.jpg",
            sizes: "438x841",
            type: "image/jpg",
            form_factor: "narrow"
          },
          {
            src: "/wide-screenshot.png",
            sizes: "1280x668",
            type: "image/png",
            form_factor: "wide"
          },
        ]
      }
    })
  ]
});

Again, you may wish to update the manifest with screenshots of your own. Please ensure that the sizes and file formats accurately reflect those of your screenshots. The Applications tab in the Dev Tools might inform if they do not meet the necessary criteria.

With the manifest object populated, let's build the app again using npm run build followed by npm run serve to preview the newly generated build. There should be no errors, if there are you will need to follow the suggestions in your Dev Tools then repeat this build and serve process until they are all resolved.

Installing our application

Now that the code is complete the next step is to install the app. Click the install icon within the browser's search bar (if you are on a desktop/laptop) and you will be presented with the following:

Alternatively, on a mobile this will be your view!

Once you are happy with your code, commit it and push your changes. If you are following along from the first tutorial, Vercel will pick up these changes and deploy your new PWA!🎉

This concludes the tutorial! Thanks for reading and following along. As always, I'd love to hear how you got on and any ideas you have to take this app to the next level!🚀