Add advanced Network and Device instrumentation

Author: csswizardry

_includes/head.html

@@ -2,6 +2,10 @@
 <meta charset=UTF-8>
 <meta name=viewport content="width=device-width, minimum-scale=1.0">
 
+<script>
+(()=>{const e=document.documentElement,{connection:n}=navigator;window.obs=window.obs||{};const t=(window.obs&&window.obs.config)||{},o=!1!==t.observeChanges,c=t=>Number.isFinite(t)?Math.ceil(t/25)*25:null,r=t=>Number.isFinite(t)?t<75?"low":t<=275?"medium":"high":null,s=t=>Number.isFinite(t)?Math.ceil(t):null,i=()=>{const t=window.obs||{},o="number"==typeof t.downlinkBucket?t.downlinkBucket:null,c="low"===t.rttCategory,s="high"===t.rttCategory,i=null!=o&&o>=8,l=null!=o&&o<=5;t.connectionCapability=c&&i?"strong":s||l?"weak":"moderate";const a=!0===t.dataSaver||!0===t.batteryLow;t.conservationPreference=a?"conserve":"neutral";const d=!a&&"strong"===t.connectionCapability,u=a||"weak"===t.connectionCapability;t.deliveryMode=d?"rich":u?"lite":"cautious";t.canShowRichMedia="rich"===t.deliveryMode,t.shouldAvoidRichMedia="lite"===t.deliveryMode,["strong","moderate","weak"].forEach((t=>{e.classList.remove(`has-connection-capability-${t}`)})),e.classList.add(`has-connection-capability-${t.connectionCapability}`),["conserve","neutral"].forEach((t=>{e.classList.remove(`has-conservation-preference-${t}`)})),e.classList.add(`has-conservation-preference-${t.conservationPreference}`),["rich","cautious","lite"].forEach((t=>{e.classList.remove(`has-delivery-mode-${t}`)})),e.classList.add(`has-delivery-mode-${t.deliveryMode}`)},l=()=>{if(!n)return;const t=n,{saveData:o,rtt:l,downlink:a}=t;window.obs.dataSaver=!!o,e.classList.toggle("has-data-saver",!!o);const d=c(l);null!=d&&(window.obs.rttBucket=d);const u=r(l);u&&(window.obs.rttCategory=u,["low","medium","high"].forEach((t=>e.classList.remove(`has-latency-${t}`))),e.classList.add(`has-latency-${u}`));const b=s(a);if(null!=b){window.obs.downlinkBucket=b;const t=b<=5,o=b>=8;e.classList.toggle("has-bandwidth-low",t),e.classList.toggle("has-bandwidth-high",o)}"downlinkMax"in t&&(window.obs.downlinkMax=t.downlinkMax),i()},a=t=>{if(!t)return;const n=t,{level:o,charging:c}=n,l=Number.isFinite(o)?o<=.2:null;window.obs.batteryLow=l,e.classList.toggle("has-battery-low",!!l);const r=!!c;window.obs.batteryCharging=r,e.classList.toggle("has-battery-charging",r),i()};l(),o&&n?.addEventListener&&n.addEventListener("change",l),"getBattery"in navigator&&navigator.getBattery().then((e=>{a(e),o&&"function"==typeof e.addEventListener&&(e.addEventListener("levelchange",(()=>a(e))),e.addEventListener("chargingchange",(()=>a(e))))})).catch((()=>{}))})();
+</script>
+
 <title>{{ page.title }} {% if paginator and paginator.page > 1 %}Blog – Page {{ paginator.page }} {% endif %}– CSS Wizardry</title>
 
 {% if page.layout != "feature" %}

_layouts/default.html

@@ -107,85 +107,29 @@
   </script>
 
   <script type=module>
-    ;(function(){
 
-      /**
-       * Send high-fidelity network and device information back to SpeedCurve. We
-       * can use this to better segment and bucket metrics-by-condition.
-       */
-
-      // Ensure SpeedCurve is up and running, otherwise, bail out.
-      if (!window.LUX || typeof window.LUX.addData !== 'function') {
-        console.warn('SpeedCurve not available: network detection aborted.');
-        return;
-      }
-
-      // Categorise and bucket high cardinality metrics.
-
-      // Convert battery to a number out of 100 and round up to the nearest 5%.
-      function bucketBattery(level) {
-        return level != null ? Math.min(100, Math.ceil(level * 100 / 5) * 5) : null;
-      }
-
-      // Bucket RTT into 25ms increments.
-      function bucketRTT(rtt) {
-        return rtt != null ? Math.ceil(rtt / 25) * 25 : null;
-      }
-
-      // Assign RTT its CrUX-defined category.
-      function categoriseRTT(rtt) {
-        if (rtt == null) return null;
-        return rtt < 75 ? 'Low' : rtt <= 275 ? 'Medium' : 'High';
-      }
-
-      // Bucket downlink into 5Mbps increments.
-      function bucketDownlink(downlink) {
-        return downlink != null ? Math.ceil(downlink / 5) * 5 : null;
-      }
-
-      // If the battery is currently less than 20%, assign ‘Low Battery’ status.
-      function isBatteryLow(level) {
-        return level != null ? level <= 0.2 : null;
-      }
-
-      // Grab data from the Network Information API.
-      const netInfo = navigator.connection;
-
-      if (netInfo) {
-
-        window.LUX.addData('dataSaver', netInfo.saveData);
-
-        const rttBucket = bucketRTT(netInfo.rtt);
-        window.LUX.addData('rttBucket', rttBucket);
-
-        const rttCategory = categoriseRTT(netInfo.rtt);
-        window.LUX.addData('rttCategory', rttCategory);
-
-        const downlinkBucket = bucketDownlink(netInfo.downlink);
-        window.LUX.addData('downlinkBucket', downlinkBucket);
-
-        if ('downlinkMax' in netInfo) {
-          window.LUX.addData('downlinkMax', netInfo.downlinkMax);
+    (() => {
+      // Bail out if SpeedCurve is not available.
+      if (!window.LUX || typeof window.LUX.addData !== 'function') return;
+
+      const obs = window.obs || Object.create(null);
+
+      // Keys we intend to send. Keep in sync with obs.js
+      const keys = [
+        'dataSaver',
+        'rttBucket',
+        'rttCategory',
+        'downlinkBucket',
+        'downlinkMax',
+        'batteryLow',
+        'batteryCharging',
+      ];
+
+      for (const key of keys) {
+        if (Object.prototype.hasOwnProperty.call(obs, key)) {
+          window.LUX.addData(key, obs[key]);
         }
-
       }
-
-      // Grab data from the Battery Status API.
-      if ('getBattery' in navigator) {
-
-        navigator.getBattery().then(function(batt) {
-          const levelBucket = bucketBattery(batt.level);
-          window.LUX.addData('batteryLevelBucket', levelBucket);
-
-          window.LUX.addData('batteryCharging', batt.charging);
-
-          const lowFlag = isBatteryLow(batt.level);
-          window.LUX.addData('batteryLow', lowFlag);
-        }).catch(function() {
-          console.log('Battery API error or unsupported');
-        });
-
-      }
-
     })();
+
   </script>