Methods to configure employee plugins in Vite 2.8

You probably have used the framework-agnostic Vite for frontend improvement, you’re in all probability already acquainted with service employees. On this article, we’ll discover the best way to correctly configure employee plugins with Vite for a useful progressive internet software (PWA). However first, it’s necessary for us to get acquainted with some phrases. Let’s get began!

What’s Vite?

In case you’ve used the Vue framework earlier than, you’ve most certainly used the Vue CLI to develop giant and complicated initiatives. Whereas the Vue CLI is a good construct instrument for Vue builders to handle webpack internals, Evan You, the creator of Vue, created a lightning-fast construct instrument referred to as Vite in 2020.

Not like the Vue CLI, Vite isn’t particular to Vue; you may as well use it to develop any JavaScript or TypeScript software. With Vite, if you save your code, you’ll see the adjustments mirrored on the browser in a short time since Vite solely serves and adjustments supply code when the browser requests it.

What’s a PWA?

PWA stands for progressive internet software, which I view as an idea somewhat than an precise know-how. PWAs outline internet apps that use manifests, service employees, and different web-platform options together with progressive enhancement, giving customers a comparatively comparable expertise to native purposes.

Some benefits of utilizing a PWA embody straightforward set up, progressive enhancement, community independence, safety, and search engine optimization advantages.

What are service employees?

You’ll be able to consider a service employee as a proxy server that sits between an internet app, the browser, and the community, when accessible. A service employee goals to create efficient offline experiences, replace belongings on the server, intercept community requests, and take motion based mostly on whether or not or not community is on the market.

Service employees additionally make it attainable to entry push notifications and carry out background API synchronization, together with add to display screen functionalities.

What’s a manifest?

Net app manifests are the a part of a group of PWAs that present details about the online app in a JSON textual content file. A PWA manifest consists of its identify, model, description, icons, and every other obligatory sources that pertain to the applying.

Challenge setup

Now that we all know all of the technical jargon surrounding progressive internet purposes, we’ll learn to configure employee plugins with Vite.

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

• Caching sources
• Offline assist
• Push notifications for when new content material is on the market

Scaffolding the Vite challenge

In case you don’t have already got a Vite-based challenge that you just’d like to make use of to configure your PWA, be happy to create one from any of the accessible templates. You may as well create a brand new Vite challenge by working the next command:

npm create [email protected]

Whereas creating my Vite app, I selected the Vue framework and the JavaScript variant. After the app scaffold is full, set up the applying dependencies within the challenge with the command under:

npm set up

Now, we are able to pace up the native server by working the next command:

npm run dev

At this level, we have now our Vite software up and working.

Configuration

Let’s go forward and configure the employees plugin, VitePWA, in our software. First, we’ll set up the package deal as a dev dependency by working the next command:

npm i vite-plugin-pwa -D

Employees registration

Now that we’ve put in the employees plugin, we’ll must register the service employees. The vite-plugin-pwa plugin registers the service employee mechanically utilizing the injectRegister configuration possibility, which is optionally available.

To register the service employees, replace the vite.config.js or vite.config.ts file, relying on the variant you selected upon challenge scaffolding. Import VitePWA from vite-plugin-pwa and the plugin in order that it seems like code under:

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 software is ready to generate its internet app manifest and inject it on the entry level upon app construct.

You’ll be able to construct your Vite app by working the next command:

npm run construct

With this minimal configuration of the vite-plugin-pwa plugin, our software is now in a position to generate the internet app manifest, inject it on the entry level upon app construct, generate the service employee, and register it within the browser.

In case your model of the vite-plugin-pwa is ≤v0.12.2, make sure that your individual configuration makes use of injectRegister as a substitute of registerType, as proven under:

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

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

Now, we’ll construct the Vite software utilizing the command under:

npm run construct

Upon app construct, a dist folder that holds numerous recordsdata is created, together with the online app manifest and the JavaScript variant for a service employee file.

At this level, we’ve efficiently configured service employees with our Vite software. The app can now carry out as a very useful Progressive Net App and work offline. We made certain to construct our Vite software as a result of the app will solely operate as a PWA when in a manufacturing setting, not in improvement.

Conclusion

The vite-plugin-pwa gives a brilliant handy and easy-to-integrate possibility for turning an ordinary internet software constructed with Vite right into a fully-fledged Progressive Net Software.

Though constructing a progressive internet software may appear to be an uphill job initially, it’s superior that we have now instruments just like the VitePWA plugin to simplify issues for us. Simply set up the plugin and watch it do all of the heavy lifting.

We didn’t dive into extra advanced improvement actions, however we are able to you’ll want to depend on the VitePWA plugin as a place to begin when constructing an offline app.