🌳 Canh

WebAPIs

Sep 13, 20241 min read

Basic

Details

  1. What is WebAPI?
  2. setTimeout, setInterval
  3. Storage API
  4. XMLHttpRequest, Fetch API
  5. Device APIs
  1. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
  2. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
  3. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
  4. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
  5. https://developer.mozilla.org/en-US/docs/Web/API

Intermediate

Details

  1. Most popular WebAPIs
    1. WebSockets
    2. WebWorkers
    3. Console API
    4. History API
    5. Canvas API
  2. Additional WebAPIS
    1. Beacon API: Keep browser sending request during the unload.
  1. https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
  2. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
  3. https://developer.mozilla.org/en-US/docs/Web/API/Console_API
  4. https://developer.mozilla.org/en-US/docs/Web/API/History_API
  5. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Advanced

Details

  1. IndexedDB
  2. Performance API
  3. Intersection Observer API
  4. ResizeObserver API
  5. MutationObserver API
  6. ServiceWorker API
  7. Web Notifications API
  8. Clipboard API
  9. WebRTC
  1. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
  2. https://developer.mozilla.org/en-US/docs/Web/API/Performance_API
  3. https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API
  4. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  5. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
  6. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
  7. https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
  8. https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
  9. https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

Courses

  1. https://frontendmasters.com/courses/device-web-apis/

Notes

Prefect vs Preload

2 cái có tác dụng gần giống nhau, đều là tải trước tài nguyên. khác nhau ở priority, với prefect thì sau khi tải xong các luồng chính như css, html, js thì sẽ tải để chuẩn bị sau. còn với preload thì sẽ tải xuống nhanh nhất có thể

Beacon API

IndexedDB

  • LocalForage:

pagevisibility

Fire event when user click another app or something not focus on current app Example: Stop animation, stop request api, or pause video for save battery your client

Graph View

Backlinks