Liteit.app JavaScript API Documentation | Enhance Your Web Projects

onload Event

All lia functions should be executed inside window.LIA_API.onLoad to ensure they work properly. To avoid repeatedly using window.LIA_API, you can assign it to a variable like const lia = window.LIA_API;

window.LIA_API = window.LIA_API || {};
window.LIA_API.onLoad = () =>{
  const lia = window.LIA_API;

  // Check if the app is installed
  lia.log(lia.isInstalled());

  // Trigger the installation UI
  lia.install().then((result) => lia.log(result));
};

Example

Here’s a basic example to showcase how to use the liteit.app JS API properly.
This simple example creates a button that handles app installation or opening based on the app's installation status. The button text dynamically changes to either "Open App" or "Install App," and it will be hidden if the user is already inside the app.

window.LIA_API = window.LIA_API || {};
window.LIA_API.onLoad = () =>{
    const lia = window.LIA_API;
    const installBtn = document.createElement("button");

    // Set button text based on installation status
    installBtn.textContent = lia.isInstalled() ? "Open App" : "Install App";

    // Hide the button if the user is already inside the app
    if (lia.isInApp()) {
        installBtn.style.display = 'none';
    }

    // Button click handler
    installBtn.onclick = () => {
        if (lia.isInstalled()) {
            lia.openApp();
        } else {
            lia.install().then(lia.log).catch(error => lia.log.error("Installation failed: ", error));
        }
    };

    // Append the button to the body
    document.body.appendChild(installBtn);
};

For a demo and code examples, check out API Demo Page

App Start & Development Base

All Liteit.app PWA apps start with the query parameter ?LiteItApp=true by default.

This means that when developing a custom UX/UI version of your app, you must build and test it based on the default development base:

Result indicats the installation status, such as:

example.com/?LiteItApp=true

or for subdomains:

*.example.com/?LiteItApp=true

This ensures consistent initialization and behavior for your app's frontend.

Example in PHP
You can detect if the app is running in LiteItApp mode using PHP like this:

<?php
if (isset($_GET['LiteItApp']) && $_GET['LiteItApp'] === 'true') {
    // App started in LiteItApp mode
    echo "Welcome to LiteItApp mode!";
} else {
    // Regular website access
    echo "Normal website mode.";
}
?>

Setting a Custom App Start URL
You can customize the app start URL/path:

Go to Dashboard → Apps.
Select your app.
Under General Settings, set the App Start URL.

Examples of custom App Start URLs:
/wordpress/
/pwa/
?version=PWA

Any URL or query string of your choice. Even if you set a custom App Start URL, the default development base (?LiteItApp=true) will always remain active. This ensures you always have a fallback development path.

install()

The install() method triggers the Progressive Web App (PWA) installation UI. Due to browser security policies, it must be invoked within a user-initiated event (e.g., a button click). Calling it outside a user gesture will result in a NotAllowedError.

Result indicats the installation status, such as:

"installed"
"dismissed"
"failed"
"accepted" (Chrome on desktop and Android)
"success" (iOS devices)

installBtn.onclick = () => {
    lia.install().then((result) => {
        lia.log(result);
    });
});

openApp()

The openApp() method attempts to open the app. It is best to check if the app is installed before calling this method to ensure proper behavior.

if (lia.isInstalled()) {
    lia.openApp();
} else {
    lia.log("App is not installed.");
}

onInstall()

The onInstall() method listens for the installation event of a Progressive Web App (PWA) and returns a promise that resolves with the installation status, such as "installed" when the app is successfully installed.

lia.onInstall().then((result) =>{
    lia.log(result);
});

getLocation()

The getLocation() method retrieves the user's current geolocation data (latitude, longitude, etc.) using the browser's geolocation API. It returns a promise that resolves with the geolocation data or an error message if geolocation is not supported or access is denied. By default, the data is sent as a JSON string, but you can pass false to getLocation(false) to receive the data as a plain object.

lia.getLocation().then((result) => {
    lia.log(result);
	// Logs geolocation data or error information
  }).catch((error) => {
    lia.log(error); // Logs any errors
});

isInstalled()

The isInstalled() method checks whether the app has been installed on the user's device. It returns a boolean value: true if the app is installed and false otherwise.

if (lia.isInstalled()) {
    lia.log("App is installed.");
  } else {
    lia.log("App is not installed.");
  }

isInApp()

The isInApp() method checks if the user is currently inside the app. It returns a boolean value: true if the user is in the app, and false otherwise. This is useful for detecting whether the user is using the app in its standalone or browser-based form.

if (lia.isInApp()) {
    lia.log("User is inside the app.");
  } else {
    lia.log("User is not inside the app.");
  }

pushBanner()

The pushBanner() method triggers the push notification permission banner if notifications have not already been granted. To use this method, push notifications must be enabled from your dashboard.

lia.pushBanner((error, message) => {
    if (error) {
		// "disabled", "unsupported"
        lia.log.e(error);
    } else {
		//"triggered", "granted"
        lia.log.i(message);
    }
});

isPushGranted()

The isPushGranted() method checks if push notifications are granted for the app. It returns a boolean value: true if push notifications have been granted, and false otherwise.

if (lia.isPushGranted()) {
    lia.log("Push notifications are granted.");
  } else {
    lia.log("Push notifications are not granted.");
  }

osIs()

The osIs() method returns the current operating system (OS) being used by the user. It returns the os value, which could represent various operating systems such as "Windows," "macOS," "Linux," "iOS,", "Android." ..etc.

