webpack-obsolete-plugin

Introduction

These 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

Demo

You can see demo here, with edge 103 as supported browser

Prerequisite

• Node >=8.3.0
• Webpack 5.x

Installation

npm i -D webpack-obsolete-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 WebpackObsoletePlugin = require('webpack-obsolete-plugin');

module.exports = {
  // ...
  plugins: [
    // ...
    new HtmlWebpackPlugin(),
    new WebpackObsoletePlugin()
  ]
};

Usage without webpack

Apply script to you'r main html file, pass to obsolete function browsers thet you support.

<script src="./node_modules/webpack-obsolete-plugin/obsolete.js"></script> // or you'r own path to obsolete.js
<script>obsolete(['edge 103']);</script>

Configuration

Options

Name	Type	Default	Description
template	string	Animated html	You can paste any custom html you want, it will replace default. In addition you can place {{browsers}} in your html, it will be replaced with browsers from your Browserslist. Links without the "href" attribute will be fire new tab and display supported browsers from your Browserslist.
isStrict	boolean	false	This option ensures that if the browser being used does not exist in Browserslist then alert will be shown. Example: You'r Browserslist contains chrome 95, edge 100 as supported browsers, used browser is Edge 95 If option isStrict: true => alert will be shown. If option isStrict: false => As Edge browser supports Chrome features(wich ensure by userAgent), alert don't be shown

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.