Javascript code to Detect Private and Incognito Browsing Mode. You can implement a Paywall System by detecting private or incognito browsing.
You can implement a Paywall System with Javascript blocking the Private or Incognito browsing in your Website using this code.
This detector can identify Bots Browsing your application and you can turn on/turn off this detection.
With Bot detector on, when Googlebot visit your page you don't block it!
You can include the /dist/BrowsingModeDetector.js or /dist/BrowsingModeDetector.gz via <script> tag direct on your application or via npm:
npm i js-detect-incognito-private-browsing -S
Passing a callback to BrowsingModeDetector.do() method you can implement the needed behaviour testing the returned value:
var myCallback = function (browsingInIncognitoMode, BrowsingModeDetectorInstance) {
console.log('Is private?', browsingInIncognitoMode);
console.log('Browsing Mode:', BrowsingModeDetectorInstance.getBrowsingMode());
if (browsingInIncognitoMode) {
// Incognito, Private mode detected
return;
}
// Normal mode detected
};
var BrowsingModeDetector = new BrowsingModeDetector();
BrowsingModeDetector.do(myCallback);
You can use a default callback combined with specific callbacks for each browsing method:
var callbackWhenNormalMode = function () {
console.log('callbackWhenNormalMode called');
};
var callbackWhenIncognitoOrPrivateMode = function () {
console.log('callbackWhenIncognitoOrPrivateMode');
};
var defaultCallback = function (browsingInIncognitoMode) {
console.log('This callback will be called either private or normal mode detected, optional though. Is private or incognito?', browsingInIncognitoMode);
};
var BrowsingModeDetector = new BrowsingModeDetector();
BrowsingModeDetector
.setCallbackForNormalMode(callbackWhenNormalMode)
.setCallbackForIncognitoOrPrivateMode(callbackWhenIncognitoOrPrivateMode)
.do(defaultCallback); // optional if callbacks are given for normal and private modes
Possible callbacks arrangements:
- Only Default Callback using
.do(callback)method - Callback for Normal Mode
.setCallbackForNormalMode(callback)combined with Private Mode.setCallbackForIncognitoOrPrivateMode(callback) - Default Callback combined with Normal Mode and Private/Incognito Mode Callbacks
On callbacks you can use the .getBrowsingMode() if necessary, because a instance of BrowsingModeDetector is
passed for all callback functions:
var callbackWhenNormalMode = function (BrowsingModeDetectorInstance) {
console.log('callbackWhenNormalMode called when', BrowsingModeDetectorInstance.getBrowsingMode());
};
var callbackWhenIncognitoOrPrivateMode = function (BrowsingModeDetectorInstance) {
console.log('callbackWhenIncognitoOrPrivateMode called when', BrowsingModeDetectorInstance.getBrowsingMode());
};
var defaultCallback = function (browsingInIncognitoMode, BrowsingModeDetectorInstance) {
console.log('Is private or incognito?', browsingInIncognitoMode);
if (BrowsingModeDetectorInstance.getBrowsingMode() === BrowsingModeDetectorInstance.BROWSING_NORMAL_MODE) {
console.log('Do something if is NORMAL_MODE!');
} else {
console.log('Do something if is INCOGNITO_PRIVATE_MODE!');
}
};
Note that will be passed a BrowsingModeDetector instance for each user defined callback and for default callback to
.do(callback) method will be passed as first param of callback a boolean value meaning browsing in incognito mode
when true and a BrowsingModeDetector instance as second param of callback.
If you have a Website, probably you want to ignore if Bots are browsing:
var BrowsingModeDetector = new BrowsingModeDetector();
BrowsingModeDetector.do(myCallback);
// or BrowsingModeDetector.ignoringBots().do(myCallback);
Or testing for Bots too(e.g: if Googlebot browse your site, the detector will return that browsing mode is private):
var BrowsingModeDetector = new BrowsingModeDetector();
BrowsingModeDetector.notIgnoringBots().do(myCallback);
You can test if is a Bot browsing in two ways:
var isBot = BrowsingModeDetector.isBotBrowsing();
console.log('Is Bot:', isBot);
Or passing a callback to isBotBrowsing method:
var isBot = BrowsingModeDetector.isBotBrowsing(function(isBot) {
console.log('Is Bot:', isBot);
});
For a complete example with JS and HTML see the /example/index.html file.
Clone this repo and you can use npm and webpack to compile the code. Install the requirements:
git clone https://github.com/Maykonn/js-detect-incognito-private-browsing-paywall
npm install
In your dev environment you can run (will compile the code and open the example app at localhost:8080/):
npm run start
Build the code to production at /dist directory (minify, uglify, remove comments, logs, etc):
npm run build
The npm run build command will generate two file at /dist directory, BrowsingModeDetector.gz and BrowsingModeDetector.js.
You can contribute cloning this repository from github clicking here.
So, you just need to create a new branch using a name related to the new functionality which you'll create.
And after finish your code, you just need to create a pull request which will be revised, merged to master(if the code
doesn't break the lib) branch and published a new release of this library.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent