包简介

Combined browser- & feature-detection for your app

README 文档

README

Modernizr is a great way to find out about your user's browser capabilities. However, you can only access its API on the browser itself, which means you can't easily benefit from knowing about browser capabilities in your server logic.

Progressive enhancement, media queries and body classes are fine for tweaking sites and their appearance. But for structural changes to sites and pages, sometimes it's much simpler to just emit the right markup from the server in the first place.

The modernizr-server library is a way to bring Modernizr browser data to your server scripting environment. For example, in PHP:

<?php

use ModernizrServer\Modernizr;

Modernizr::init();

if (null === Modernizr::getData()) {
    print "<html><head><script type='text/javascript'>";
    print Modernizr::buildJsCode() . "</script></head><body></body></html>";
    exit;
}

print 'The server knows:';
foreach (Modernizr::getData() as $feature => $value) {
    print "<br/> $feature: ";
    print_r($value);
}

?>

The server knows: canvas: 1 canvastext: 1 geolocation: 1 crosswindowmessaging: 1 websqldatabase: 1 indexeddb: 0 hashchange: 1 ...

Exactly the same feature detection is available through this (PHP) API on the server as is available through the (Javascript) API on the client.

Currently, there is only a PHP implementation of the server-side API, but other languages would be a breeze. Stay tuned to the project for more.

Also: this is a young project, so please use in high-traffic production environments with due caution :-)

How to use it (with PHP)

Download the latest Modernizr script from http://modernizr.com and place it in the modernizr.js directory. Within that directory, the file should also be called modernizr.js, but it can be either the compressed or uncompressed version of the file. (If you want to put it in a different place, see the note at the bottom of this section.)

Ideally, the modernizr-server.php library should be included at the very start of your PHP script - or at the very least before any HTML is emitted:

<?php
    include('modernizr-server.php');
    ...

In any subsequent point of your script, you can use the $modernizr object in the same way that you would have used the Modernizr object on the client:

if ($modernizr->svg) {
    ...
} elseif ($modernizr->canvas) {
    ...
}

See the Modernizr documents for all of the features that are tested and available through the API.

Some features, (in particular video, audio, input, and inputtypes) have sub-features, so these are available as nested PHP objects:

if ($modernizr->inputtypes->search) {
    print "<input type='search' ...";
} else {
    print "<input type='text' ...";
}

All features and sub-features are returned as integer 1 or 0 for true or false, so they can be used in logical evaluations in PHP.

Relocating modernizr.js

If you want to place the Modernizr script in a specific place on your server, you can alter its (relative) path at the top of the modernizr-server.php library. By default this is in a peer folder to the library file:

static $modernizr_js = '../modernizr.js/modernizr.js';

The Javascript file does not have to be in a folder that's directly visible to a web browser - just one that the modernizr-server.php library can read. Nevertheless, if you are also using Modernizr on the client, you might have a copy of the script on your web server already, and you can use that.

How it works

The first time the user accesses a page which includes the modernizr-server.php library, the library sends the Modernizr script to the client, with a small script added to the end. Modernizr runs as usual and populates the feature test results.

The small suffix script then serializes the results into a concise cookie, which is set on the client using Javascript. It then refreshes the page immediately.

This second time the PHP script is executed, the library takes the cookie and instantiates the server-side $modernizr object with its contents. If possible, this is placed in the PHP $_SESSION so that it can be quickly accessed in subsequent requests.

While either of the cookie or session remain active, no further execution of the Modernizr script will take place. If they both expire, the next request to a page containing modernizr-server.php will cause the browser to rerun the Modernizr tests again.

Caveats

This library relies on the browser reloading the page it just visited - to re-request it with the Modernizr data in a cookie. In theory, if the cookie does not get set on the client correctly, the refresh could loop indefinitely. I'll think of some ways to mitigate this.

You are advised to first use modernizr-server.php on a page that is accessed by the user with a GET method. If the first request made is a POST (from a form, for example), the refresh of the page will cause the browser to ask the user if they want to immediately resubmit the form, which may confuse them.

mimmi20/modernizr-server 适用场景与选型建议

mimmi20/modernizr-server 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 103 次下载、GitHub Stars 达 0，最近一次更新时间为 2015 年 08 月 28 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「user-agent」「useragent」「device」「feature detection」「detector」「YABFDL」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 mimmi20/modernizr-server 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 mimmi20/modernizr-server 我们能提供哪些服务？

定制开发 / 二次开发

基于 mimmi20/modernizr-server 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发