-
Notifications
You must be signed in to change notification settings - Fork 10
Device detection #5
Comments
Ok so here's what I'd suggest for this. Rather than doing caching, exactly, make a device based segmentation middleware (like the cookie one here: https://github.com/superfly/cdn/blob/cookie-segments/src/middleware/cookie-segments.ts). That basic model can be used to route people to two different origins, or even trigger other middleware like metrics / reporting. When we get into caching more, we can make this + other stuff cache aware. |
Also I haven't looked closely at this library, but User Agent parsing is so intricate it might be worth using it (or something like it): https://github.com/faisalman/ua-parser-js |
Ok so would something like this be a better example maybe? import proxy from '@fly/proxy'
fly.http.respondWith(async function(req) {
const parser = require('ua-parser-js')
const ua = req.headers.get("User-Agent")
const uaObj = parser(ua)
const deviceType = uaObj.device.type
if (deviceType === "mobile") {
console.log("mobile")
const app = proxy("http://mobile.example.com/")
return app(req)
} else if (deviceType === "tablet") {
console.log("tablet")
const app = proxy("http://tablet.example.com/")
return app(req)
} else {
console.log("desktop")
const app = proxy("http://www.example.com/")
return app(req)
}
}) This uses the https://github.com/faisalman/ua-parser-js library to detect the user’s device and then routes to different origins based on the device type. |
That seems like a good path. We haven't documented this well yet, but we're shooing for apps that use the CDN code and look something like this: import { proxy, pipeline } from "@fly/fetch";
import { middleware } from "./src/";
const origin = proxy("https://example.com");
const app = pipeline(
middleware.httpsUpgrader,
middleware.responseHeaders({ "powered-by": "caffeine"})
);
fly.http.respondWith(app(origin)); To route by device type, it could work like this: import { proxy, pipeline } from "@fly/fetch";
import { middleware, userAgent } from "./src/";
const backends = {
mobile: proxy("https://mobile.com"),
default: proxy("https://example.com")
};
const origin = devices.route(
userAgent.mobile(backends.mobile),
backends.default
);
const app = pipeline(
middleware.httpsUpgrader,
middleware.responseHeaders({ "powered-by": "caffeine"})
);
fly.http.respondWith(app(origin)); A simpler example might just add import { proxy, pipeline } from "@fly/fetch";
import { middleware, userAgent } from "./src/";
const origin = proxy("https://example.com")
const app = pipeline(
middleware.httpsUpgrader,
userAgent.addDeviceHeaders,
middleware.responseHeaders({ "powered-by": "caffeine"})
);
fly.http.respondWith(app(origin)); |
Here's an example middleware to add a device type header in a branch: https://github.com/superfly/cdn/compare/user-agent-parsing?expand=1#diff-56064ccff3c2d3c1065db991c8672487 |
In progress: working on middleware that handles deep linking to apps on mobile devices. It will use the |
Feature: device-based caching/dynamic serving
-Using the
User-Agent
header from requests to deliver cached content based on device typeThe text was updated successfully, but these errors were encountered: