A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on Browserslist and prompts website users to upgrade it.
In modern front-end development, we use toolchain to convert next JavaScript version into a backwards compatible version of JavaScript that works in older browser environment. For next syntax features, such as Object Rest/Spread Properties, Exponentiation Operator, we can transform all of them through AST parser. For next built-in features, such as Promise, WeakMap, String.prototype.padstart, we can provide pollyfills that mimic native functionality. However, for some browser only features, such as Service Worker, WebAssembly, CSS Grid Layout, no polyfills support these or partially support. In the worst case, our users who use old browsers open a website but catch a sight of blank page. It may be a bad network condition, may be syntax parsing error, may be built-in losing. But they must not realize that the browser they using does not meet the requirements of our website target. Therefore, we need a mechanism to notify that they should upgrade their browser before accessing content. Thus, this plugin borns.
- Node >=8.3.0
- Webpack 4.x
$ npm i -D obsolete-webpack-pluginApply the plugin in your Webpack configuration, often used together with html-webpack-plugin. By the way, the putting order of plugins is irrelevant.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');
module.exports = {
// ...
plugins: [
// ...
new HtmlWebpackPlugin(),
new ObsoleteWebpackPlugin()
]
};To improve first page load speed, you should always reduce render-blocking scripts as far as possible. For non-critical script, it's best to mark them with the async attribute. Thanks to script-ext-html-webpack-plugin, we are able to fulfill this goal easily.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
new ObsoleteWebpackPlugin({
name: 'obsolete'
}),
new ScriptExtHtmlWebpackPlugin({
async: 'obsolete'
})
]
};| Name | Type | Default | Description |
|---|---|---|---|
| name | string | 'obsolete' |
The chunk name. |
| template | string | '<div>Your browser is not supported. <button id="obsoleteClose">×</button></div>' |
The prompt html template. It accepts any document fragment. E.g., '<style>...</style><div>...</div><script>...</script>'. Specially, the template will be removed when a node with attribute id="obsoleteClose" is clicked. |
| position | string | 'afterbegin' |
If set 'afterbegin', the template will be injected into the start of body. If set 'beforeend', the template will be injected into the end of body. |
| browsers | string[] | Browsers to support, overriding global browserslist configuration. | |
| promptOnNonTargetBrowser | boolean | false |
If the current browser useragent doesn't match one of the target browsers, it's considered as unsupported. Thus, the prompt will be shown. E.g., your browserslist configuration is ie > 8, by default, the prompt won't be shown on Chrome or Safari browser. E.g., your browserslist configuration is ie > 8, by default, the prompt won't be shown on Chrome or other browsers. Another e.g., your browserslist configuration is chrome > 80, by default, the prompt won't be shown on IE or other browsers. |
| promptOnUnknownBrowser | boolean | true |
If the current browser useragent is unknown, the prompt will be shown. |
The name matches Browserslist queries.
| IE | Edge | Chrome | Safari | Firefox | Opera | Electron |
|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
| ChromeAndroid | Android (5+, WebView) |
iOS (OS) |
|---|---|---|
|
 |
 |
Q: Does this plugin support Yandex, Maxthon, UC or QQ browser?
A: Yep. This plugin supports those browsers based on the mainstream browser kernel, such as Chromium based browser, Mozilla based browser. In other words, Chrome >= 30 will be also applied to Yandex browser, ChromeAndroid >= 30 will be also applied to Android UC browser.
Q: Does plugin work in IE 6?
A: Yep. This plugin supports browsers that implement the full ES3 spec. Although the source code is ES2015+, it will be compiled and shimmed to the target environment eventually.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent