// ブラウザ使用画像形式
const broswerFormat = {
  Chrome: 'webp',
  Opera: 'webp',
  Firefox: 'webp',
  Safari: 'jp2',
  Edge: 'webp',
  IE: 'jxr'
};

addEventListener('fetch', event => {
  関数コードが未処理の例外をスローした場合、エッジ関数はこのリクエストをオリジンサーバーに転送します。 
  event.passThroughOnException();
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  const { request } = event;
  const userAgent = request.headers.get('user-agent');
  const bs = getBroswer(userAgent);
  const format = broswerFormat[bs];
  
  // 画像形式の変換は不要です。
  if (!format) {
    return fetch(request);
  }

  // 画像形式変換
  const response = await fetch(request, {
    eo: {
      image: {
        format
      }
    }
  });

  // レスポンスヘッダーを設定します。
  response.headers.set('x-ef-format', format);
  
  return response;
}

function getBroswer(userAgent) {
  if (/Edg/i.test(userAgent)) {
    return 'Edge'
  }
  if (/Trident/i.test(userAgent)) {
    return 'IE'
  }
  if (/Firefox/i.test(userAgent)) {
    return 'Firefox';
  }
  if (/Chrome/i.test(userAgent)) {
    return 'Chrome';
  }
  if (/Opera|OPR/i.test(userAgent)) {
    return 'Opera';
  }
  if (/Safari/i.test(userAgent)) {
    return 'Safari'
  }
}