const response = await fetch(url, {
    // Основні опції (розглянуті раніше)
    method: 'GET', // POST, PUT, DELETE, PATCH
    headers: {}, // об'єкт або Headers
    body: undefined, // string, FormData, Blob, URLSearchParams
    signal: undefined, // AbortController.signal

    // Безпека та CORS
    mode: 'cors', // 'same-origin', 'no-cors'
    credentials: 'same-origin', // 'omit', 'include'

    // Referer
    referrer: 'about:client', // '' (не відправляти) або URL
    referrerPolicy: 'strict-origin-when-cross-origin',

    // Кешування
    cache: 'default', // 'no-store', 'reload', 'no-cache', etc.

    // Переадресація
    redirect: 'follow', // 'error', 'manual'

    // Валідація цілісності
    integrity: '', // наприклад, 'sha256-abc123...'

    // Keepalive
    keepalive: false, // true для аналітики

    // Застарілі/рідковживані
    window: window, // null
})

GET /api/data HTTP/1.1
Host: api.example.com
Referer: https://mysite.com/admin/dashboard

// Не відправляти Referer взагалі
fetch('/api/data', {
    referrer: '',
})

// Встановити власне значення (в межах того самого origin)
fetch('/api/data', {
    referrer: 'https://mysite.com/public-page',
})

// Для cross-origin відправляємо лише origin, без шляху
fetch('https://external-api.com/data', {
    referrerPolicy: 'origin-when-cross-origin',
})

// Referer буде: https://mysite.com (без /admin/secret)

// Ніколи не відправляти Referer
fetch('/api/data', {
    referrerPolicy: 'no-referrer',
})

fetch(url, {
    mode: 'cors' | 'same-origin' | 'no-cors',
})

fetch('https://api.github.com/users/octocat', {
    mode: 'cors', // дозволено
})

fetch('https://external-api.com/data', {
    mode: 'same-origin',
})
// ❌ TypeError: Failed to fetch

const response = await fetch('https://example.com/image.jpg', {
    mode: 'no-cors',
})

console.log(response.status) // 0
console.log(await response.text()) // Помилка - доступ заборонено!

fetch(url, {
    credentials: 'same-origin' | 'include' | 'omit',
})

// ✅ Cookies відправляються
fetch('/api/profile')

// ❌ Cookies НЕ відправляються
fetch('https://external-api.com/data')

fetch('https://api.mybackend.com/profile', {
    credentials: 'include',
})

Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Credentials: true

fetch('/api/public-data', {
    credentials: 'omit', // Без cookies
})

async function getUUserProfile() {
    const response = await fetch('https://api.myapp.com/user/profile', {
        credentials: 'include', // Відправити session cookie
        headers: {
            Accept: 'application/json',
        },
    })

    if (!response.ok) {
        throw new Error('Not authenticated')
    }

    return response.json()
}

fetch(url, {
    cache: 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache' | 'only-if-cached',
})

fetch('/api/stock-prices', {
    cache: 'no-store', // Ніколи не кешувати
})

fetch('/api/config', {
    cache: 'reload', // Ігнорувати кеш, оновити його
})

fetch('/api/articles', {
    cache: 'force-cache', // Використати кеш, навіть якщо застарілий
}).catch(() => {
    console.log('Немає інтернету, використано кеш')
})

fetch(url, {
    redirect: 'follow' | 'error' | 'manual',
})

fetch('http://example.com/old-url', {
    redirect: 'follow',
})
// Автоматично перейде на новий URL

fetch('http://example.com/old-url', {
    redirect: 'error',
})
// TypeError: Failed to fetch (якщо є redirect)

const response = await fetch('http://example.com/old-url', {
    redirect: 'manual',
})

if (response.type === 'opaqueredirect') {
    console.log('Redirect виявлено, але не обробленосправжнього статусу немає')
    // response.status === 0
    // response.url === ''
}

fetch(url, {
    integrity: 'sha256-{hash}' | 'sha384-{hash}' | 'sha512-{hash}',
})

// Завантажуємо jQuery з CDN з перевіркою integrity
fetch('https://code.jquery.com/jquery-3.7.1.min.js', {
    integrity: 'sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=',
})
    .then((r) => r.text())
    .then((code) => {
        console.log('jQuery завантажено та перевірено!')
        eval(code) // Безпечно, бо перевірили hash
    })
    .catch((error) => {
        console.error('Hash не збігається! Можлива модифікація файлу.')
    })

# Для файлу
curl https://code.jquery.com/jquery-3.7.1.min.js | openssl dgst -sha256 -binary | openssl base64 -A

# Результат: sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=

fetch(url, {
    keepalive: true,
})

window.addEventListener('unload', () => {
    fetch('/analytics', {
        method: 'POST',
        body: JSON.stringify({ event: 'page_close' }),
    })
    // ❌ Запит буде скасовано!
})

window.addEventListener('unload', () => {
    fetch('/analytics', {
        method: 'POST',
        body: JSON.stringify({ event: 'page_close' }),
        keepalive: true, // ✅ Запит завершиться навіть після закриття
    })
})

class Analytics {
    constructor() {
        this.events = []

        // Відправляти при закритті сторінки
        window.addEventListener('beforeunload', () => {
            this.flush()
        })

        // Або кожні 30 секунд
        setInterval(() => this.flush(), 30000)
    }

    track(eventName, data) {
        this.events.push({
            event: eventName,
            data,
            timestamp: Date.now(),
        })

        // Якщо багато подій, відправити зараз
        if (this.events.length >= 10) {
            this.flush()
        }
    }

    flush() {
        if (this.events.length === 0) return

        const payload = JSON.stringify(this.events)

        // Перевірка ліміту 64KB
        if (new Blob([payload]).size > 64 * 1024) {
            console.warn('Payload занадто великий для keepalive')
            return
        }

        fetch('/api/analytics', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: payload,
            keepalive: true,
        })

        this.events = []
    }
}

// Використання
const analytics = new Analytics()

analytics.track('page_view', { url: location.href })
analytics.track('button_click', { button: 'signup' })