Introduction

A webpack plugin that reminds the user of new release to refresh page.

Features

• Using visibilitychange API, see details at MDN and its compatibility. It is more in line with our expectations.
• Normal desktop pages will show refresh popup at right-bottom corner and fresh by clicking refresh button, iframe desktop pages have an iframe option to show refresh popup or refresh directly without any reminding by default. Mobile pages will refresh directly without any reminding. Pages visibility states embedded in iframe are the same as parent document.
• When page becomes hidden, cancel request if it is not completed, do nothing if request is completed. When page becomes visible, throttle to avoid fetching interface frequently, do nothing if refresh popup exists already.
• None dependency, none invasion, and simple compression.

Install

npm i refresh-helper-webpack-plugin -D

Usage

Modify your vue.config.js like below limited in build script.

const RefreshHelperWebpackPlugin = require('refresh-helper-webpack-plugin')

module.exports = {
  // ...
  configureWebpack: config => {
    // ...
    process.argv.includes('build') && config.plugins.push(new RefreshHelperWebpackPlugin())
    // ...
  }
  // ...
};

Change the pages/message/btnText/throttle/iframe option if needed, see default value in Options section.

const RefreshHelperWebpackPlugin = require('refresh-helper-webpack-plugin')

module.exports = {
  // ...
  configureWebpack: config => {
    // ...
    process.argv.includes('build') && config.plugins.push(new RefreshHelperWebpackPlugin({
      pages: 'other.html', // String or Array
      message: '提示信息文本',
      btnText: '按钮文本',
      throttle: 180000, // 3 minutes
      iframe: true
    }))
    // ...
  }
  // ...
};

In addition, an envrionment variable named process.env.VUE_APP_VSERION representing the current version has been injected.

Options

Name	Type	Required	Default	Description
pages	String/Array	false	output pages	compiled html file name
message	String	false	发现新版本啦	new release message
btnText	String	false	更新	refresh button text
throttle	Number	false	60000	delay between two requests
iframe	Boolean	false	false	show popup or not

License

The MIT License