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!
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.
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.
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.
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.
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:
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.
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
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.
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.
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn more →
cursor propertyLearn about built-in CSS cursors, creating custom cursors with CSS, using multiple cursors, and adding animations with CSS and JavaScript.
Build a React Native Turbo Module for Android to access device info like model, IP, uptime, and battery status using native mobile APIs.
Learn how to measure round-trip time (RTT) using cURL, a helpful tool used to transfer data from or to a server.
React.memo prevents unnecessary re-renders and improves performance in React applications. Discover when to use it, when to avoid it, and how it compares to useMemo and useCallback.
