# worker-web

> a workerjs plugin

Latest version **0.1.9** (published 2022-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install worker-web
pnpm add worker-web
yarn add worker-web
bun add worker-web
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2022-01-19 |
| First published | 2021-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | flyingTodream |
| Maintainers | flydream |
| Keywords | worker, web worker, workerjs |

## Links

- npm: https://www.npmjs.com/package/worker-web
- Repository: https://github.com/flyingTodream/worker-js
- Homepage: https://github.com/flyingTodream/worker-js.git
- Issues: https://github.com/flyingTodream/worker-js/issues
- npm.io page: https://npm.io/package/worker-web

## Alternatives

- [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads
- [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads
- [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads
- [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads
- [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads

## Recent versions

- 0.1.9 (latest) — 2022-01-19
- 0.1.8 — 2022-01-19
- 0.1.7 — 2022-01-19
- 0.1.4 — 2021-12-23
- 0.1.2 — 2021-12-22

## README

## 使用Web Worker实现更新内容通知功能

### Web Worker的优势

Web Work会为javascript创建多线程环境，不会阻塞主线程，影响页面渲染速度和页面性能。Web Work可以在不添加额外服务器的情况下实现前端更新通知的功能，使成本最小化。相比于SSE（Server-sent Events）不依赖于任何一端，前端具有完全掌控权

------

### 实现

#### 实现原理

由于环境变量在不刷新页面的情况下不会改变，而静态文件的内容可以实时获取到最新值，所以可以根据这个特性实现前端更新通知功能

#### 实现过程

在打包过程中，获取git commit 的hash值，写在public静态文件夹内和项目环境变量中， 页面主线程获取到环境变量后，开启一个worker线程监听worker消息，并把环境变量传递到worker线程。在worker线程中获取到主线程传来的commit hash后，会不停轮询获取静态文件中的commit hash，并进行对比，如果静态文件中的commit hash与环境变量中的commit hash不一致，就会发送消息给页面主线程，通知有新内容更新

#### 使用方法（jenkins）

打包过程中设置环境变量，在jenkins加入以下代码（需在打包命令前）：

[jenkins打包环境git变量参考](https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Complete-Jenkins-Git-environment-variables-list-for-batch-jobs-and-shell-script-builds)

```bash
echo ${GIT_COMMIT} > public/version.txt    // commit hash 为避免项目本身version.txt里面有内容，第一步直接覆盖文件
git log --oneline -1  >> public/version.txt // commit message
echo 'VITE_HASH='${GIT_COMMIT} > .env
```

<u>**注：commit hash 必须在 commit message之前，commit message可不传。**</u>

<u>**“>”会覆盖原文件 ，“>>”是在原文件基础上追加至文件尾部**</u> 

##### 引入workerjs

```javascript
import Workerjs  from 'worker-web'
```

##### 创建Workjs对象接收以下参数

| 参数名      |类型| 是否必填 |默认值 | 说明  |
| :---------:  | --- | -------- | ---- | ----------------------------- |
| commitHash  |String| 是       | 无 | 项目中获取或环境变量中的commithash |
| pollingTime |Number| 否       | 15 | 轮询检查更新时间(单位：s) |
| versionUrl |String| 否 | /version.txt | 默认去找域名根目录的version.txt，如果路径配置不正确，会导致查不到最新的hash值，（不加域名） |
|onUpdate |(message: string) => {}|否|空函数|捕捉到有新内容更新的回调函数，可以在里面做提示更新等操作，参数为更新日志，无更新日志时，值为空字符串|

e.g.

```javascript
import Workerjs  from 'worker-web' 
let work = new Workerjs({
   commitHash: 'xxxxxxxxxxxx', 
   pollingTime: 1, 
   versionUrl: '/version.txt',
   onUpdate: (message: string) => {}
})
work.createWorkerjs()
```

#### 方法

**createWorkerjs**
创建worker线程

**close**
关闭worker线程

在vue-ts引用，编辑器可能会报错，在shims-vue.d.ts文件里添加以下代码即可

```javascript
declare module 'worker-web'
```

---
_Source: https://npm.io/package/worker-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._