| 1 | # webpack-obsolete-plugin
|
| 2 |
|
| 3 | ## Introduction
|
| 4 |
|
| 5 | These plugin generates a browser-side standalone script that detects browser compatibility based on [Browserslist](https://github.com/browserslist/browserslist) and prompts website users to upgrade it.
|
| 6 |
|
| 7 | [](https://www.npmjs.com/package/webpack-obsolete-plugin)
|
| 8 | [](https://packagephobia.now.sh/result?p=webpack-obsolete-plugin)
|
| 9 | [](http://npm-stat.com/charts.html?package=webpack-obsolete-plugin)
|
| 10 | [](https://opensource.org/licenses/MIT)
|
| 11 |
|
| 12 | ## Motivation
|
| 13 |
|
| 14 | 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](https://tc39.github.io/proposal-object-rest-spread/), [Exponentiation Operator](http://rwaldron.github.io/exponentiation-operator/), we can transform all of them through [AST](https://astexplorer.net/) parser. For next built-in features, such as [Promise](https://tc39.github.io/ecma262/#sec-promise-objects), [WeakMap](https://tc39.github.io/ecma262/#sec-weakmap-objects), [String.prototype.padstart](https://tc39.github.io/ecma262/#sec-string.prototype.padstart), we can provide pollyfills that mimic native functionality. However, for some browser only features, such as [Service Worker](https://w3c.github.io/ServiceWorker/), [WebAssembly](https://webassembly.github.io/spec/js-api/), [CSS Grid Layout](https://drafts.csswg.org/css-grid/), 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.
|
| 15 |
|
| 16 | ## Getting Started
|
| 17 |
|
| 18 | ### Demo
|
| 19 |
|
| 20 | You can see demo [here](https://andrushkevichmikita.github.io/webpack-obsolete-plugin/), with edge 103 as supported browser
|
| 21 |
|
| 22 | ### Prerequisite
|
| 23 |
|
| 24 | - Node >=8.3.0
|
| 25 | - Webpack 5.x
|
| 26 |
|
| 27 | ### Installation
|
| 28 |
|
| 29 | ```sh
|
| 30 | npm i -D webpack-obsolete-plugin
|
| 31 | ```
|
| 32 |
|
| 33 | ### Basic Usage
|
| 34 |
|
| 35 | Apply the plugin in your Webpack configuration, often used together with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). By the way, the putting order of plugins is irrelevant.
|
| 36 |
|
| 37 | ```js
|
| 38 | const HtmlWebpackPlugin = require('html-webpack-plugin');
|
| 39 | const WebpackObsoletePlugin = require('webpack-obsolete-plugin');
|
| 40 |
|
| 41 | module.exports = {
|
| 42 | // ...
|
| 43 | plugins: [
|
| 44 | // ...
|
| 45 | new HtmlWebpackPlugin(),
|
| 46 | new WebpackObsoletePlugin()
|
| 47 | ]
|
| 48 | };
|
| 49 | ```
|
| 50 |
|
| 51 | ### Usage without webpack
|
| 52 |
|
| 53 | Apply script to you'r main html file, pass to obsolete function browsers thet you support.
|
| 54 |
|
| 55 | ```js
|
| 56 | <script src="./node_modules/webpack-obsolete-plugin/obsolete.js"></script> // or you'r own path to obsolete.js
|
| 57 | <script>obsolete(['edge 103']);</script>
|
| 58 | ```
|
| 59 |
|
| 60 | ## Configuration
|
| 61 |
|
| 62 | ### Options
|
| 63 |
|
| 64 | | Name | Type | Default | Description
|
| 65 | | ------------- |:-------------:|:-------------:|:-------------:|
|
| 66 | | 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](https://github.com/browserslist/browserslist). Links without the "href" attribute will be fire new tab and display supported browsers from your [Browserslist](https://github.com/browserslist/browserslist).|
|
| 67 | | isStrict | boolean | false |This option ensures that if the browser being used does not exist in [Browserslist](https://github.com/browserslist/browserslist) then alert will be shown.<br />Example: You'r [Browserslist](https://github.com/browserslist/browserslist) contains chrome 95, edge 100 as supported browsers, used browser is Edge 95 <br />If option `isStrict: true` => alert will be shown.<br />If option `isStrict: false` => As Edge browser supports Chrome features(wich ensure by userAgent), alert don't be shown|
|
| 68 |
|
| 69 | ## Browser Support
|
| 70 |
|
| 71 | The name matches Browserslist queries.
|
| 72 |
|
| 73 | ### Desktop
|
| 74 |
|
| 75 | IE | Edge | Chrome | Safari | Firefox | Opera | Electron
|
| 76 | :-: | :-: | :-: | :-: | :-: | :-: | :-:
|
| 77 |  |  |  |  |  |  | 
|
| 78 |
|
| 79 | ### Mobile
|
| 80 |
|
| 81 | ChromeAndroid | Android<br>(5+, WebView) | iOS<br>(OS)
|
| 82 | :-: | :-: | :-:
|
| 83 |  |  | 
|
| 84 |
|
| 85 | ## FAQ
|
| 86 |
|
| 87 | Q: Does this plugin support Yandex, Maxthon, UC or QQ browser?
|
| 88 |
|
| 89 | 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.
|