Using Workbox with Webpack to Generate Service Workers
During the past few years, Service Workers emerged to fill the void of background script execution in JavaScript.
With the increasing adoption of Service Workers, many tools and libraries emerged to improve developer productivity. Out of these, one such library is Workbox.
The Workbox
Workbox brings all the best Service Worker creation practices into a single place while removing typical boilerplate work. Besides, you can use it in three different ways.
- **Command-line interface — **Can be integrated into any application.
- **Node.js module —**Can use with any build tool such as gulp.
- Webpack plugin — Integrates with projects that use Webpack.
This article will focus on the third approach since Webpack is one of the most used module bundlers.
So, let’s have a look at how we can use Workbox with Webpack.
Workbox with Webpack
To use Workbox with Webpack, you will have to install the workbox-webpack-plugin. You can use either NPM or Yarn for that:
npm i workbox-webpack-plugin // with NPM
yarn add --dev workbox-webpack-plugin // with Yarn
There are two sub plugins implemented as modules within the workbox-webpack-plugin named GenerateSW and InjectManifest.
So out of these, which one should I choose? To answer that, let’s get into their details.
#front-end-development #pwa #service-worker #web-development #javascript
