Skip to content

Browser

Jump to bottom Edit New page
knoop7 edited this page Jun 22, 2026 · 5 revisions

Browser

The built-in browser lets you display web pages inside Ava, such as Home Assistant dashboards. It supports two render engines: System WebView and GeckoView.

Overview

The browser is a full-screen overlay that can display any web content on top of Ava.

Main Uses:

  • Display Home Assistant dashboards
  • Display custom control panels
  • Display information websites
  • Kiosk mode for old devices

Render Engines

Ava supports two browser engines:

Engine Description Use Case
System WebView Uses Android system WebView Most devices, lightweight
GeckoView Mozilla Gecko engine pack Old devices with outdated WebView

GeckoView Engine

GeckoView provides a modern browser engine for devices with outdated or missing system WebView.

Setup:

  1. Go to Settings -> Browser
  2. Select GeckoView as render engine
  3. Tap to download the engine pack
  4. When the install dialog appears, tap Install
  5. Wait for installation to complete

Notes:

  • Requires downloading the engine pack (separate APK)
  • Supports arm64-v8a and armeabi-v7a
  • Can check for engine updates and uninstall from settings
  • If the engine pack is not installed, browser falls back to System WebView

Features

Basic Features

Feature Description
Full Screen Web page fills entire screen
Pull to Refresh Pull down to refresh page
JavaScript Full JS support
Local Storage LocalStorage supported
Page Scale Initial zoom (0-500, 0=auto)
Font Size Page font size percentage (50-300)
Touch / Drag Toggle touch and drag interaction

Advanced Features

Feature Description
Render Mode Hardware/software rendering switch
Dark Mode Sync Sync dark mode with Ava and HA dashboard
User Agent Switch browser identity (Android/Desktop/macOS/iOS)
Tampermonkey Userscript support
Browser Sidebar Slide-out menu on the edge
Gesture Navigation Swipe from left edge to go back, swipe left to go forward
Browser Commands Remote control via Home Assistant
Sync URL Sync current browser URL back to HA
Clear Cache Clear browser cache, cookies, and history
Scale Slider Entity Expose a bidirectional scale slider in HA

Settings

Go to Settings -> Browser

Setting Description Default
Render engine System WebView or GeckoView System WebView
Pull to Refresh Allow pull-down to refresh On
Page Scale Initial zoom (0=auto) 0
Font Size Page font size percentage 100
Touch Enabled Allow touch interaction On
Drag Enabled Allow drag operations On
Render Mode Hardware/software rendering Hardware
Follow Dark Mode Sync dark mode with app and HA Off
User Agent Browser identity Default (Android)
Tampermonkey Enable userscript support Off
Browser Sidebar Slide-out menu on the edge Off
Gesture Navigation Swipe to navigate back/forward Off
Settings Button Show gear icon in bottom right Off
Back Key Hide Press back key to hide browser On
Sync Current URL Sync browser URL to HA entity Off
Advanced Control Enable remote browser commands Off
Scale Slider Entity Expose scale slider in HA Off

Render Mode

Mode Description Use Case
Hardware Uses GPU, better performance Most devices
Software Uses CPU, better compatibility Old devices or rendering issues

User Agent Options

Option Description
Default (Android) Standard Android browser
Desktop (Windows) Pretend to be Windows desktop
macOS (Safari) Pretend to be macOS Safari
iOS (iPhone) Pretend to be iPhone Safari

Tampermonkey (Userscripts)

Ava includes a lightweight userscript manager based on the Android-WebMonkey project.

Supported GM APIs

  • GM_getValue / GM_setValue
  • GM_addStyle
  • GM_xmlhttpRequest
  • GM_cookie
  • GM_notification

Not Supported

  • GM_download
  • GM_webRequest
  • unsafeWindow

How to Use

  1. Go to Settings -> Browser -> Tampermonkey
  2. Enable Tampermonkey
  3. Tap Add Script to install userscripts
  4. Manage installed scripts from the same page

Browser Sidebar

A slide-out menu on the edge of the browser overlay for quick access to features.

Setup

  1. Go to Settings -> Browser -> Browser Sidebar
  2. Enable sidebar
  3. Choose position (left or right edge)

Home Assistant Dashboard

Recommended Setup

Create a dedicated dashboard view for Ava:

# configuration.yaml
lovelace:
  mode: yaml
  dashboards:
    ava-dashboard:
      mode: yaml
      filename: ava_dashboard.yaml
      title: Ava
      icon: mdi:tablet
      show_in_sidebar: false

