Parse UA (#203)

Author: goncy

edge-functions/user-agent-based-rendering/package-lock.json

@@ -13,9 +13,11 @@
     "@vercel/examples-ui": "^0.2.6",
     "next": "^12.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "ua-parser-js": "^1.0.2"
   },
   "devDependencies": {
+    "@types/ua-parser-js": "^0.7.36",
     "@types/node": "17.0.14",
     "@types/react": "17.0.38",
     "autoprefixer": "^10.4.2",
@@ -25,4 +27,4 @@
     "tailwindcss": "^3.0.18",
     "typescript": "4.5.5"
   }
-}
+}

edge-functions/user-agent-based-rendering/package.json

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
+import parser from 'ua-parser-js'
 
 // RegExp for public files
 const PUBLIC_FILE = /\.(.*)$/
@@ -16,10 +17,11 @@ export function middleware(req: NextRequest) {
     return NextResponse.rewrite(url)
   }
 
+  // Parse user agent
+  const ua = parser(req.headers.get('user-agent')!)
+
   // Check the viewport
-  const viewport = ['android', 'ios'].includes(req.ua?.os.name?.toLowerCase()!)
-    ? 'mobile'
-    : 'desktop'
+  const viewport = ua.device.type === 'mobile' ? 'mobile' : 'desktop'
 
   // Update the expected url
   url.pathname = `_viewport/${viewport}${url.pathname}`