User-Agent情報を取得してクライアントの種類を識別し、fetch APIを使用してオリジンサーバーの画像を取得します。そして、クライアントの種類に基づいて画像を拡大縮小し、画像の自動適応拡大縮小効果を実現します。この実装方法はウェブサイトのユーザーエクスペリエンスを向上させることができ、異なるデバイスでも画像を最適なサイズで表示できます。addEventListener('fetch', event => {関数コードが未処理の例外をスローした場合、エッジ関数はこのリクエストをオリジンサーバーに転送します。event.passThroughOnException();event.respondWith(handleEvent(event));});async function handleEvent(event) {const { request } = event;const urlInfo = new URL(request.url);const userAgent = request.headers.get('user-agent');// 画像以外のリソースをリクエストします。if (!/\\.(jpe?g|png)$/.test(urlInfo.pathname)) {return fetch(request);}// モバイル端末の画像幅let width = 480;const isPcClient = isPc(userAgent);// PC端の画像幅if (isPcClient) {width = 1280;}// 画像拡大縮小const response = await fetch(request, {eo: {image: {width,}}});// レスポンスヘッダーを設定します。response.headers.set('x-ef-client', isPcClient ? 'pc' : 'mobile');return response;}// リクエストクライアントタイプの判定function isPc(userAgent) {const regex = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i;if(regex.test(userAgent)) {return false;}return true;}
https://example.com/images-resize/ef-1.jpeg)を入力すると、サンプル効果をプレビューできます。

フィードバック