Awesome

Obsolete Webpack Plugin

Introduction :star2:

A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on Browserslist and prompts website users to upgrade it.

Motivation :collision:

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.

Getting Started :zap:

Prerequisite

Node >=8.3.0
Webpack 4.x

Installation

$ npm i -D obsolete-webpack-plugin

Basic Usage

Apply 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()
  ]
};

Best Practice

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'
    })
  ]
};

Configuration :book:

Options

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. <br>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.

Demonstration :art:

Browser Support :eyeglasses:

The name matches Browserslist queries.

Desktop

IE	Edge	Chrome	Safari	Firefox	Opera	Electron

Mobile

ChromeAndroid	Android<br>(5+, WebView)	iOS<br>(OS)

FAQ :tea:

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.