html2apk 0.1.0 → 0.2.0

package/README.md

@@ -179,6 +179,9 @@ html2apk build --debug
 html2apk build --release
 html2apk build --mode fullscreen
 html2apk build --mode standalone
+html2apk build --mode floating
+html2apk build --orientation vertical
+html2apk build --min-sdk 24
 html2apk build --entry-file index.html
 html2apk build --web-root .
 html2apk build --app-name MeuApp
@@ -203,6 +206,9 @@ Exemplo completo:
   "packageId": "com.seuapp.meuapp",
   "version": "1.0.0",
   "mode": "fullscreen",
+  "orientation": "default",
+  "minSdkVersion": 24,
+  "themeColor": "#126fff",
   "icon": "",
   "splash": "",
   "permissions": ["INTERNET", "CAMERA", "POST_NOTIFICATIONS", "VIBRATE"],
@@ -229,7 +235,10 @@ Campos principais:
 | `appName` | Nome visivel do app. |
 | `packageId` | Identificador Android. Precisa ter formato como `com.empresa.app`. |
 | `version` | Versao do app. |
-| `mode` | `fullscreen` para tela cheia ou `standalone` para modo normal. |
+| `mode` | `fullscreen` para tela cheia, `standalone` para modo normal ou `floating` para icone flutuante. |
+| `orientation` | `default`, `vertical`, `horizontal`, `portrait` ou `landscape`. |
+| `minSdkVersion` | Versao minima do Android em API level. Padrao: `24`. |
+| `themeColor` | Cor base do tema/splash Android, em hexadecimal. |
 | `entryFile` | Arquivo HTML inicial. Normalmente `index.html`. |
 | `webRoot` | Pasta onde estao os arquivos web. Normalmente `"."`. |
 | `permissions` | Permissoes Android adicionadas ao app. |

package/examples/minimal/app.json

@@ -4,6 +4,9 @@
   "packageId": "com.seuapp.meuapp",
   "version": "1.0.0",
   "mode": "fullscreen",
