# sw-precache-webpack-dev-plugin

> Webpack Plugin for using sw-precache during development with webpack-dev-server

Latest version **0.2.0** (published 2017-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install sw-precache-webpack-dev-plugin
pnpm add sw-precache-webpack-dev-plugin
yarn add sw-precache-webpack-dev-plugin
bun add sw-precache-webpack-dev-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-03-31 |
| First published | 2017-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | ragingwind |
| Maintainers | ragingwind |
| Keywords | webpack, plugin, precache, sw-precache, service, worker, progressive, web, app |

## Links

- npm: https://www.npmjs.com/package/sw-precache-webpack-dev-plugin
- Repository: https://github.com/ragingwind/sw-precache-webpack-dev-plugin
- Homepage: https://github.com/ragingwind/sw-precache-webpack-dev-plugin#readme
- Issues: https://github.com/ragingwind/sw-precache-webpack-dev-plugin/issues
- npm.io page: https://npm.io/package/sw-precache-webpack-dev-plugin

## Dependencies (4)

- [glob](https://npm.io/package/glob.md) ^7.1.1
- [multimatch](https://npm.io/package/multimatch.md) ^2.1.0
- [sw-precache](https://npm.io/package/sw-precache.md) ^4.3.0
- [is-path-inside](https://npm.io/package/is-path-inside.md) ^1.0.0

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2017-03-31
- 0.1.3 — 2017-01-30
- 0.1.2 — 2017-01-30
- 0.1.1 — 2017-01-30
- 0.1.0 — 2017-01-30

## README

# sw-precache-webpack-dev-plugin

> Webpack Plugin for using sw-precache during development with webpack-dev-server

![screen shot 2017-01-30 at 7 08 40 pm](https://cloud.githubusercontent.com/assets/124117/22424472/119a2b7e-e73a-11e6-8b4f-325bc0f81339.png)

## Install

```sh
$ yarn add --dev sw-precache-webpack-dev-plugin
```

or
```sh
$ npm install --save sw-precache-webpack-dev-plugin
```

### How it works

First of all, this plugin works in vary limited situation. This plugin will be applied after `all of assets has been emmited by webpack compiling` that means all of files you wanted to cached by service worker should be listed in assets of webpack compiler. To achive that, you need to use webpack plugins(Copy or ...) to register it. [The latest version supports glob patterns for files located in physical path](https://github.com/ragingwind/sw-precache-webpack-dev-plugin/commit/8babdf7938609f6db5178859b88f6f3365e285c6#diff-168726dbe96b3ce427e7fedce31bb0bcR23) not on memory-fs of webpack. However, I recommend that using webpack plugins to treats and list all of files to server worker's chached manifest. And then your sw.js, will be writed in temporory on memory-fs and webpack dev server will be served it.

*DISCLAIMER*: This plugin isn't able to be work perfectly when it comes to manage kind of files including ambiguous expression of path, For examples, ['*.js', '*.html'], in that case, we couldn't make a right judge for location between physical file path and memory-fs. Therefore, we recommand you use more specific glob patterns for that, like absolute path or relative path expressions.

## Usage

See [basic webpack config files](./example/webpack.config.js) at examples.

### How to test

You can test this plugin by running example application with below commands. It will manage a service worker script while webpack devserver is running. Warn you, you need to make sure that the previous service worker script must be ungresitered or refleshed before you test with a newer version script of updating service worker configuration at webpack config.

```sh
$ yarn start
```

or
```sh
$ npm start
```

and open browser, visit to `localhost:8080`

## Configuration

It will accept and pass through all of [options parameter of sw-precache](https://github.com/GoogleChrome/sw-precache#options-parameter) to [sw-precache](https://github.com/GoogleChrome/sw-precache). By the way, there are more options and a few of specical way to treats passed configurations.

### sw-precache Configurations

- staticFileGlobs: [Array<String>] - Default is empty array, allow dev server to cache all of files in assets on webpack complilation

### Plugin Configurations

- filename: [String] - Service worker script name for serving on dev server. It is same with [sw-precache-webpack-plugin](https://github.com/goldhand/sw-precache-webpack-plugin#configuration).

## Test

It will be covered soon

## License

MIT © [Jimmy Moon](http://ragingwind.me)

---
_Source: https://npm.io/package/sw-precache-webpack-dev-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._