Experimental fallback init

playground/nuxt.config.js

@@ -30,7 +30,7 @@ export default defineNuxtConfig(async () => {
     runtimeConfig: {
       public: {
         githubRepoUrl: repository.url.replace(/^git\+(.*)\.git$/, '$1'),
-        disableInfoLayer: false
+        disableInfoLayer: true
       }
     },
 
@@ -139,6 +139,12 @@ export default defineNuxtConfig(async () => {
       //   battery: true
       // },
 
+      // experimental: {
+      //   fallbackInit: {
+      //     duration: 3000
+      //   }
+      // },
+
       performanceMetrics: {
         device: {
           hardwareConcurrency: { min: 2, max: 48 },

src/module.js

@@ -143,6 +143,7 @@ async function addBuildTemplates(nuxt, options) {
           battery: !options.detection.battery,
           performance: !options.detection.performance
         },
+        experimental: options.experimental,
         performanceMetrics: JSON.stringify(options.performanceMetrics || {}),
         supportedBrowserDetector
       });

src/runtime/utils/entry.js

@@ -142,3 +142,34 @@ export const deprecationWarningButtonSelector = initApp => {
     observeBoosterButton('#nuxt-booster-button-init-app', () => initApp(true));
   }
 };
+
+export const createInitElement = (
+  callback,
+  { duration } = { duration: 3000 }
+) => {
+  const div = document.createElement('div');
+  div.style.position = 'fixed';
+  div.style.top = 0;
+  div.style.left = 0;
+  div.style.opacity = 0;
+  div.style.animationName = 'fade-in';
+  div.style.animationDuration = '0.2s';
+  div.style.animationDelay = `${duration}ms`;
+  div.style.animationFillMode = 'forwards';
+  div.addEventListener('animationend', () => {
+    console.log('REMOVE!');
+    div.remove();
+    style.remove();
+    callback();
+  });
+  document.body.appendChild(div);
+  const style = document.createElement('style');
+  style.innerHTML = `
+    @keyframes fade-in {
+      100% {
+        opacity: 1;
+      }
+    }
+    `;
+  document.head.appendChild(style);
+};

src/tmpl/entry.tmpl.js

@@ -2,7 +2,7 @@ export default options => {
   let code = `import { ${
     options.performanceCheck ? `run, ` : ``
   }hasSufficientPerformance, setup } from '#booster/utils/performance';
-import { waitForVisibilty, triggerRunCallback, observeBoosterButton, setupBoosterLayer, updateBoosterLayerMessage, initReducedView, hasBatteryPerformanceIssue, deprecationWarningButtonSelector } from '#booster/utils/entry';
+import { createInitElement, waitForVisibilty, triggerRunCallback, observeBoosterButton, setupBoosterLayer, updateBoosterLayerMessage, initReducedView, hasBatteryPerformanceIssue, deprecationWarningButtonSelector } from '#booster/utils/entry';
 import Deferred from '#booster/classes/Deferred';
 import { isSupportedBrowser } from '#booster/utils/browser';
 import {video as videoBlob} from './blobs.mjs';
@@ -12,24 +12,21 @@ import {video as videoBlob} from './blobs.mjs';
   if (options.webpack) {
     code += `
 // webpack
-(async () => {
-  return await client().then(() => getEntry());
-})()
+(() => client().then(() => getEntry()))()
 `;
   } else {
     code += `
   // vite
 export default entryWrapper();
 
-function entryWrapper(){
-
-  if (!process.server) {
+function entryWrapper () {
+  if (!import.meta.server) {
     return client().then(() => getEntry());
   } else {
     return async (ctx) => (await getEntry())(ctx)
   }
+}
 
-};
 `;
   }
 
@@ -40,89 +37,85 @@ function getEntry(){
 
 function client () {
   const deferred = new Deferred();
+  const url = new URL(window.location.href);
 
-  let initialized = false
+  let ready = false
   const layerEl = window.document.getElementById('nuxt-booster-layer');
 
   const forceInit = ('__NUXT_BOOSTER_FORCE_INIT__' in window && window.__NUXT_BOOSTER_FORCE_INIT__);
 
   async function initApp(force) {
 
-    if (initialized) {
-      deferred.resolve();
+    if (!force && url.searchParams.has('test')) {
+      console.log('test');
+      return false;
+    }
+
+    if (ready) {
+      console.log('ready force');
+      return true
     }
 
     await waitForVisibilty();
 
     document.documentElement.classList.remove('nuxt-booster-reduced-view');
 
-    `;
+    if (layerEl) {
 
-  if (!options.ignore.battery) {
-    code += `
-    try {
-      if (!force) {
-        await hasBatteryPerformanceIssue(videoBlob)
-      }
-    } catch (error) {
+      const supportedBrowser = isSupportedBrowser(${
+        options.supportedBrowserDetector
+      });
 
-      console.warn(error)
 
-      triggerRunCallback(false);
+      if (!force && !supportedBrowser){
+        setupBoosterLayer(layerEl, supportedBrowser);
+        return false;
+      }
 
-      if (!!layerEl) {
-        // User must interact via the layer.
-        updateBoosterLayerMessage(layerEl, 'nuxt-booster-message-low-battery');
-        return null;
+      if (!force && ${!options.ignorePerformance} && hasSufficientPerformance()) {
+        document.documentElement.classList.remove('nuxt-booster-reduced-view');
+        return false;
       }
-    }
-    `;
-  }
 
-  code += `
-    try {`;
+    }
 
-  if (options.performanceCheck) {
-    code += `
-if (!force) {
-        await run(${
-          options.runOptions ? JSON.stringify(options.runOptions) : ''
-        });
-      }
-`;
-  }
+${getBatteryCheck(options)}
 
-  code += `
+    try {
+${getPerformanceCheck(options)}
 
-      initialized = true;
+      ready = true;
 
       triggerRunCallback(true);
 
       deferred.resolve();
 
+    console.log('ready default', {force});
+      return true;
+
     } catch (error) {
 
       console.warn(error)
 
       triggerRunCallback(false);
 
+      console.warn('nuxt-booster-message-weak-hardware');
       if (!!layerEl) {
         // User must interact via the layer.
         updateBoosterLayerMessage(layerEl, 'nuxt-booster-message-weak-hardware');
-        return null;
       }
+      return false;
     }
-
-    return null;
   };
 
-  const supportedBrowser = isSupportedBrowser(${
-    options.supportedBrowserDetector
-  });
 
-  window.addEventListener('load', function () {
-    if (!document.getElementById('nuxt-booster-layer')) {
-      initApp(forceInit);
+  window.addEventListener('load', async function () {
+    if (!layerEl) {
+      const ready = await initApp(forceInit)
+      console.log('ready', {ready, forceInit});
+
+      ${getFallbackInit(options)}
+
     } else {
 
       observeBoosterButton('.nuxt-booster-button-init-reduced-view', initReducedView);
@@ -133,19 +126,75 @@ if (!force) {
 
       setup(${options.performanceMetrics});
 
-      if(('__NUXT_BOOSTER_AUTO_INIT__' in window && window.__NUXT_BOOSTER_AUTO_INIT__) || ((${!options.ignorePerformance} && hasSufficientPerformance()) && supportedBrowser)) {
-        initApp();
-      } else {
-        setupBoosterLayer(layerEl, supportedBrowser)
-      }
+      initApp(!!forceInit);
 
     }
   });
 
-return deferred.promise;
+  window.__NUXT_BOOSTER_INIT_APP__ = initApp;
+
+  return deferred.promise;
 
 }
 `;
 
   return code;
 };
+
+const getFallbackInit = options => {
+  if (options.experimental.fallbackInit) {
+    return `
+
+      let duration = ${options.experimental.fallbackInit.duration || 3000};
+
+      if (url.searchParams.has('test')) {
+        duration = Number(url.searchParams.get('test'));
+      }
+
+      if (!forceInit && !ready) {
+        createInitElement(() => {
+          console.log('force init by element!');
+          initApp(true);
+        }, { duration });
+      }
+      `;
+  }
+  return '';
+};
+
+const getPerformanceCheck = options => {
+  if (options.performanceCheck) {
+    return `
+      if (!force) {
+        await run(${
+          options.runOptions ? JSON.stringify(options.runOptions) : ''
+        });
+      }
+`;
+  }
+  return '';
+};
+
+const getBatteryCheck = options => {
+  if (!options.ignore.battery) {
+    return `
+    try {
+      if (!force) {
+        await hasBatteryPerformanceIssue(videoBlob)
+      }
+    } catch (error) {
+
+      console.warn(error)
+
+      triggerRunCallback(false);
+
+      if (!!layerEl) {
+        // User must interact via the layer.
+        updateBoosterLayerMessage(layerEl, 'nuxt-booster-message-low-battery');
+        return false;
+      }
+    }
+    `;
+  }
+  return '';
+};

src/utils/options.js

@@ -39,6 +39,10 @@ export function getDefaultOptions() {
     lazyOffset: {
       component: '0%',
       asset: '0%'
+    },
+
+    experimental: {
+      fallbackInit: false
     }
   };
 }