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

@@ -24,6 +24,7 @@ import { optimizePreloads } from './utils/preload.mjs';
 import { getSupportedBrowserDetector } from './utils/browser.mjs';
 import { registerAppEntry as registerAppEntryWebpack } from './hookFunctions/webpack.mjs';
 import { registerAppEntry as registerAppEntryVite } from './hookFunctions/vite.mjs';
+import { getTemplate as getBlobFileTemplate } from './utils/blob.mjs';
 
 const resolver = createResolver(import.meta.url);
 
@@ -143,11 +144,22 @@ async function addBuildTemplates(nuxt, options) {
       entry: join(nuxt.options.appDir, 'entry'),
       runOptions: options.runOptions,
       ssr: nuxt.options.ssr,
-      ignorePerformance: !options.detection.performance,
+      ignore: {
+        battery: !options.detection.battery,
+        performance: !options.detection.performance
+      },
       performanceMetrics: JSON.stringify(options.performanceMetrics || {}),
       supportedBrowserDetector
     }
   });
+
+  const files = [['video', resolver.resolve('media/video.mp4')]];
+  const mediaContent = await getBlobFileTemplate(files);
+  addTemplate({
+    getContents: () => mediaContent,
+    filename: MODULE_NAME + '/blobs.mjs',
+    write: true
+  });
 }
 
 async function addModules(nuxt, moduleOptions) {

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

@@ -1,7 +1,8 @@
 import { <% if (options.performanceCheck) { %>run, <% } %>hasSufficientPerformance, setup } from '#speedkit/utils/performance';
-import { triggerRunCallback, observeSpeedkitButton, setupSpeedkitLayer, updateSpeedkitLayerMessage, initReducedView } from '#speedkit/utils/entry';
+import { triggerRunCallback, observeSpeedkitButton, setupSpeedkitLayer, updateSpeedkitLayerMessage, initReducedView, hasBatteryPerformanceIssue } from '#speedkit/utils/entry';
 import Deferred from '#speedkit/classes/Deferred.mjs';
 import { isSupportedBrowser } from '#speedkit/utils/browser';
+import {video as videoBlob} from './blobs.mjs';
 
 <% if (options.webpack) { %>
 // webpack
@@ -35,14 +36,30 @@ 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');
 
+    <% if (!options.ignore.battery) {  %>
     try {
+      if (!force) {
+        await hasBatteryPerformanceIssue(videoBlob)
+      }
+    } catch (error) {
+      triggerRunCallback(false);
 
+      if (!!layerEl) {
+        // User must interact via the layer.
+        updateSpeedkitLayerMessage(layerEl, 'nuxt-speedkit-message-low-battery');
+        return null;
+      }
+    }
+    <% } %>
+
+    try {
       <% if (options.performanceCheck) { %>if (!force) {
         await run(<%= options.runOptions ? JSON.stringify(options.runOptions) : '' %>);
       }<% } %>
@@ -78,7 +95,7 @@ function client () {
 
       setup(<%= options.performanceMetrics %>);
 
-      if(('__NUXT_SPEEDKIT_AUTO_INIT__' in window && window.__NUXT_SPEEDKIT_AUTO_INIT__) || ((<%= !options.ignorePerformance %> && hasSufficientPerformance()) && supportedBrowser)) {
+      if(('__NUXT_SPEEDKIT_AUTO_INIT__' in window && window.__NUXT_SPEEDKIT_AUTO_INIT__) || ((<%= !options.ignore.performance %> && hasSufficientPerformance()) && supportedBrowser)) {
         initApp();
       } else {
         setupSpeedkitLayer(layerEl, supportedBrowser)

src/runtime/utils/entry.mjs

@@ -56,3 +56,57 @@ export function initReducedView() {
     tmp.remove();
   });
 }
+
+export async function hasBatteryPerformanceIssue(videoBlob) {
+  await isBatteryLow();
+  await canVideoPlay(videoBlob);
+}
+
+/**
+ * Checks if battery still has enough energy.
+ * This check is for Chrome and all other browsers that support this setting.
+ *
+ * Condition is: The device is not charging and Battery is below <= 20%.
+ * @see https://blog.google/products/chrome/new-chrome-features-to-save-battery-and-make-browsing-smoother/
+ * @see https://developer.chrome.com/blog/memory-and-energy-saver-mode/
+ **/
+async function isBatteryLow() {
+  const MIN_BATTERY_LEVEL = 0.2;
+
+  try {
+    const battery = await window.navigator.getBattery();
+    if (!battery.charging && battery.level <= MIN_BATTERY_LEVEL) {
+      throw new Error('Battery is low.');
+    }
+  } catch (error) {
+    // Ignore Check
+  }
+}
+
+/**
+ * Checking whether a video can be played.
+ * This check is for IOS and checks if the power saving mode is enabled.
+ *
+ * In this case no video will be played automatically.
+ */
+export async function canVideoPlay(blob) {
+  const VIDEO_TIMEOUT = 250;
+
+  const video = document.createElement('video');
+  video.muted = true;
+  video.setAttribute('muted', 'muted');
+  video.setAttribute('playsinline', 'playsinline');
+  video.src = URL.createObjectURL(blob);
+
+  const timeout = setTimeout(() => {
+    throw new Error('Video playback not possible. Reason: timeout');
+  }, VIDEO_TIMEOUT);
+
+  try {
+    await video.play();
+    clearTimeout(timeout);
+  } catch (error) {
+    clearTimeout(timeout);
+    throw new Error("Video playback not possible. Reason: can't play video");
+  }
+}

src/utils/blob.mjs

@@ -0,0 +1,22 @@
+import { promises as fsPromises } from 'fs';
+import mime from 'mime-types';
+
+async function getFileInfo(name, file) {
+  return {
+    name,
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    file: await fsPromises.readFile(file),
+    mimeType: mime.lookup(file)
+  };
+}
+
+export async function getTemplate(files) {
+  return (await Promise.all(files.map(file => getFileInfo(...file))))
+    .map(
+      ({ name, file, mimeType }) =>
+        `export const ${name} = new Blob([new Uint8Array([${[...file].join(
+          ', '
+        )}])], {type: '${mimeType}'});`
+    )
+    .join('\n');
+}

src/utils/options.mjs

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