Use get_client_version to dynamically load different versions of front-end resources

gitbox 2025-05-11

In modern web development, different clients or users may need to load different versions of front-end resources. For example, you might want to load lightweight scripts for mobile, load compatibility packages for older browsers, or load specific versions of resources based on the user's test environment.

To achieve this, we can write a PHP function called get_client_version to determine which version of the front-end resource needs to be loaded by the client, and dynamically generate the corresponding resource URL based on this version.

1. Function design objectives

The main function of the get_client_version() function is:

Detect client information (such as User-Agent, Cookies, Request Parameters, etc.);
Returns the version number of the front-end resource;
Splice the correct resource URL (such as JS, CSS files) according to the version number;

2. Sample code implementation

Here is a complete example, including function definition and resource loading logic:

 <?php

/**
 * Get the front-end resource version that the client needs to load
 * Can be based on User-Agent、Cookie、Request parameters and other methods to implement more complex judgment logic
 */
function get_client_version(): string {
    // Simple example：according to URL Parameters force the version to be specified
    if (isset($_GET['ver'])) {
        return preg_replace('/[^a-zA-Z0-9_\-\.]/', '', $_GET['ver']);
    }

    // Example：pass User-Agent Determine whether it is a mobile device
    $userAgent = $_SERVER['HTTP_USER_AGENT'] ?? '';
    if (stripos($userAgent, 'Mobile') !== false) {
        return 'mobile_v2.1';
    }

    // Default version
    return 'desktop_v1.0';
}

/**
 * Construct the completeness of static resources URL
 */
function asset_url(string $path): string {
    $version = get_client_version();
    return "https://gitbox.net/assets/{$version}/{$path}";
}

// 使用Example
$jsUrl  = asset_url('app.js');
$cssUrl = asset_url('style.css');

?>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>动态加载资源Example</title>
    <link rel="stylesheet" href="<?php echo htmlspecialchars($cssUrl); ?>">
</head>
<body>

<h1>Welcome to the dynamic version resource system</h1>
<p>Current resource version：<?php echo htmlspecialchars(get_client_version()); ?></p>

<script src="<?php echo htmlspecialchars($jsUrl); ?>"></script>
</body>
</html>

3. Effect description

The above code will dynamically decide which version of the front-end resource to load based on the visitor's client information or the incoming ver parameters. For example:

https://gitbox.net/index.php?ver=test123
→ Will load: https://gitbox.net/assets/test123/app.js
Mobile device access → Loading: https://gitbox.net/assets/mobile_v2.1/app.js
Desktop device loads by default → Loading: https://gitbox.net/assets/desktop_v1.0/app.js

4. Further optimization suggestions

Caching strategy : reasonably set CDN and browser cache to improve performance;
Resource version management system : Automatically generate version numbers in combination with Git tags or build tools;
Security : Strictly filter the input version number to prevent path injection attacks;
Fallback strategy : Provide a downgrade solution when resource loading fails;

5. Summary

Through the get_client_version function, you can control the version loading strategy of front-end resources very flexibly, thereby achieving personalized support for different devices, environments, and users. This method not only improves the user experience, but also provides great convenience for front-end deployment and A/B testing.

If you have more complex needs, such as multi-language and multi-theme support, you can also expand on this basis to make your front-end resource management smarter and more efficient.

get_client_version