open-index/open-npm huggingface dataset:
npm package: @rrd/workbox-backgroundsync-message
Description: Extending workbox backgroundsync plugin with response messages
Author: rrd108
Latest version: 1.0.3

# Workbox BackgroundSync Message

This plugin extends workbox backgroundsync plugin with catching response messages and send them to the UI thread. It is useful when you need the response from the API server after background-sync was successful.

> This class is made for `@vue/cli-plugin-pwa` what uses workbox 4.3.1. At the time of writing of this plugin, the current workbox version is 6.0.2 but this functionality is still missing.

Workbox backgroundSync is amazing [https://developers.google.com/web/tools/workbox/modules/workbox-background-sync](https://developers.google.com/web/tools/workbox/modules/workbox-background-sync) but I think in **most cases** we need the response from the API when the backgroundSync is finished.

**Pull requests are welcome**

# Usage

There are a few things should be in place to get the response

1. Install

`npm i @rrd/workbox-backgroundsync-message`

Copy the plugin file to `src`

`cp node_modules/@rrd/workbox-backgroundsync-message/backgroundSyncMessagePlugin.js src/`

First copy the plugin file from your `node_modules` folder to your `src` folder. As service workers have their own scope it should be done manually, it can not be imported.
This step should be done again on updating this plugin.
(Maybe a `postinstall` script in `package.json` could solve this).

Alternatively you can just copy the `backgroundSyncMessagePlugin.js` file from the repo to your `src` folder.

2. Postbuild script

Add this new line to your `package.json` file at the `scripts` block. This will copy the plugin from `src` to `dist` after each build.

````json
  "postbuild": "cp src/backgroundSyncMessagePlugin.js dist/",
````

3. `/vue.config.js`

````js
module.exports = {
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: './src/sw.js',
    }
  }
}
````

4. `/src/sw.js`

````js
importScripts('/backgroundSyncMessagePlugin.js')

// your workbox service worker stuff here

// and use this plugin for any of your routes
workbox.routing.registerRoute(
  'https://your.apiurl.here',
  new workbox.strategies.NetworkOnly({
    plugins: [
      new BackgroundSyncMessagePlugin('your-choosen-queue-name', { maxRetentionTime: 1440 })
    ]
  }),
  'POST'
)
````

5. At any of your components

````js
created(){
    navigator.serviceWorker.addEventListener('message', event => {
      // do whatever you want with the response
      console.warn('message got in this component', event.data);
    });
  },
````
npm package: @rrdawlx/vue-project-cli
Description: vue project command line tool
Author: rrdawlx
Latest version: 0.9.4

# vue-project-cli
vue project command line tool

# 使用
```
Usage: vp [options] [command]

Options:
  -v, --version       output the version number
  -h, --help          output usage information

Commands:
  init [directory]    新建项目，如未提供目录名 directory，则以当前目录为根目录新建项目。
  dev                 项目开发
  build               项目构建
  inspect             查看项目配置
  check-version       校验项目中 package.json 的 version 字段是否已升级
  check-npm-pub       执行 npm publish 前的检查工作
  add-version-tag     给项目仓库打上基于当前 commit 中的 package.json 中 version 的 tag
  print-deps-version  输出项目依赖的版本信息
  help [cmd]          display help for [cmd]
```
```
Usage: vp-init [options] [directory]

Options:
  --no-install  不执行 npm install 命令
  -h, --help    output usage information
```
```
Usage: vp-dev [options]

Options:
  --mode <mode>     项目模式，根据此值选择 webpack 配置，可选项：development、production。 (default: "development")
  --node-env <env>  设置 process.env.NODE_ENV 的值，默认与 mode 为相同值。
  -h, --help        output usage information
```
```
Usage: vp-build [options]

Options:
  --mode <mode>     项目模式，根据此值选择 webpack 配置，可选项：development、production。 (default: "production")
  --node-env <env>  设置 process.env.NODE_ENV 的值，默认与 mode 为相同值。
  -h, --help        output usage information
```
```
Usage: vp-inspect [options]

Options:
  --mode <mode>     项目模式，根据此值选择 webpack 配置，可选项：development、production。 (default: "production")
  --node-env <env>  设置 process.env.NODE_ENV 的值，默认与 mode 为相同值。
  -h, --help        output usage information
```

# 示例
vp-init  
<img src="./imgs/init.png" width="600px" />

vp-dev  
<img src="./imgs/dev.png" width="600px" />

vp-build  
<img src="./imgs/build.png" width="600px" />

vp-inspect  
<img src="./imgs/inspect.png" width="600px" />

vp-check-version  
<img src="./imgs/check-version-1.png" width="300px" />
<img src="./imgs/check-version-2.png" width="400px" />

vp-check-npm-pub  
<img src="./imgs/check-npm-pub.png" width="400px" />

vp-add-version-tag  
<img src="./imgs/add-version-tag.png" width="400px" />

vp-print-deps-version  
<img src="./imgs/print-deps-version.png" width="600px" />

# 开发
1. 在项目根目录执行 [```npm link```](https://docs.npmjs.com/cli-commands/link.html) 以在全局注册 vp 命令；
2. 执行 ```vp -v``` 测试 vp 命令是否可用。