Assuming you have made use of the framework vitefor frontend works, you should have already gotten used to the service workers, both the installation and registering it.

Vite plugins extend their well-designed interface with a few Vite-specific options. With this, you can work and write a vite pluginonce and it will function.

This article will explore how to properly configure worker plugins with Vite for a functional progressive web application (PWA).

What is Vite?

Vite is a build tool that is designed to channel the gap between current and next-generation web development. It centers on providing a faster and more performant skill for developers and current web projects.

Supposing you have used the Vue framework before, you should have used the Vue CLI to develop big and complex projects. While the Vue CLI is a great build tool Vue CLI which stands for (command line interface) is an excellent tool for building Vue developers to manage web pack internals, Evan You, the creator of Vue, created a lightning-fast build tool called Vite in 2020 and also open source JavaScript framework.

What is PWA?

Progressive web application (PWA), from my view, I see PWA as a technology that brings web and mobile development to a new level and a new generation. PWAs define web apps that use manifests, service workers, and other web-platform features in combination with progressive enhancement, giving users a relatively almost the same experience as native applications.

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

What are service workers?

You may think of a service worker as a proxy server that stands within a web app, the browser, and the network, when available. A service worker's goal is to create productive offline experiences, update assets on the server, intercept network requests, and take action based on whether or not the network is available.

What is a manifest?

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

Project setup

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

We will be using VitePWA plugin, in our demo, created by Anthony Fu. This plugin helps to attach service workers in a Vite app for handling:

• Caching resources

  • Offline support

    • Receive push notifications when new content is available.

Scaffolding the Vite project

If you don’t have a Vite-based project already, that you’d like to use to configure your PWA, you can 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

Whenever I’m creating my Vite app, I choose the Vue framework and the JavaScript variant. After the app scaffold is completed, install the application dependencies in the project with the command below:

npm install

To make the local server, you can run the following command below:

npm run dev

Configuration

Let’s proceed and configure our application's worker plugins, VitaPWA.

Firstly, we have to install the package as a dev dependency by running the following command:

npm i vite-plugin-pwa -D

// vite.config.js

import legacy from '@vitejs/plugin-legacy'

import { defineConfig } from 'vite'

export default defineConfig({

plugins: [

legacy({

targets: ['defaults', 'not IE 11']

})

]

})

The plugin also accept presets containing different plugins as a solo element. This is utile for the complicated attributes (such as framework integration) that are carried out using various plugins.

False plugins will be overlooked, which can be used to enable or disable plugins simply.

Registering the workers for our Vite app

Now, that we have installed the worker's plugin, we will need to register the service workers. The site-plugin-PWAplugin registers the service worker automatically using the injectRegisterconfiguration option, which is not mandatory.

To register the service workers, update the vite.config.js or vite.config.ts file, according to the variant you preferred upon project scaffolding. Import VitePWA from vite-plugin-PWA and the plugin so that it looks like the 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' })],

});

Since we have registered our Vite-plugin-PWAwith the code block above, we can now make use of it to generate its web app manifest and place it in front as against building an app.

You can build your Vite app using the command below:

npm run build

With this little configuration of the vite-plugin-pwaplugin, our application will now be able to create the web app manifest, put it at the entry point upon app build, create the service worker, and register it in the browser.

If the version of your vite-plugin-PWA is ≤v0.12.2 or less, then make use of injectRegister to configure the registerType as stated below:

impor t { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({

plugins: [

...,

VitePWA({

injectRegister: 'auto'

})

]

})

We are going to build the Vite application using the code block below:

npm run build

When you build an app, a distfolder is a folder that holds or handles the different files created, which includes the JavaScript variant for the service worker file and the app manifest.

Now, that we have configured the service worker successfully with our vite application created earlier, the app can function completely as work offline and as a functional web application.

Conclusion

The vite-plugin-pwaoffers a convenient and easy way to build a standard web application with Vite into a wholly developed PWA.

In as much as building a good web application look difficult, it would be nice to make use of this framework VitePWA Plugin Just install the plugin and watch it do all the bulky work.