platform_detect 1.3.3

  • README.md
  • Example
  • Installing
  • Versions
  • 91

codecov documentation

platform_detect

A library for detecting browser and platform type and version.

Usage

A simple usage example:

import 'package:platform_detect/platform_detect.dart';

main() {
  if (browser.isChrome) {
	print('thank you for being a friend');
  }

  if (operatingSystem.isMac) {
	print('');
  }
}

Decorating the <html> element with CSS classes

This library can also be used to place CSS classes on the <html> element based on the operating system, browser, or a specific supported feature.

Add the decorator.dart import as shown in the example below, and call decorateRootNodeWithPlatformClasses within main in your application.

import 'package:platform_detect/platform_detect.dart';
import 'package:platform_detect/decorator.dart';

main() {
  decorateRootNodeWithPlatformClasses();
}

The <html> node of your application will now look like something like this:

<html lang="en" class="ua-chrome ua-chrome45 ua-lt-chrome46 ua-lt-chrome47 os-mac no-touch no-mstouch">
  <!-- ... -->
</html>

Feature detection

By default, the only browser feature that the library detects for you is touch / mstouch.

You can extend this functionality to bake in a Modernizr-esque implementation by creating your own Feature instances, and passing a list of them as the features argument to decorateRootNodeWithPlatformClasses:

import 'package:platform_detect/platform_detect.dart';
import 'package:platform_detect/decorator.dart';

// For instance, if you need to detect whether a browser supports H5 canvas stuff...
var canvasFeature = new Feature('canvas', new CanvasElement().context2D != null);

main() {
  // Decorate HTML element
  decorateRootNodeWithPlatformClasses(features: [canvasFeature]);

  // Or use the `isSupported` field somewhere else in your app...
  if (canvasFeature.isSupported) {
    // Do something
  } else {
    // Fall back / warn / etc...
  }
}

The <html> node of your application will now look like something like this for browsers that support canvas:

<html lang="en" class="canvas ...">
  <!-- ... -->
</html>

and something like this for browsers that don't support canvas:

<html lang="en" class="no-canvas ...">
  <!-- ... -->
</html>

example/main.dart

import 'dart:html';
import 'package:platform_detect/platform_detect.dart';
import 'package:platform_detect/src/decorator.dart';

// HTML Element IDs
const String browserIdSuffix = 'browser';
const String browserVersionIdSuffix = 'version';
const String osIdSuffix = 'os';
const String vendorIdSuffix = 'vendor';
const String appVersionIdSuffix = 'appVersion';
const String appNameIdSuffix = 'appName';
const String userAgentIdSuffix = 'userAgent';

const String currentBrowserId = 'current-$browserIdSuffix';
const String currentBrowserVersionId = 'current-$browserVersionIdSuffix';
const String currentOsId = 'current-$osIdSuffix';
const String currentVendorId = 'current-$vendorIdSuffix';
const String currentAppVersionId = 'current-$appVersionIdSuffix';
const String currentAppNameId = 'current-$appNameIdSuffix';
const String currentUserAgentId = 'current-$userAgentIdSuffix';

const String testBrowserId = 'test-$browserIdSuffix';
const String testVendorId = 'test-$vendorIdSuffix';
const String testOsId = 'test-$osIdSuffix';
const String testAppVersionId = 'test-$appVersionIdSuffix';
const String testAppNameId = 'test-$appNameIdSuffix';
const String testUserAgentId = 'test-$userAgentIdSuffix';

const String isChromeCheckboxId = 'current-is-chrome';
const String isFirefoxCheckboxId = 'current-is-firefox';
const String isSafariCheckboxId = 'current-is-safari';
const String isIeCheckboxId = 'current-is-ie';

main() {
  decorateRootNodeWithPlatformClasses();

  _parseCurrentBrowser();
  _parseDecoratorValues();
  ButtonElement evaluate = querySelector('#evaluate-test');
  evaluate.onClick.listen((_) => _parseTestValues());
}

