Skip to content

Commit

Permalink
Stop testing in old browsers (#854)
Browse files Browse the repository at this point in the history
  • Loading branch information
Finesse committed Dec 29, 2022
1 parent c8c9f8e commit 25cfcb2
Show file tree
Hide file tree
Showing 12 changed files with 1,045 additions and 2,905 deletions.
6 changes: 0 additions & 6 deletions contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,6 @@ yarn playground:build

The result will appear at `playground/dist`.

If the commands fail with `Error: error:0308010C:digital envelope routines::unsupported`, use a workaround:
```bash
# For Linux, macOS and WSL (Linux on Windows)
NODE_OPTIONS=--openssl-legacy-provider yarn ...put the command name here...
```

### Code style

The code style is controlled by [ESLint](https://eslint.org) and [Prettier](https://prettier.io).
Expand Down
19 changes: 17 additions & 2 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,23 @@ The library supports all the popular installation methods:

[Run this code](https://stackblitz.com/edit/fpjs-3-cdn?file=index.html&devtoolsheight=100)

For browsers that don't support [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
see the [browser support guide](browser_support.md#import-support).
### Browser `<script>` tag

A synchronous code that pauses the other scripts during loading and therefore not recommended:

```html
<!-- Note that we use iife.min.js -->
<script src="https://openfpcdn.io/fingerprintjs/v3/iife.min.js"></script>
<script>
// Initialize the agent at application startup.
var fpPromise = FingerprintJS.load()
// Analyze the visitor when necessary.
fpPromise
.then(fp => fp.get())
.then(result => console.log(result.visitorId))
</script>
```

### UMD

Expand Down
112 changes: 5 additions & 107 deletions docs/browser_support.md
Original file line number Diff line number Diff line change
@@ -1,117 +1,15 @@
# Browser support

The library supports all popular browsers.
We use the following command to determine which browsers to support:

```bash
npx browserslist "cover 96% in us, not IE < 11"
```
We aim to cover at least 99% of all users according to the Fingerprint Pro statistics.

At the moment, these browsers are:

- **Internet Explorer** 11 ([see the section below](#old-browsers-requirements))
- **Edge** 93+
- **Chrome** 49+
- **Firefox** 52+
- **Edge** 105+
- **Chrome** 57+
- **Firefox** 67+
- **Desktop Safari** 12.1+
- **Mobile Safari** 10.3+
- **Mobile Safari** 11.0+
- **Samsung Internet** 14.0+
- **Android Browser** 4.4+ ([see the section below](#old-browsers-requirements))

Other browsers will probably also work, but we don't guarantee it.

## Old browsers requirements

### `import()` support

If you use the "Browser ECMAScript module" installation methods, you may have an error.
Old browsers don't support [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
Replace it with a `<script>` tag:

```diff
+ // Note that we use iife.min.js with older browsers
+ <script src="https://openfpcdn.io/fingerprintjs/v3/iife.min.js"></script>
<script>
- const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
- .then(FingerprintJS => FingerprintJS.load())
+ var fpPromise = FingerprintJS.load()

// ...
</script>
```

### Polyfills

Very old browsers like Internet Explorer 11 and Android Browser 4.4
require a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) polyfill to work.
Add a Promise polyfill before loading the FingerprintJS agent.
Examples for various installation methods:

#### Script tag

```diff
+ <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://openfpcdn.io/fingerprintjs/v3/iife.min.js"></script>
<script>
var fpPromise = FingerprintJS.load()

// ...
</script>
```

#### UMD

```diff
require(
[
'https://openfpcdn.io/fingerprintjs/v3/umd.min.js',
+ 'https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js',
],
function (FingerprintJS) {
// ...
}
)
```

#### Webpack/Rollup/NPM/Yarn

```bash
# Install the polyfill package first:
npm i promise-polyfill
# or
yarn add promise-polyfill
```

```diff
+ import 'promise-polyfill/src/polyfill'
import FingerprintJS from '@fingerprintjs/fingerprintjs'

// ...
```

An outdated CommonJS syntax:

```diff
+ require('promise-polyfill/src/polyfill')
const FingerprintJS = require('@fingerprintjs/fingerprintjs')

// ...
```

### Code syntax

Old browsers like IE11 don't support `const`, `let` and arrow functions (`=>`).
Use `var` and the classic function syntax instead:

```diff
- const fpPromise = FingerprintJS.load()
+ var fpPromise = FingerprintJS.load()

fpPromise
- .then(fp => fp.get())
+ .then(function (fp) { return fp.get() })
- .then(result => {
+ .then(function (result) {
// Handle the result
})
```
5 changes: 2 additions & 3 deletions docs/migrating_v1_v3.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ This guide shows how to migrate your code from FingerprintJS version 1 to versio

## Browser support

The support of Internet Explorer 10 and older has been dropped.
Some old browsers like Internet Explorer 11 and Android Browser 4.4 require a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) polyfill;
see the [browser support guide](browser_support.md#old-browsers-requirements) to learn more about usage with these browsers.
The support of Internet Explorer and some other browsers has been dropped.
See the list of supported browsers in the [browser support guide](browser_support.md).

## Installation

Expand Down
5 changes: 2 additions & 3 deletions docs/migrating_v2_v3.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ This guide shows how to migrate your code from FingerprintJS version 2 to versio

## Browser support

The support of Internet Explorer 10 and older has been dropped.
Some old browsers like Internet Explorer 11 and Android Browser 4.4 require a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) polyfill;
see the [browser support guide](browser_support.md#old-browsers-requirements) to learn more about usage with these browsers.
The support of Internet Explorer and some other browsers has been dropped.
See the list of supported browsers in the [browser support guide](browser_support.md).

## Installation

Expand Down
42 changes: 17 additions & 25 deletions karma.conf.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,30 +40,30 @@ const firefoxIncognitoCapabilities = {
/* eslint-disable max-len */
// prettier-ignore
const browserstackBrowsers = {
IE11: { os: 'Windows', os_version: '7', browser: 'IE', browser_version: '11.0' },
Windows11_EdgeLatest: { os: 'Windows', os_version: '11', browser: 'Edge', browser_version: 'latest-beta' },
Windows10_Chrome49: { os: 'Windows', os_version: '10', browser: 'Chrome', browser_version: '49.0' },
// Windows10_Chrome49_Incognito: { os: 'Windows', os_version: '10', browser: 'Chrome', browser_version: '49.0', ...chromeIncognitoCapabilities },
Windows10_Chrome57: { os: 'Windows', os_version: '10', browser: 'Chrome', browser_version: '57' },
// Windows10_Chrome57_Incognito: { os: 'Windows', os_version: '10', browser: 'Chrome', browser_version: '57', ...chromeIncognitoCapabilities },
Windows11_ChromeLatest: { os: 'Windows', os_version: '11', browser: 'Chrome', browser_version: 'latest-beta' },
// Windows11_ChromeLatest_Incognito: { os: 'Windows', os_version: '11', browser: 'Chrome', browser_version: 'latest-beta, ...chromeIncognitoCapabilities },
Windows10_Firefox52: { os: 'Windows', os_version: '10', browser: 'Firefox', browser_version: '52.0' },
// Windows10_Firefox52_Incognito: { os: 'Windows', os_version: '10', browser: 'Firefox', browser_version: '52.0', ...firefoxIncognitoCapabilities },
Windows10_Firefox67: { os: 'Windows', os_version: '10', browser: 'Firefox', browser_version: '67' },
// Windows10_Firefox67_Incognito: { os: 'Windows', os_version: '10', browser: 'Firefox', browser_version: '67', ...firefoxIncognitoCapabilities },
Windows11_FirefoxLatest: { os: 'Windows', os_version: '11', browser: 'Firefox', browser_version: 'latest-beta' },
// Windows11_FirefoxLatest_Incognito: { os: 'Windows', os_version: '11', browser: 'Firefox', browser_version: 'latest-beta, ...firefoxIncognitoCapabilities },
OSXMojave_Safari12: { os: 'OS X', os_version: 'Mojave', browser: 'Safari', browser_version: '12.1' },
OSXMonterey_Safari15: { os: 'OS X', os_version: 'Monterey', browser: 'Safari', browser_version: '15.0' },
OSXMonterey_ChromeLatest: { os: 'OS X', os_version: 'Monterey', browser: 'Chrome', browser_version: 'latest-beta' },
// OSXMonterey_ChromeLatest_Incognito: { os: 'OS X', os_version: 'Monterey', browser: 'Chrome', browser_version: 'latest-beta, ...chromeIncognitoCapabilities },
OSXMonterey_FirefoxLatest: { os: 'OS X', os_version: 'Monterey', browser: 'Firefox', browser_version: 'latest-beta' },
// OSXMonterey_FirefoxLatest_Incognito: { os: 'OS X', os_version: 'Monterey', browser: 'Firefox', browser_version: 'latest-beta, ...firefoxIncognitoCapabilities },
OSXMonterey_EdgeLatest: { os: 'OS X', os_version: 'Monterey', browser: 'Edge', browser_version: 'latest-beta' },
Android11_ChromeLatest: { device: 'Google Pixel 4', os: 'Android', os_version: '11.0', browser: 'Chrome', browser_version: 'latest-beta' },
iOS10_Safari: { device: 'iPhone 7', os: 'iOS', os_version: '10', browser: 'Safari' },
Windows11_EdgeLatest: { os: 'Windows', os_version: '11', browser: 'Edge', browser_version: 'latest-beta' },
'OSX10.14_Safari12': { os: 'OS X', os_version: 'Mojave', browser: 'Safari', browser_version: '12' },
OSX12_Safari15: { os: 'OS X', os_version: 'Monterey', browser: 'Safari', browser_version: '15' },
OSX13_Safari16: { os: 'OS X', os_version: 'Ventura', browser: 'Safari', browser_version: '16' },
OSX13_ChromeLatest: { os: 'OS X', os_version: 'Ventura', browser: 'Chrome', browser_version: 'latest-beta' },
// OSX13_ChromeLatest_Incognito: { os: 'OS X', os_version: 'Ventura', browser: 'Chrome', browser_version: 'latest-beta, ...chromeIncognitoCapabilities },
OSX13_FirefoxLatest: { os: 'OS X', os_version: 'Ventura', browser: 'Firefox', browser_version: 'latest-beta' },
// OSX13_FirefoxLatest_Incognito: { os: 'OS X', os_version: 'Ventura', browser: 'Firefox', browser_version: 'latest-beta, ...firefoxIncognitoCapabilities },
OSX13_EdgeLatest: { os: 'OS X', os_version: 'Ventura', browser: 'Edge', browser_version: 'latest-beta' },
Android13_ChromeLatest: { device: 'Google Pixel 7', os: 'Android', os_version: '13.0', browser: 'Chrome', browser_version: 'latest-beta' },
iOS11_Safari: { device: 'iPhone 8 Plus', os: 'iOS', os_version: '11', browser: 'Safari' },
iOS12_Safari: { device: 'iPhone XS', os: 'iOS', os_version: '12', browser: 'Safari' },
iOS13_Safari: { device: 'iPhone 11 Pro', os: 'iOS', os_version: '13', browser: 'Safari' },
iOS14_Safari: { device: 'iPhone 11', os: 'iOS', os_version: '14', browser: 'Safari' },
iOS15_Safari: { device: 'iPhone 11 Pro', os: 'iOS', os_version: '15', browser: 'Safari' },
iOS15_Safari: { device: 'iPhone 13', os: 'iOS', os_version: '15', browser: 'Safari' },
iOS16_Safari: { device: 'iPhone 14', os: 'iOS', os_version: '16', browser: 'Safari' },
}
/* eslint-enable max-len */

Expand All @@ -72,15 +72,7 @@ function makeBuildNumber() {
}

function setupLocal(config: Config) {
const files = [
// The polyfills are required for old supported browsers.
// They should be removed when the old browser support is dropped.
'node_modules/promise-polyfill/dist/polyfill.js',

'src/**/*.ts',
'tests/**/*.ts',
'dist/fp.min.js',
]
const files = ['src/**/*.ts', 'tests/**/*.ts', 'dist/fp.min.js']

config.set({
frameworks: ['jasmine', 'karma-typescript'],
Expand Down
20 changes: 9 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,24 +49,23 @@
"devDependencies": {
"@rollup/plugin-json": "^5.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-terser": "^0.1.0",
"@rollup/plugin-typescript": "^9.0.2",
"@rollup/plugin-terser": "^0.2.1",
"@rollup/plugin-typescript": "^10.0.1",
"@types/jasmine": "^3.10.3",
"@types/karma": "^6.3.3",
"@types/karma-browserstack-launcher": "^1.6.2",
"@types/karma-spec-reporter": "^0.0.3",
"@types/karma-summary-reporter": "^3.1.0",
"@types/terser-webpack-plugin": "^4.2.2",
"@types/ua-parser-js": "^0.7.36",
"@typescript-eslint/eslint-plugin": "^5.44.0",
"@typescript-eslint/parser": "^5.44.0",
"clean-webpack-plugin": "^3.0.0",
"clean-webpack-plugin": "^4.0.0",
"eslint": "^8.27.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"file-loader": "^6.2.0",
"got": "^11.8.5",
"html-webpack-plugin": "^4.5.2",
"html-webpack-plugin": "^5.5.0",
"karma": "^6.4.1",
"karma-browserstack-launcher": "^1.6.0",
"karma-chrome-launcher": "^3.1.1",
Expand All @@ -76,18 +75,17 @@
"karma-summary-reporter": "^3.1.1",
"karma-typescript": "^5.5.3",
"prettier": "^2.7.1",
"promise-polyfill": "^8.2.3",
"rimraf": "^3.0.2",
"rollup": "^3.3.0",
"rollup-plugin-dts": "^5.1.0",
"rollup-plugin-license": "^3.0.1",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^8.4.0",
"terser-webpack-plugin": "^5.3.6",
"ts-loader": "^9.4.2",
"ts-node": "^10.9.1",
"typescript": "^4.9.3",
"ua-parser-js": "^0.7.32",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3"
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
1 change: 0 additions & 1 deletion playground/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'promise-polyfill/src/polyfill'
import * as FingerprintJS from '../src'
import { errorToObject } from '../src/utils/misc'

Expand Down
12 changes: 8 additions & 4 deletions playground/webpack.config.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import type { ConfigurationFactory } from 'webpack'
import { ConfigOptions } from 'webpack-cli'
import { Configuration as DevServer } from 'webpack-dev-server'
import * as HtmlWebpackPlugin from 'html-webpack-plugin'
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
import * as TerserPlugin from 'terser-webpack-plugin'
import terserConfig from '../terser.config'

const configurationFactory: ConfigurationFactory = (_env, { mode = 'development' }) => ({
const configurationFactory: ConfigOptions = (_env, { mode = 'development' }) => ({
entry: './index.ts',
mode,
resolve: {
Expand Down Expand Up @@ -46,15 +47,18 @@ const configurationFactory: ConfigurationFactory = (_env, { mode = 'development'
},
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
},
allowedHosts: 'all',
} satisfies DevServer,
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
title: `FingerprintJS Open Source ${mode === 'development' ? 'Playground' : 'Demo'}`,
}),
],
// https://stackoverflow.com/a/71739898/1118709
// Correct (but not worth effort) solutions: build-time macros, custom JSON loader, Rollup instead of Webpack, riot
ignoreWarnings: [/Should not import the named export 'version' .* from default-exporting module/],
})

export default configurationFactory
6 changes: 2 additions & 4 deletions src/sources/audio.test.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import { getBrowserMajorVersion, isMobile, isSafari, isTrident } from '../../tests/utils'
import { getBrowserMajorVersion, isMobile, isSafari } from '../../tests/utils'
import getAudioFingerprint, { SpecialFingerprint } from './audio'

describe('Sources', () => {
describe('audio', () => {
it('returns expected value type depending on the browser', async () => {
const result = getAudioFingerprint()

if (isTrident()) {
expect(result).toBe(SpecialFingerprint.NotSupported)
} else if (isSafari() && isMobile() && (getBrowserMajorVersion() ?? 0) < 12) {
if (isSafari() && isMobile() && (getBrowserMajorVersion() ?? 0) < 12) {
// WebKit has stopped telling its real version in the user-agent string since version 605.1.15,
// therefore the browser version has to be checked instead of the engine version.
expect(result).toBe(SpecialFingerprint.KnownToSuspend)
Expand Down
3 changes: 1 addition & 2 deletions src/sources/indexed_db.test.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { isEdgeHTML, isTrident } from '../../tests/utils'
import getIndexedDB from './indexed_db'

describe('Sources', () => {
describe('indexedDB', () => {
it('returns boolean or undefined depending on the browser', () => {
expect(typeof getIndexedDB()).toBe(isTrident() || isEdgeHTML() ? 'undefined' : 'boolean')
expect(getIndexedDB()).toBeInstanceOf(Boolean)
})
})
})
Loading

0 comments on commit 25cfcb2

Please sign in to comment.