Skip to content

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

License

Notifications You must be signed in to change notification settings

ElemeFE/obsolete-webpack-plugin

Repository files navigation

Obsolete Webpack Plugin

npm npm npm npm node npm licenses

Introduction 🌟

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

Motivation πŸ’₯

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 ⚑

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 πŸ“–

Options

Name Type Default Description
name string 'obsolete' The chunk name.
template string '<div>Your browser is not supported. <button id="obsoleteClose">&times;</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.

Demonstration 🎨

Browser Support πŸ‘“

The name matches Browserslist queries.

Desktop

IE Edge Chrome Safari Firefox Opera Electron

Mobile

ChromeAndroid Android
(5+, WebView)
iOS
(OS)

FAQ 🍡

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.

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published