void _parseCurrentBrowser() {
  document.querySelector('#$currentBrowserId').text = browser.name;
  document.querySelector('#$currentBrowserVersionId').text =
      browser.version.toString();
  document.querySelector('#$currentOsId').text = operatingSystem.name;
  document.querySelector('#$currentVendorId').text = window.navigator.vendor;
  document.querySelector('#$currentAppVersionId').text =
      window.navigator.appVersion;
  document.querySelector('#$currentAppNameId').text = window.navigator.appName;
  document.querySelector('#$currentUserAgentId').text =
      window.navigator.userAgent;

  CheckboxInputElement isChrome =
      document.querySelector('#$isChromeCheckboxId');
  isChrome.checked = browser.isChrome;

  CheckboxInputElement isFirefox =
      document.querySelector('#$isFirefoxCheckboxId');
  isFirefox.checked = browser.isFirefox;

  CheckboxInputElement isSafari =
      document.querySelector('#$isSafariCheckboxId');
  isSafari.checked = browser.isSafari;

  CheckboxInputElement isInternetExplorer =
      document.querySelector('#$isIeCheckboxId');
  isInternetExplorer.checked = browser.isInternetExplorer;
}

void _parseTestValues() {
  InputElement testVendorInput = querySelector('#$testVendorId');
  InputElement testAppVersionInput = querySelector('#$testAppVersionId');
  InputElement testAppNameInput = querySelector('#$testAppNameId');
  InputElement testUserAgentInput = querySelector('#$testUserAgentId');

  var navigator = new TestNavigator();
  navigator.vendor = testVendorInput.value.trim();
  navigator.appVersion = testAppVersionInput.value.trim();
  navigator.appName = testAppNameInput.value.trim();
  navigator.userAgent = testUserAgentInput.value.trim();
  Browser.navigator = navigator;
  OperatingSystem.navigator = navigator;

  var browser = Browser.getCurrentBrowser();
  var operatingSystem = OperatingSystem.getCurrentOperatingSystem();
  querySelector('#$testBrowserId-name').text = browser.name;
  querySelector('#$testBrowserId-version').text = browser.version.toString();
  querySelector('#$testOsId-name').text = operatingSystem.name;
}

void _parseDecoratorValues() {
  CssClassSet htmlElementClasses = document.documentElement.classes;

  String osDecorators = htmlElementClasses
      .toList()
      .where((classStr) => classStr.indexOf(osClassPrefix) > -1)
      .join(' ');

  String browserDecorators = htmlElementClasses
      .toList()
      .where((classStr) => classStr.indexOf(browserClassPrefix) > -1)
      .join(' ');

  String featureDecorators =
      getFeatureSupportClasses(defaultFeatureCssClassDecorators);

  querySelector('#$currentOsId-decorators').text = osDecorators;
  querySelector('#$currentBrowserId-decorators').text = browserDecorators;
  querySelector('#current-feature-decorators').text = featureDecorators;
}

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  platform_detect: "^1.3.3"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:platform_detect/platform_detect.dart';
        
Version Uploaded Documentation Archive
1.3.3 Aug 3, 2017 Go to the documentation of platform_detect 1.3.3 Download platform_detect 1.3.3 archive
1.3.2 May 25, 2017 Go to the documentation of platform_detect 1.3.2 Download platform_detect 1.3.2 archive
1.3.1 Apr 19, 2017 Go to the documentation of platform_detect 1.3.1 Download platform_detect 1.3.1 archive
1.3.0 Apr 12, 2017 Go to the documentation of platform_detect 1.3.0 Download platform_detect 1.3.0 archive
1.2.0 Mar 9, 2017 Go to the documentation of platform_detect 1.2.0 Download platform_detect 1.2.0 archive
1.1.1 Jan 11, 2017 Go to the documentation of platform_detect 1.1.1 Download platform_detect 1.1.1 archive

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Feb 3, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
90 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80 / 100
Overall score:
Weighted score of the above. [more]
91

Platforms

Detected platforms: web

Primary library: package:platform_detect/platform_detect.dart with components: html.

Suggestions

  • Maintain CHANGELOG.md.

    Changelog entries help clients to follow the progress in your code.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.13.0 <2.0.0
meta ^1.0.4 1.1.2
pub_semver ^1.0.0 1.3.2
Transitive dependencies
collection 1.14.5
Dev dependencies
browser any
coverage ^0.7.9
dart_dev ^1.7.2
dart_style >=0.1.8 <0.3.0
dartdoc >=0.8.0 <=0.10.0
test ^0.12.0