lia.log("Operating System: ", lia.osIs());

browserIs()

The browserIs() method returns the current browser being used by the user. It returns the browser value, which could represent browsers like "Chrome," "Firefox," "Safari," etc.

lia.log("Browser: ", lia.browserIs());

isPrivate()

The isPrivate() method checks if the current window or tab is in incognito or private mode. It returns a promise that resolves with an object containing the isPrivate property, which indicates whether the tab is private (true) or not (false).

lia.isPrivate().then(function(result) {
  if (result.isPrivate) {
    lia.log("This window is private/incognito");
  } else {
    lia.log("This window is normal");
  }
});

player()

The player constructor initializes a media player for audio and video playback, supporting MP4, MP3, WebM, Ogg, WAV, AAC, and FLAC. It offers customization options like autoplay, looping, volume control, and media session metadata.

//Data structure
const object = {
    src: "video.mp4", // Media source URL (MP4, MP3, WebM, Ogg, WAV, AAC, FLAC)
    loop: false,  // Disable looping
	poster: "poster.jpg",
    autoplay: true, // Start playback automatically
    next: () => alert('Next..'), // Function or URL for next media
    prev: '#', // Function or URL for previous media
	muted: false, // true or false
	volume: 0.8, //Default volume, Keep between 0-1
	//Media Session API
    title: 'Song title',
    artist: 'Artist name',
    album: 'Album name',
    artwork: [
		//If artwork is not provided, the poster image will be used instead.
		//92x92, 128x128, 192x192, 256x256, 384x384, 512x512
        { src: "image_96x96.png", sizes: "96x96", type: "image/png" },
        { src: "image_128x128.png", sizes: "128x128", type: "image/png" }
    ]
};
let plyr = new lia.player(object);

Player Methods

setSource() The setSource() method loads and plays the next media file.

player.setSource(object); //Use object as above or pass URL string

play() Starts media playback. If playback fails, logs an error.

plyr.play();

togglePlay() Plays or pauses media based on its current state.

plyr.togglePlay();

pause() Pauses media playback.

plyr.pause();

stop() Stops playback and resets the current time to `0`.

plyr.stop();

setVolume(level) Sets the volume (0 to 1).

plyr.setVolume(0.5);

getVolume() Returns the current volume level.

lia.log(plyr.getVolume());

setCurrentTime(seconds) Sets the playback position.

plyr.setCurrentTime(30);

getCurrentTime(format = true) Gets the current playback time, formatted or raw.

lia.log(plyr.getCurrentTime());

getDuration(format = true) Gets the total media duration.

lia.log(plyr.getDuration());

isPlaying() Returns `true` if media is playing.

lia.log(plyr.isPlaying());

setLoop(loop) Enables or disables looping.

plyr.setLoop(true);

isLooping() Checks if looping is enabled.

lia.log(plyr.isLooping());

toggleLoop() Toggles looping state.

plyr.toggleLoop();

mute() Mutes audio.

plyr.mute();

unmute() Unmutes audio.

plyr.unmute();

toggleMute() Toggles mute state.

plyr.toggleMute();

isMuted() Returns `true` if muted.

lia.log(plyr.isMuted());

setSpeed(rate) Sets playback speed. Accepts predefined values from 0.25 to 2.

plyr.setSpeed(1.25); // Sets speed to 1.25x

getSpeed() Gets playback speed.

lia.log(plyr.getSpeed());

getTime(callback) Retrieves current playback time asynchronously.

plyr.on("playing", () => {
    window.player.getTime((time) => {
        lia.log(time);
    });
});

share()

The share() method allows you to share content (such as a URL, title, and text) using the Web Share API. It returns a Promise that resolves when the content is successfully shared or rejects if there is an error.

const shareData = {
  url: 'https://example.com', // URL to share
  title: 'Example Title',     // Optional title
  text: 'Check out this example!' // Optional text
};

lia.share(shareData)
  .then((result) => {
    lia.log(result); // "Successfully shared!"
  })
  .catch((error) => {
    lia.log(error.message); // Log any error that occurs
  });

isMob()

The isMob() method checks if the user is accessing the Site/App from a mobile device. It returns a boolean value:

if (lia.isMob()) {
  lia.log("User is on a mobile device.");
} else {
  lia.log("User is not on a mobile device.");
}

isPwable()

The isPwable() method checks if the current environment supports Progressive Web Apps (PWA). It returns a boolean value indicating whether the browser supports the features typically associated with PWAs.

if (lia.isPwable()) {
  lia.log("PWA is supported in this environment.");
} else {
  lia.log("PWA is not supported in this environment.");
}

isOnline()

The isOnline() method checks the current network status of the device (whether it is online or offline) and returns a Promise that resolves with the current status. It also listens for changes in network status and updates accordingly.

isOnline().then((status) =>{
  if (status) {
    lia.log("You are online.");
  } else {
    lia.log("You are offline.");
  }
}).catch((error) => {
  lia.log(error.message);
});

log()

The log() function is used to log messages in the console with various levels of severity. It can display messages along with optional error details and allow for emojis to be included for better clarity.

• log() – Default log message.
• log.s() – Success message.
• log.w() – Warning message.
• log.i() – Informational message.
• log.e() – Error message.

lia.log("This is a general log message.");
lia.log.s("This is a success message.");
lia.log.w("This is a warning message.");
lia.log.i("This is an informational message.");
lia.log.e("This is an error message.");

// Example with error and emoji:
const error = new Error("Something went wrong");
lia.log.e("Error occurred", error, true);

JavaScript API

Reference: