How to configure worker plugins in Vite 2.8

If you have used the framework-agnostic Vite for frontend development, you’re probably already familiar with service workers. In this article, we’ll explore how to properly configure worker plugins with Vite for a functional progressive web application (PWA). But first, it’s important for us to get acquainted with some terms. Let’s get started!

• What is Vite?
• What is a PWA?
• What are service workers?
• What is a manifest?
• Project setup
  • Scaffolding the Vite project
  • Configuration
• Workers registration

What is Vite?

If you’ve used the Vue framework before, you’ve most likely used the Vue CLI to develop large and complex projects. While the Vue CLI is a great build tool for Vue developers to manage webpack internals, Evan You, the creator of Vue, created a lightning-fast build tool called Vite in 2020.

Unlike the Vue CLI, Vite is not specific to Vue; you can also use it to develop any JavaScript or TypeScript application. With Vite, when you save your code, you’ll see the changes reflected on the browser very quickly since Vite only serves and changes source code when the browser requests it.

What is a PWA?

PWA stands for progressive web application, which I view as a concept rather than an actual technology. PWAs define web apps that use manifests, service workers, and other web-platform features in combination with progressive enhancement, giving users a relatively similar experience to native applications.

Some advantages of using a PWA include easy installation, progressive enhancement, network independence, security, and SEO benefits.

What are service workers?

You can think of a service worker as a proxy server that sits between a web app, the browser, and the network, when available. A service worker aims to create effective offline experiences, update assets on the server, intercept network requests, and take action based on whether or not network is available.

Service workers also make it possible to access push notifications and perform background API synchronization, including add to screen functionalities.

What is a manifest?

Web app manifests are the part of a collection of PWAs that provide information about the web app in a JSON text file. A PWA manifest includes its name, version, description, icons, and any other necessary resources that pertain to the application.

Project setup

Now that we know all the technical jargon surrounding progressive web applications, we’ll learn how to configure worker plugins with Vite.

In our demo, we’ll use the VitePWA plugin, created by Anthony Fu. This plugin helps add service workers in a Vite app for handling:

• Caching resources
• Offline support
• Push notifications for when new content is available

Scaffolding the Vite project

If you don’t already have a Vite-based project that you’d like to use to configure your PWA, feel free to create one from any of the available templates. You can also create a new Vite project by running the following command:

npm create vite@latest

While creating my Vite app, I chose the Vue framework and the JavaScript variant. After the app scaffold is complete, install the application dependencies in the project with the command below:

npm install

Now, we can speed up the local server by running the following command:

npm run dev

At this point, we have our Vite application up and running.

Configuration

Let’s go ahead and configure the workers plugin, VitePWA, in our application. First, we’ll install the package as a dev dependency by running the following command:

npm i vite-plugin-pwa -D

Registering the workers for our Vite app

Now that we’ve installed the workers plugin, we’ll need to register the service workers. The vite-plugin-pwa plugin registers the service worker automatically using the injectRegister configuration option, which is optional.

To register the service workers, update the vite.config.js or vite.config.ts file, depending on the variant you chose upon project scaffolding. Import VitePWA from vite-plugin-pwa and the plugin so that it looks like code below:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })],
});

Now that we’ve registered the vite-plugin-pwa, our application is able to generate its web app manifest and inject it at the entry point upon app build.

You can build your Vite app by running the following command:

npm run build

With this minimal configuration of the vite-plugin-pwa plugin, our application is now able to generate the web app manifest, inject it at the entry point upon app build, generate the service worker, and register it in the browser.

If your version of the vite-plugin-pwa is ≤v0.12.2, make sure your own configuration uses injectRegister instead of registerType, as shown below:

...
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    ...,
    VitePWA({
      injectRegister: 'auto'
    })
  ]
})

Now, we’ll build the Vite application using the command below:

npm run build

Upon app build, a dist folder that holds various files is created, including the web app manifest and the JavaScript variant for a service worker file.

At this point, we’ve successfully configured service workers with our Vite application. The app can now perform as a completely functional progressive web app and work offline. We made sure to build our Vite application because the app will only function as a PWA when in a production environment, not in development.

Conclusion

The vite-plugin-pwa offers a super-convenient and easy-to-integrate option for turning a standard web application built with Vite into a fully fledged PWA.

Although building a progressive web application might seem like an uphill task initially, it’s awesome that we have tools like the VitePWA plugin to simplify things for us. Just install the plugin and watch it do all the heavy lifting.

We didn’t dive into more complex development activities, but we can be sure to count on the VitePWA plugin as a starting point when building an offline app.