Hide Sidebar

Use custom CSS to hide HA sidebar and header:

ha-sidebar { display: none !important; }
.header { display: none !important; }
home-assistant { --app-drawer-width: 0px; }

Advanced Control (Browser Commands)

After enabling Advanced Control, you can remotely control the browser via Home Assistant services.

How to Call

action: esphome.xxx_webview_command
data:
  command: 'your command'

Supported Commands

Command Format Description
Reload page {"reload": true} Reload current page
Clear cache {"clearCache": true} Clear browser cache
Set brightness {"brightness": 128} Set screen brightness (0-255)
Set volume {"volume": 50} Set volume (0-100)
Execute JS {"eval": "alert('hello')"} Execute JavaScript code
Clear injected {"eval": ""} Clear injected effects

Home Assistant Control

Open Web Page

service: text.set_value
target:
  entity_id: text.your_device_name_ha_remote_url
data:
  value: "http://your-ha-address:8123/lovelace/0"

Close Browser

service: text.set_value
target:
  entity_id: text.your_device_name_ha_remote_url
data:
  value: ""

Show/Hide Browser

# Show browser
service: switch.turn_on
target:
  entity_id: switch.your_device_name_browser_display

# Hide browser
service: switch.turn_off
target:
  entity_id: switch.your_device_name_browser_display

Using AI to Generate Animation Effects

You can use AI tools to generate custom animation effects (cherry blossoms, snow, stars, etc.) and inject them via the eval command.

Example: Cherry Blossom Animation

service: text.set_value
target:
  entity_id: text.your_device_name_browser_command
data:
  value: '{"eval": "!function(d,b,c,s){d=document,b=d.body,c=d.createElement(\"div\"),s=d.createElement(\"style\"),c.style.cssText=\"position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;overflow:hidden;pointer-events:none\",s.textContent=\".s{position:absolute;top:-10%;background:linear-gradient(135deg,#fff 20%,#ffb7c5 100%);border-radius:100% 0 120% 0;box-shadow:1px 1px 2px rgba(0,0,0,.1);animation:f linear infinite,w ease-in-out infinite alternate}@keyframes f{0%{opacity:0;transform:translateY(0) rotateX(0) rotateZ(0)}20%{opacity:1}100%{opacity:0;transform:translateY(110vh) rotateX(360deg) rotateZ(720deg)}}@keyframes w{0%{margin-left:-50px}100%{margin-left:50px}}\",d.head.appendChild(s),b.appendChild(c),setInterval(function(p,w,t){p=d.createElement(\"div\"),w=Math.random()*20+8,t=Math.random()*10+6,p.className=\"s\",p.style.cssText=\"left:\"+Math.random()*100+\"%%;width:\"+w+\"px;height:\"+w*1.4+\"px;animation-duration:\"+t+\"s,\"+(Math.random()*4+3)+\"s;animation-delay:-\"+Math.random()*8+\"s\",c.appendChild(p),setTimeout(function(){c.removeChild(p)},t*1e3)},100)}()"}'

Clear Animation Effects

service: text.set_value
target:
  entity_id: text.your_device_name_browser_command
data:
  value: '{"eval": ""}'

FAQ

Web page shows blank?

  1. Check if URL is correct
  2. Check network connection
  3. Try switching render mode (hardware/software)
  4. Try switching to GeckoView engine
  5. Check if HA is accessible

Web page loads slowly?

  1. Check network speed
  2. Simplify dashboard content
  3. Reduce animation effects
  4. Try GeckoView engine on old devices

Touch not responding?

  1. Check if Touch Enabled is on
  2. Check overlay permission
  3. Try restarting service
  4. Check if other overlays are blocking

Keyboard doesn't work in browser?

  1. This may be a WebView issue on certain devices
  2. Try switching to GeckoView engine
  3. Check if the system WebView is up to date

Browser doesn't follow dark mode?

  1. Enable Follow Dark Mode in Settings -> Web Browser
  2. Check if Ava dark mode is enabled
  3. Check if HA dashboard supports dark mode

GeckoView engine install failed?

  1. Check device architecture (arm64-v8a or armeabi-v7a required)
  2. Check network connection
  3. Ensure overlay permission is granted for the engine pack
  4. Try again later if download fails

Back to Home

Add a custom footer

Core

Optional Modules

Advanced

Clone this wiki locally