+  "orientation": "default",
+  "minSdkVersion": 24,
+  "themeColor": "#126fff",
   "icon": "",
   "splash": "",
   "permissions": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html2apk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Node CLI and library to turn an HTML/CSS/JS folder into an Android APK through Cordova.",
   "main": "index.js",
   "bin": {

package/src/cli/index.js

@@ -10,7 +10,7 @@ function printHelp() {
 
 Usage:
   html2apk init
-  html2apk build [--release] [--debug] [--mode fullscreen|standalone] [--android-platform android@15.0.0]
+  html2apk build [--release] [--debug] [--mode fullscreen|standalone|floating] [--orientation vertical|horizontal] [--min-sdk 24] [--android-platform android@15.0.0]
   html2apk doctor
 
 The current working directory is always treated as the user app root.`);
@@ -28,6 +28,15 @@ function parseBuildArgs(args) {
     } else if (arg === "--mode") {
       options.mode = args[index + 1];
       index += 1;
+    } else if (arg === "--orientation") {
+      options.orientation = args[index + 1];
+      index += 1;
+    } else if (arg === "--theme-color") {
+      options.themeColor = args[index + 1];
+      index += 1;
+    } else if (arg === "--min-sdk" || arg === "--min-sdk-version" || arg === "--minSdkVersion") {
+      options.minSdkVersion = args[index + 1];
+      index += 1;
     } else if (arg === "--entry-file") {
       options.entryFile = args[index + 1];
       index += 1;
@@ -64,6 +73,9 @@ function createPlaceholderConfig(projectName = "MeuApp") {
     packageId: `com.seuapp.${packageSegment(appName)}`,
     version: "1.0.0",
     mode: "fullscreen",
+    orientation: "default",
+    minSdkVersion: 24,
+    themeColor: "#126fff",
     icon: "",
     splash: "",
     permissions: [

package/src/cordova/config-xml.js

@@ -2,6 +2,10 @@
 
 const fs = require("fs/promises");
 const path = require("path");
+const {
+  DEFAULT_ANDROID_MIN_SDK_VERSION,
+  MAX_ANDROID_MIN_SDK_VERSION
+} = require("../core/defaults");
 
 function xmlEscape(value) {
   return String(value)
@@ -17,12 +21,16 @@ function androidPermissionName(permission) {
 }
 
 function renderPermissions(permissions) {
-  if (!permissions.length) {
+  const uniquePermissions = Array.from(new Set((permissions || [])
+    .map((permission) => String(permission).trim())
+    .filter(Boolean)
+    .map(androidPermissionName)));
+  if (!uniquePermissions.length) {
     return "";
   }
 
-  const items = permissions
-    .map((permission) => `      <uses-permission android:name="${xmlEscape(androidPermissionName(permission))}" />`)
+  const items = uniquePermissions
+    .map((permission) => `      <uses-permission android:name="${xmlEscape(permission)}" />`)
     .join("\n");
 
   return `    <config-file target="AndroidManifest.xml" parent="/manifest">
@@ -45,25 +53,48 @@ function renderPreference(name, value) {
   return `    <preference name="${xmlEscape(name)}" value="${xmlEscape(value)}" />`;
 }
 
+function normalizeMinSdkVersion(value) {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isInteger(parsed)
+    && parsed >= DEFAULT_ANDROID_MIN_SDK_VERSION
+    && parsed <= MAX_ANDROID_MIN_SDK_VERSION
+    ? parsed
+    : DEFAULT_ANDROID_MIN_SDK_VERSION;
+}
+
 function renderAndroidSplashPreferences(options) {
   const splashIcon = options.androidSplashScreenAnimatedIcon || options.splash || options.icon;
   if (!splashIcon) {
     return "";
   }
 
+  const themeColor = options.themeColor || options.splashBackgroundColor || options.backgroundColor || "#FFFFFF";
+
   return [
     renderPreference("AndroidWindowSplashScreenAnimatedIcon", splashIcon),
-    renderPreference("AndroidWindowSplashScreenBackground", options.splashBackgroundColor || options.backgroundColor || "#FFFFFF"),
+    renderPreference("AndroidWindowSplashScreenBackground", themeColor),
     renderPreference("AndroidWindowSplashScreenAnimationDuration", options.splashAnimationDuration || "200")
   ].filter(Boolean).join("\n");
 }
 
 function renderConfigXml(options) {
   const fullscreen = options.mode === "fullscreen" ? "true" : "false";
-  const permissions = renderPermissions(options.permissions || []);
+  const permissionsList = options.mode === "floating"
+    ? [...(options.permissions || []), "SYSTEM_ALERT_WINDOW"]
+    : (options.permissions || []);
+  const permissions = renderPermissions(permissionsList);
   const icon = renderIcon(options.icon);
   const splashPreferences = renderAndroidSplashPreferences(options);
   const platformItems = [permissions, icon, splashPreferences].filter(Boolean).join("\n");
+  const backgroundPreference = renderPreference("BackgroundColor", options.themeColor || options.backgroundColor);
+  const modePreference = renderPreference("Html2ApkMode", options.mode || "standalone");
+  const minSdkPreference = renderPreference(
+    "android-minSdkVersion",
+    normalizeMinSdkVersion(options.minSdkVersion || options.androidMinSdkVersion)
+  );
+  const orientationPreference = ["portrait", "landscape"].includes(options.orientation)
+    ? renderPreference("Orientation", options.orientation)
+    : "";
 
   return `<?xml version="1.0" encoding="UTF-8"?>
 <widget id="${xmlEscape(options.packageId)}"
@@ -91,6 +122,9 @@ function renderConfigXml(options) {
   <preference name="AndroidLaunchMode" value="singleTop" />
   <preference name="DisallowOverscroll" value="true" />
   <preference name="GradlePluginKotlinEnabled" value="true" />
+${minSdkPreference}
+${modePreference}
+${orientationPreference ? `${orientationPreference}\n` : ""}${backgroundPreference ? `${backgroundPreference}\n` : ""}
 
   <platform name="android">
 ${platformItems || "    <!-- Extra Android options are generated here. -->"}

package/src/core/config.js

@@ -2,7 +2,11 @@
 
 const fs = require("fs/promises");
 const path = require("path");
-const { createDefaultOptions } = require("./defaults");
+const {
+  DEFAULT_ANDROID_MIN_SDK_VERSION,
+  MAX_ANDROID_MIN_SDK_VERSION,
+  createDefaultOptions
+} = require("./defaults");
 
 const CONFIG_FILES = ["app.json", "config.json"];
 
@@ -58,17 +62,35 @@ function mergeDeep(base, next) {
   return output;
 }
 
+function normalizeMinSdkVersion(value) {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isInteger(parsed)
+    && parsed >= DEFAULT_ANDROID_MIN_SDK_VERSION
+    && parsed <= MAX_ANDROID_MIN_SDK_VERSION
+    ? parsed
+    : DEFAULT_ANDROID_MIN_SDK_VERSION;
+}
+
 function normalizeOptions(options) {
   const normalized = { ...options };
 
-  normalized.mode = normalized.mode === "fullscreen" ? "fullscreen" : "standalone";
+  normalized.mode = ["fullscreen", "floating"].includes(normalized.mode) ? normalized.mode : "standalone";
+  if (normalized.orientation === "vertical") {
+    normalized.orientation = "portrait";
+  } else if (normalized.orientation === "horizontal") {
+    normalized.orientation = "landscape";
+  }
+  normalized.orientation = ["portrait", "landscape"].includes(normalized.orientation)
+    ? normalized.orientation
+    : "default";
   normalized.debug = Boolean(normalized.debug);
   normalized.release = Boolean(normalized.release);
+  normalized.minSdkVersion = normalizeMinSdkVersion(normalized.minSdkVersion || normalized.androidMinSdkVersion);
   normalized.permissions = Array.isArray(normalized.permissions)
-    ? normalized.permissions.filter(Boolean)
+    ? normalized.permissions.map((permission) => String(permission).trim()).filter(Boolean)
     : [];
   normalized.plugins = Array.isArray(normalized.plugins)
-    ? normalized.plugins.filter(Boolean)
+    ? normalized.plugins.map((plugin) => String(plugin).trim()).filter(Boolean)
     : [];
   normalized.entryFile = normalized.entryFile || "index.html";
   normalized.webRoot = normalized.webRoot || ".";
@@ -95,5 +117,6 @@ module.exports = {
   loadProjectConfig,
   resolveBuildOptions,
   mergeDeep,
-  normalizeOptions
+  normalizeOptions,
+  normalizeMinSdkVersion
 };

package/src/core/defaults.js

@@ -2,6 +2,9 @@
 
 const path = require("path");
 
+const DEFAULT_ANDROID_MIN_SDK_VERSION = 24;
+const MAX_ANDROID_MIN_SDK_VERSION = 36;
+
 function toPackageSegment(value) {
   return String(value || "app")
     .toLowerCase()
@@ -17,14 +20,17 @@ function createDefaultOptions(projectRoot) {
     packageId: `com.html2apk.${toPackageSegment(appName)}`,
     version: "1.0.0",
     mode: "standalone",
+    orientation: "default",
     debug: false,
     icon: null,
     splash: null,
-    permissions: ["INTERNET"],
+    permissions: ["INTERNET", "POST_NOTIFICATIONS", "VIBRATE"],
     plugins: [],
     release: false,
     keystore: null,
     androidPlatform: "android@15.0.0",
+    minSdkVersion: DEFAULT_ANDROID_MIN_SDK_VERSION,
+    themeColor: "#126fff",
     files: null,
     entryFile: "index.html",
     webRoot: ".",
@@ -33,5 +39,7 @@ function createDefaultOptions(projectRoot) {
 }
 
 module.exports = {
+  DEFAULT_ANDROID_MIN_SDK_VERSION,
+  MAX_ANDROID_MIN_SDK_VERSION,
   createDefaultOptions
 };

package/src/desktop/main.js

@@ -14,12 +14,19 @@ const { runDoctor, formatDoctorReport } = require("../runtime-manager/doctor");
 
 let mainWindow = null;
 const smokeTest = process.env.HTML2APK_DESKTOP_SMOKE === "1";
+const APP_ID = "dev.caiomultiversando.html2apk";
+const APP_NAME = "html2apk";
 const WINDOW_BACKGROUNDS = {
   light: "#f7fbff",
   dark: "#10141b"
 };
 
 app.commandLine.appendSwitch("disable-crash-reporter");
+app.setName(APP_NAME);
+
+if (process.platform === "win32") {
+  app.setAppUserModelId(APP_ID);
+}
 
 function rootPath(...parts) {
   return path.resolve(__dirname, "..", "..", ...parts);
@@ -57,7 +64,7 @@ function createWindow() {
     center: true,
     show: false,
     frame: false,
-    title: "html2apk",
+    title: APP_NAME,
     icon: iconPath(),
     backgroundColor: WINDOW_BACKGROUNDS.light,
     webPreferences: {
@@ -134,8 +141,8 @@ function cleanBuildOptions(options = {}) {
     release: Boolean(options.release)
   };
 
-  for (const key of ["mode", "appName", "packageId", "version", "icon", "androidPlatform"]) {
-    if (options[key]) {
+  for (const key of ["mode", "appName", "packageId", "version", "icon", "androidPlatform", "minSdkVersion", "themeColor", "orientation", "permissions"]) {
+    if (Array.isArray(options[key]) || options[key]) {
       output[key] = options[key];
     }
   }
@@ -359,7 +366,7 @@ app.on("window-all-closed", () => {
 });
 
 ipcMain.handle("app:info", () => ({
-  name: "html2apk",
+  name: APP_NAME,
   version: app.getVersion(),
   credit: "Dev Caio Multiversando",
   iconPath: iconPath()

package/src/desktop/renderer/index.html

@@ -58,6 +58,7 @@
         <button class="nav-item" data-view="settings"><span class="nav-icon">C</span><span data-i18n="navSettings">Configuracoes</span></button>
         <button class="nav-item" data-view="appearance"><span class="nav-icon">A</span><span data-i18n="navAppearance">Aparencia</span></button>
         <button class="nav-item" data-view="build"><span class="nav-icon">B</span><span data-i18n="navBuild">Build</span></button>
+        <button class="nav-item" data-view="codes"><span class="nav-icon">J</span><span data-i18n="navCodes">Codigos</span></button>
         <button class="nav-item" data-view="logs"><span class="nav-icon">L</span><span data-i18n="navLogs">Logs</span></button>
       </nav>
 
@@ -140,14 +141,48 @@
             <span data-i18n="mode">Modo</span>
             <select id="modeInput">
               <option value="" data-i18n="chooseMode">Escolha o modo</option>
-              <option value="fullscreen">fullscreen</option>
-              <option value="standalone">standalone</option>
+              <option value="fullscreen" data-i18n="modeFullscreen">Tela cheia</option>
+              <option value="standalone" data-i18n="modeStandalone">Normal</option>
+              <option value="floating" data-i18n="modeFloating">Flutuante</option>
+            </select>
+          </label>
+          <label class="field">
+            <span data-i18n="orientation">Orientacao</span>
+            <select id="orientationInput">
+              <option value="default" data-i18n="orientationDefault">Automatico</option>
+              <option value="portrait" data-i18n="orientationPortrait">Vertical</option>
+              <option value="landscape" data-i18n="orientationLandscape">Horizontal</option>
+            </select>
+          </label>
+          <label class="field">
+            <span data-i18n="minSdkVersion">Android minimo</span>
+            <select id="minSdkVersionInput">
+              <option value="24">Android 7.0 (API 24)</option>
+              <option value="25">Android 7.1 (API 25)</option>
+              <option value="26">Android 8.0 (API 26)</option>
+              <option value="27">Android 8.1 (API 27)</option>
+              <option value="28">Android 9 (API 28)</option>
+              <option value="29">Android 10 (API 29)</option>
+              <option value="30">Android 11 (API 30)</option>
+              <option value="31">Android 12 (API 31)</option>
+              <option value="32">Android 12L (API 32)</option>
+              <option value="33">Android 13 (API 33)</option>
+              <option value="34">Android 14 (API 34)</option>
+              <option value="35">Android 15 (API 35)</option>
+              <option value="36">Android 16 (API 36)</option>
             </select>
           </label>
           <label class="field">
             <span>cordova-android</span>
             <input id="androidPlatformInput" type="text" placeholder="android@15.0.0">
           </label>
+          <label class="field color-field">
+            <span data-i18n="appThemeColor">Cor do tema do app</span>
+            <div class="color-picker">
+              <input id="themeColorInput" type="color" value="#126fff">
+              <input id="themeColorTextInput" type="text" value="#126fff" maxlength="7">
+            </div>
+          </label>
           <div class="field icon-field">
             <span data-i18n="appIcon">Icone do app</span>
             <div class="icon-picker">
@@ -158,6 +193,10 @@
               </div>
             </div>
           </div>
+          <div class="field permissions-field">
+            <span data-i18n="androidPermissions">Permissoes Android</span>
+            <div id="permissionGrid" class="permission-grid"></div>
+          </div>
         </div>
 
         <div class="toggle-grid">
@@ -275,6 +314,17 @@
         <div id="logConsole" class="log-console"></div>
       </section>
 
+      <section id="view-codes" class="view">
+        <header class="view-header compact">
+          <div>
+            <p class="eyebrow" data-i18n="codesEyebrow">Bridge nativa</p>
+            <h1 data-i18n="codesTitle">Codigos interpretados</h1>
+          </div>
+        </header>
+        <p class="view-intro" data-i18n="codesIntro">Estas funcoes chamadas no JavaScript do app sao interpretadas pelo plugin Cordova e executadas no Java Android.</p>
+        <div id="nativeCodeGrid" class="code-grid"></div>
+      </section>
+
       <section id="view-help" class="view">
         <header class="view-header compact">
           <div>