diff --git a/README.md b/README.md index b882551..bdeb53d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ -# Obs.js +Obs.js + +# Obs.js – context‑aware web performance for everyone + +_Meet your users where they are_ Obs.js uses the Navigator and Battery APIs to get contextual information about your users’ connection strength and battery status. diff --git a/demo/assets/icon.png b/demo/assets/icon.png new file mode 100644 index 0000000..8cd2b5b Binary files /dev/null and b/demo/assets/icon.png differ diff --git a/demo/assets/logo.png b/demo/assets/logo.png new file mode 100644 index 0000000..40b8b7d Binary files /dev/null and b/demo/assets/logo.png differ diff --git a/demo/index.html b/demo/index.html index 7df0a9d..414b328 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,7 +12,7 @@ //# sourceURL=obs.inline.js - Obs.js demo + Obs.js – context-aware web performance for everyone + + + + +
+

Obs.js – context‑aware web performance for everyone

+

Meet your users where they are

+
+ +

Obs.js reads a handful of + browser signals (Navigator and Battery APIs) to infer connection strength, + battery status, and device capability. It exposes those signals as CSS + classes on the <html> element, and as properties on + window.obs, so you can adapt delivery accordingly: serve + lower-resolution media, forgo web fonts, disable auto-playing video… you name + it.

It is built and maintained by Harry Roberts under the MIT license.

-

This page shows the .has-* classes on - <html> and the current window.obs object. - Toggle Data Saver, plug/unplug power, or change networks to see updates (where - supported).

+

This page shows the .has-* classes that Obs.js adds to the + <html> element, and the current window.obs + object where it stores device and network information.

+ +

Try toggling Data Saver, plugging/unplugging power, or changing networks to + see updates (where supported).

html.classList

-
+

window.obs


 
+  

Note: API support varies by browser; Chromium has + the broadest coverage.

+