Is a JS-Native Bridge that works across all platforms?

Currently, I am developing an app that heavily utilizes webviews on both iOS and Android to display content with native chrome around it. I am looking for a way to manipulate this chrome using JavaScript methods.

On Android WebView, there is a feature called addJavascriptInterface that allows for this functionality. However, iOS does not have a similar capability. I have explored the solution provided in the Stack Overflow answer at iOS JavaScript bridge, which has some helpful information, but it is limited to iOS only. Ideally, I would like for the underlying web code to support callbacks on both Android and iOS devices.

I am considering using PhoneGap or Appcelerator to achieve this, but I am unsure if their core product (which typically offers a native experience using HTML/CSS/JS) includes the functionality I am seeking.

Any insights or suggestions would be greatly appreciated. Thank you!

javascriptandroidiosmobile-website

Answer №1

To effectively tackle this task, I suggest taking a hybrid approach by combining elements from both examples:

function executeNativeAction() {
  if (androidbridge != null {
    androidbridge.doAction();
  }
  else {
    //construct URL
    window.location = "myiphonescheme://action";
  }

If you're up for a challenge, you could develop a JavaScript object to automate the process for you:

function NativeAppHandler () {
  function performAction(actionName, parameters) {
    if (androidbridge != null {
      // Check if android bridge and specified method exist, then execute directly
      if (androidbridge[actionName] != null) {
        androidbridge[actionName].apply(this, parameters);
      }
    }
    else {
      // Creating the URL is a bit more complex; one possible method is as follows:
      var url = "myiphonescheme://" + actionName;
      if (parameters.length > 0) {
        url += "?"
        var i = 0;
        for (param in parameters) {
          url += "param" + i + "=" + param;
          ++i;
          if (i < parameters.length) {
            url += "&";
          } 
        }
      }
    }
  }
}

Using this setup is straightforward:

var handler = new NativeAppHandler();

function onButtonClick() {
  handler.performAction("doAction", null);
}

Please note that I created this solution from memory and have not been able to thoroughly test it yet - however, I believe it should function adequately as long as there are no significant errors in my implementation

Answer №2

If you're looking to utilize WKWebView, consider giving the XWebView project a try

Answer №3

Utilizing phonegap plugins is a great way to bridge the gap between webview and native functionality.

Check out this link for a guide on creating your own plugin!

In my experience with phonegap, I've found that transitioning to a mobile web platform can be a time-saving solution for those already working within webviews.

One drawback to consider is that by using phonegap, you're essentially creating a webpage rather than a true mobile app. This can limit the use of native features and impact the app's responsiveness. However, given that you're already familiar with webviews, the benefits of mobile web platforms may outweigh this disadvantage.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with JQuery blur and enter key functionality not working properly

I'm currently utilizing the code below for inline editing. I am looking to trigger ajax when either the enter key is pressed or the user clicks away (blur). While everything works fine when the enter key is pressed, the AJAX call does not fire on bl ...

javascriptjquery

Both if and else statements are carrying out code in JavaScript/jQuery

The second if statement is functioning correctly, but the first one always triggers the else statement and never stands alone. This jQuery function is enclosed within another function that is invoked under the "$(document).ready" command. I resorted to u ...

javascriptjqueryasp.net

Tips for restricting camera movement in threejs

Being new to working with threejs, I am struggling to set limits on the camera position within my scene. When using OrbitControls, I noticed that there are no restrictions on how far I can zoom in or out, which I would like to change. Ideally, I want the c ...

javascriptthree.jsfrontend

Heroku Node.js - Cross-Origin Resource Sharing (CORS) is functioning correctly for all API requests except for when using the image upload

Our web application contains numerous APIs that retrieve data from a Node.js server deployed on Heroku. Most of the APIs function correctly, with the exception of one that allows users to upload images to the server. While this API worked flawlessly in o ...

javascriptnode.jsheroku

Optimal strategies for designing navigation bars on contemporary websites

Struggling to find a solid answer for this dilemma. I have multiple html pages and a single navigation bar that I want to include on all pages for consistency. The idea of duplicating the html code for the navigation bar goes against everything I've l ...

javascriptjqueryhtml

A step-by-step guide to adding an object to an already existing array in Vue.js

Within the code snippet below, I am dealing with an object value and trying to figure out how to push it to an existing array. methods: { onChange(event) { this.newItems.push(event.target.value); console.log(event.target.value); } } Here is m ...

javascriptarraysvue.js

What could be causing my Bootstrap modal to fail to load dynamically?

I'm currently immersed in a fun side project, where data is fetched from a MySQL database and dynamically displayed. Everything seems to be running smoothly except for the modal display issue. The ID always matches, but the modal just won't open. ...

javascriptphpjquerymysqlajax

Is there a way to create a navigation menu that highlights as we scroll down the page?

Check out this example of what I am looking for. https://i.stack.imgur.com/fdzvZ.png If you scroll, you will notice that the left menu highlights. Sub-menus will extend when the corresponding menu is highlighted and collapse when other menus are highlig ...

javascripthtmlnavscrollspy

JavaScript code to prevent user from entering phone number

I operate a booking platform similar to AirBnB where users communicate with each other through messages on the site. My goal is to prevent users from sharing telephone numbers and email addresses within these messages. Currently, I am implementing a meth ...

javascriptphp

Using an if/else statement in a Jade Template to conditionally remove a select option

I'm a beginner with Jade and I've been assigned to add a select option to a webpage. Everything is working well, except for when the drop-down list is empty and the page is refreshed, an empty option element is created. I want to find a way to re ...

javascriptjquerynode.jsexpresspug

Unchecking the select-all checkbox in Ag-Grid after updating the row data using an external button

In my ag-grid setup, I have implemented checkboxes in the first row to allow users to select individual rows. Additionally, there is a "select all" checkbox in the header for easy selection of all rows with a single click. To create the select all checkbox ...

javascriptjqueryangularjsag-grid

Ways to retrieve the output from an AJAX call

Today I'm developing a JavaScript function named "sendData". This function simplifies the process by eliminating the need to manually code an entire ajax statement. However, considering that it operates asynchronously, I found myself wondering how to ...

phpjavascriptjqueryajax

Can the tooltip on c3 charts be modified dynamically?

Creating a c3 chart involves defining various properties, including a tooltip. Here is an example: generateData = () => { const x = randomNR(0, 100); const y = randomNR(0, 100); const together = x + y; return { data: { columns: [ ...

javascriptd3.jschartsc3.js

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

I'm having trouble articulating this query without it becoming multiple issues, leading to closure. Here is my approach to passing components with hooks and rendering them based on user input. I've stored the components as objects in an array an ...

javascriptreactjs

What could be causing React Router to fail in navigating to a nested route?

In my App.js file, I am implementing front-end routing using react-router-dom version 6.11.2: import "./App.css"; import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements, } from "react-router-dom"; // Othe ...

javascriptreactjsreact-routerreact-router-dom

Deleting database information using Jquery when a div is clicked

I'm looking to create an alert system where users will see a pop-up alert on their screen. However, I am facing a major issue in removing the div completely. I understand that I need to remove it from the database, but I'm struggling with finding ...

javascriptphpjqueryhtmlcss

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...

javascriptcssreactjsdomfrontend

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Whenever I insert the code into my Blogger platform, an error pops up stating: The entity name must directly follow the '&' in the entity reference Here is the code: <script> if (typeof bc_blocks == "undefined" && wind ...

javascripthtmlcss

Error message: "Asynchronous task"

Recently, I developed an app with a feature that allows users to log in by verifying their information against a database before redirecting them to the dashboard screen. This functionality was flawless until I started encountering unexpected errors, and I ...

androiddatabasejson

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

javascripthtmlreactjscarouselantd