Modern Browser APIs

Co to jest IndexedDB i jak używać Dexie.js w React?

IndexedDB: wbudowana baza danych w przeglądarce. Asynchroniczna. Klucz-wartość + indeksy. Transakcje. Offline storage. Dużo większy limit niż localStorage (GBs). Struktury: Database, Object Store (tabela), Index, Transaction. Dexie.js: najpopularniejsza abstrakcja nad IndexedDB. Czysty API, TypeScript. Promise-based. Instalacja: npm install dexie dexie-react-hooks. Definicja bazy: import Dexie, {Table} from 'dexie'. class MyDatabase extends Dexie { todos!: Table. constructor() { super('mydb'). this.version(1).stores({ todos: '++id, title, completed, createdAt' }) } }. export const db = new MyDatabase(). CRUD: await db.todos.add({title: 'Buy milk', completed: false}). await db.todos.where('completed').equals(false).toArray(). await db.todos.update(id, {completed: true}). await db.todos.delete(id). React hooks: import {useLiveQuery} from 'dexie-react-hooks'. const todos = useLiveQuery(() => db.todos.toArray()). Reaktywne — auto-update gdy dane się zmieniają. Dexie Cloud: sync między urządzeniami. Offline-first. Conflict resolution. Komercyjny. Alternatywy: idb (Google) — minimalna warstwa nad IDB. localforage — localStorage-like API, IDB pod spodem. RxDB — reaktywna baza offline. PouchDB + CouchDB sync. OPFS (Origin Private File System): dostęp do pliku na dysku przez przeglądarkę. FileSystemDirectoryHandle, FileSystemFileHandle. Szybszy zapis niż IndexedDB. Dla dużych binarnych danych.

Web Share API i Clipboard API — natywne udostępnianie i schowek?

Web Share API: natywny share dialog systemu operacyjnego. navigator.share({title: 'React Tips', text: 'Sprawdź ten artykuł', url: 'https://fotz.pl'}). Otwiera natywny share sheet iOS/Android. Udostępnianie do: Instagram, WhatsApp, SMS, email, AirDrop. navigator.canShare({files: [file]}) — sprawdź czy plik można udostępnić. Udostępnianie plików: const file = new File([blob], 'screenshot.png', {type: 'image/png'}). navigator.share({files: [file], title: 'Screenshot'}). Wymogi: HTTPS. User gesture (click event). Wsparcie: Chrome Android, Safari iOS i macOS, Edge. Brak Firefox desktop. Fallback: jeśli !navigator.share — własne przyciski social. React hook: function useShare() { return {canShare: !!navigator.share, share: navigator.share.bind(navigator)} }. Clipboard API: nowoczesny dostęp do schowka. await navigator.clipboard.writeText('tekst'). const text = await navigator.clipboard.readText(). Wymaga: user gesture do write. Permissions do read (prompt). Kopiowanie obrazów: const blob = await (await fetch(imageUrl)).blob(). await navigator.clipboard.write([new ClipboardItem({'image/png': blob})]). Stary API (synchroniczny): document.execCommand('copy') — deprecated. Nadal działający jako fallback. React: const copyToClipboard = async (text) => { await navigator.clipboard.writeText(text). setCopied(true). setTimeout(() => setCopied(false), 2000) }. useClipboard hook (react-use): prosty hook z state.

File System Access API — dostęp do plików na dysku z przeglądarki?

File System Access API: prawdziwy dostęp do pliku systemu operacyjnego. Otwieranie pliku: const [fileHandle] = await window.showOpenFilePicker({types: [{description: 'Text Files', accept: {'text/plain': ['.txt']}}]}). const file = await fileHandle.getFile(). const contents = await file.text(). Zapis do pliku: const fileHandle = await window.showSaveFilePicker({suggestedName: 'document.txt'}). const writable = await fileHandle.createWritable(). await writable.write(content). await writable.close(). Directory: const dirHandle = await window.showDirectoryPicker(). for await (const [name, handle] of dirHandle.entries()) { console.log(name, handle.kind) }. Uprawnienia: fileHandle.requestPermission({mode: 'readwrite'}). await fileHandle.queryPermission(). Persystencja handle: IndexedDB do przechowywania fileHandle. Przy powrocie: sprawdź permissions. React + FSAPI: użyj useRef na fileHandle. Brak stanu React dla handles. Async operacje. OPFS (Origin Private File System): prywatny filesystem dla origin. Szybki (synchroniczny w Web Worker). Bez user gesture. Brak natywnego picker. Idealne dla: SQLite WASM, lokalny cache, prywatne dane. SQLite WASM w OPFS: @sqlite.org/sqlite-wasm. Pełny SQLite w przeglądarce. Trwałe dane w OPFS. Wsparcie FSAPI: Chrome 86+, Edge 86+. Safari 15.2+ (save dialog). Firefox: OPFS tylko. Fallback: input type='file'. Biblioteki: browser-fs-access (Google) — prosty wrapper z fallback.

