fix(entry): added battery level check

playground/components/InfoLayer.vue

@@ -9,6 +9,7 @@
         <li id="nuxt-speedkit-message-unsupported-browser">outdated browser</li>
         <li id="nuxt-speedkit-message-reduced-bandwidth">reduced-bandwidth</li>
         <li id="nuxt-speedkit-message-weak-hardware">weak hardware</li>
+        <li id="nuxt-speedkit-message-low-battery">low battery</li>
       </ul>
       <div class="info-layer-buttons">
         <base-button

src/module.mjs

@@ -155,6 +155,7 @@ async function addBuildTemplates(nuxt, options) {
       runOptions: options.runOptions,
       ssr: nuxt.options.ssr,
       ignorePerformance: !options.detection.performance,
+      ignoreBattery: !options.detection.battery,
       performanceMetrics: JSON.stringify(options.performanceMetrics || {}),
       supportedBrowserDetector
     }

src/runtime/components/SpeedkitLayer.vue

@@ -19,6 +19,9 @@
             </li>
             <!-- Displayed when user hardware are not sufficient.  -->
             <li id="nuxt-speedkit-message-weak-hardware">weak hardware</li>
+
+            <!-- Displayed when the user batteries are not sufficient.  -->
+            <li id="nuxt-speedkit-message-low-battery">low battery</li>
           </ul>
 
           <!-- Button to hide the layer with no javascript -->
@@ -98,5 +101,9 @@ useHead({
   display: none;
 }
 
+#nuxt-speedkit-message-low-battery {
+  display: none;
+}
+
 /*! purgecss end ignore */
 </style>

src/runtime/tmpl/entry.mjs

@@ -35,33 +35,45 @@ function client () {
   const forceInit = ('__NUXT_SPEEDKIT_FORCE_INIT__' in window && window.__NUXT_SPEEDKIT_FORCE_INIT__);
 
   async function initApp(force) {
+
     if (initialized) {
       deferred.resolve();
     }
 
     document.documentElement.classList.remove('nuxt-speedkit-reduced-view');
 
-    try {
+    if (<%= !options.ignoreBattery %> && await hasBatteryPerformanceIssue()) {
+      triggerRunCallback(false);
 
-      <% if (options.performanceCheck) { %>if (!force) {
-        await run(<%= options.runOptions ? JSON.stringify(options.runOptions) : '' %>);
-      }<% } %>
+      if (!!layerEl) {
+        // User must interact via the layer.
+        updateSpeedkitLayerMessage(layerEl, 'nuxt-speedkit-message-low-battery');
+        return null;
+      }
+    } else {
 
-      initialized = true;
+      try {
+        <% if (options.performanceCheck) { %>if (!force) {
+          await run(<%= options.runOptions ? JSON.stringify(options.runOptions) : '' %>);
+        }<% } %>
 
-      triggerRunCallback(true);
+        initialized = true;
 
-      deferred.resolve();
+        triggerRunCallback(true);
 
-    } catch (error) {
-      triggerRunCallback(false);
+        deferred.resolve();
 
-      if (!!layerEl) {
-        // User must interact via the layer.
-        updateSpeedkitLayerMessage(layerEl, 'nuxt-speedkit-message-weak-hardware');
-        return null;
+      } catch (error) {
+        triggerRunCallback(false);
+
+        if (!!layerEl) {
+          // User must interact via the layer.
+          updateSpeedkitLayerMessage(layerEl, 'nuxt-speedkit-message-weak-hardware');
+          return null;
+        }
       }
-    }
+
+    };
 
     return null;
   };

src/runtime/utils/entry.mjs

@@ -56,3 +56,17 @@ export function initReducedView() {
     tmp.remove();
   });
 }
+
+const MIN_BATTERY_LEVEL = 0.2;
+// https://blog.google/products/chrome/new-chrome-features-to-save-battery-and-make-browsing-smoother/
+export async function hasBatteryPerformanceIssue() {
+  try {
+    const battery = await window.navigator.getBattery();
+    if (!battery.charging && battery.level <= MIN_BATTERY_LEVEL) {
+      return true;
+    }
+  } catch (error) {
+    // Ignore Check
+  }
+  return false;
+}

src/utils/options.mjs

@@ -12,7 +12,8 @@ export function getDefaultOptions() {
 
     detection: {
       performance: true,
-      browserSupport: true
+      browserSupport: true,
+      battery: true
     },
 
     performanceMetrics: {