@plugin-web-update-notification/vite weekly downloads statistics

English | 简体中文

plugin-web-update-notification

Detect webpage updates and notify user to reload. support vite, umijs and webpack.

Take the git commit hash (also support svn revision number、package.json version、build timestamp、custom) as the version number, and write version into json file. The client polls the version of the server (visibilitychange or focus event assistant), compares it with the local one, and if it is not the same, notifies the user to refresh the page (you can custom behavior).

When to check for updates (fetch version.json) ?

1. first load page. 2. poll (default: 10601000 ms). 3. script resource loading failure detected (404 ?). 4. when the tab page is refocus or revisible.

Why

Some users do not have the habit of closing web pages. If the front-end page is updated, the user page has always been a historical version, any there may be report an error (file 404) or a white screen.

Install

Usage

vite | umi | webpack

Important: Disable index.html caching!

If index.html is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of index.html. This is also a best practice for deploy SPA applications.

To disable caching through nginx:

Directly disable caching through html meta tags:

Vite

basic usage

custom notification text

internationalization

hidden default notification, listener to update event and custom behavior.

Umijs

webpack

suggest: disabled index.html cache

webUpdateNotice Options

ts • logVersion: (version) => { • console.log(version: %c${version}, 'color: #1890ff') // this is the default behavior • } • ts document.body.addEventListener('plugin_web_update_notice', (e) => { const { version, options } = e.detail // write some code, show your custom notification and etc. alert('System update!') }) • `

export Functions

| name | params | describe |

| window.pluginWebUpdateNotice_.setLocale | locale(preset: zh_CN、zh_TW、en_US) | set locale | | window.pluginWebUpdateNotice_.closeNotification | | close notification | | window.pluginWebUpdateNotice_.dismissUpdate | | dismiss current update and close notification,same behavior as dismiss button | | window.pluginWebUpdateNotice_.checkUpdate | | manual check update, a function wrap by debounce(5000ms) |

What was changed

Q&A

1. TypeScript intellisense, if you use window.pluginWebUpdateNotice_. or listener custom update event。

2. request version.json file get 404 error.

If you upload the production files bundled to cdn server:

Deploy the project in a non-root directory:

After version 1.2.0, in most case, you not need to set injectFileBase, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config

1. Custom notification button event.

2. Custom notification style.

you can cover css styles with higher weights. (default css file)

1. manual check update.

2. Some versions do not notify. For example, if the customer version is v1.0, you need to update to v1.0.1, but do not want to display the update prompt.

License

MIT