WebBluetooth, Web Serial i WebUSB — sprzęt przez przeglądarkę?

Web Bluetooth API: połączenie z urządzeniami BT LE z przeglądarki. navigator.bluetooth.requestDevice({filters: [{services: ['heart_rate']}]}). const server = await device.gatt.connect(). const service = await server.getPrimaryService('heart_rate'). const characteristic = await service.getCharacteristic('heart_rate_measurement'). characteristic.addEventListener('characteristicvaluechanged', handler). await characteristic.startNotifications(). Zastosowania: fitness devices, IoT sensors, smart home, medical devices. Wymogi: HTTPS. User gesture. Chrome desktop i Android. Nie Safari, nie Firefox. Web Serial API: połączenie z urządzeniami serial (Arduino, mikrokontrolery). const port = await navigator.serial.requestPort(). await port.open({baudRate: 9600}). const reader = port.readable.getReader(). const {value, done} = await reader.read(). Pisanie: const writer = port.writable.getWriter(). await writer.write(new Uint8Array([0x01, 0x02])). Zastosowania: Arduino projects, industrial equipment, GPS receivers, 3D printers. Chrome 89+. WebUSB: dostęp do urządzeń USB. navigator.usb.requestDevice({filters: [{vendorId: 0x2341}]}). await device.open(). Mikrokontrolery, custom hardware. WebHID: Human Interface Devices (gamepads, custom keyboards). navigator.hid.requestDevice(). Bezpieczeństwo: zawsze user gesture. Zawsze HTTPS. Biała lista urządzeń. Nie wszystkie urządzenia dostępne (bezpieczeństwo OS). React przykład: useState dla device, connected status. useEffect cleanup: device.gatt.disconnect().

WebOTP, Push Notifications i inne nowoczesne Browser APIs?

WebOTP API: auto-fill SMS OTP (one-time passwords). navigator.credentials.get({otp: {transport: ['sms']}}). SMS format: @example.com #123456 (origin + OTP). Przeglądarka przechwytuje SMS. Auto-wpisuje kod. Zastępuje ręczne kopiowanie. Chrome Android + SMS Retriever API. Payment Request API: natywne okno płatności. new PaymentRequest([{supportedMethods: 'basic-card'}], {total: {label: 'Total', amount: {currency: 'PLN', value: '99.00'}}}). Integracja z Apple Pay, Google Pay, kart. Push Notifications: Service Worker + Push API. Subskrypcja: registration.pushManager.subscribe({userVisibleOnly: true, applicationServerKey: vapidKey}). Wysyłanie (backend): web-push library. Endpoint + p256dh + auth. Subtelność: Service Worker musi być zarejestrowany. Notification.requestPermission(). Notifications API: new Notification('Tytuł', {body: 'Treść', icon: '/icon.png'}). Wymaga permission. Background Sync API: synchronizacja gdy offline -> online. Service Worker: self.addEventListener('sync', event => { if (event.tag === 'sync-data') event.waitUntil(syncData()) }). registration.sync.register('sync-data'). Periodic Background Sync: regularne odświeżanie danych. Wymaga 'periodic-background-sync' permission. Beacon API: navigator.sendBeacon(url, data). Garantowane wysłanie przy zamknięciu strony. Nie blokuje unload. Dla analytics. Intersection Observer: obserwuj widoczność elementów. Lazy loading, infinite scroll, analytics. ResizeObserver: obserwuj rozmiar elementu. Lepsza alternatywa dla window resize. Screen Wake Lock: navigator.wakeLock.request('screen'). Zapobiega wygaszaniu ekranu. Dla fitness apps, presentations.

Wyślij zapytanie