score:0

Accepted answer

the only doable way i found is a multiple steps process.

public web page

create and host a public web page doing the following:

  1. fetch the browser info onto an object
  2. redirect to the given redirect url with the info

in a nutshell:

<!doctype html>
<html lang="en">
  <body>
    <script type="text/javascript">
      const browserinfo = {
        // currently unable to fetch the default value automatically.
        // @see https://developer.mozilla.org/en-us/docs/web/http/content_negotiation/list_of_default_accept_values
        acceptheader: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
        javaenabled: window.navigator.javaenabled(),
        language: window.navigator.language,
        colordepth: window.screen.colordepth,
        screenheight: window.screen.availheight,
        screenwidth: window.screen.availwidth,
        timezoneoffset: window.navigator.timezoneoffset,
        useragent: window.navigator.useragent,
        javascriptenabled: true,
      }
      console.log('browserinfo', browserinfo);

      const urlparams = new urlsearchparams(window.location.search);

      if (urlparams.has('redirecturl')) {
        const redirecturl = new url(urlparams.get('redirecturl'));
        object.entries(browserinfo).foreach(([key, value]) => {
          redirecturl.searchparams.append(key, value);
        });
        document.location = redirecturl.tostring();
      }
    </script>
  </body>
</html>

expo app redirect fetching

on expo, you have two things to do:

  1. start an event listener to fetch the redirect
  2. open a webbrowser instance to the previous public page

example:

import react, { fc, usecallback } from 'react';
import * as linking from 'expo-linking';
import * as webbrowser from 'expo-web-browser';
import * as querystring from 'query-string';
import {
  button,
} from '@kidways/apps-components';
import {
  buttonprops,
  view,
} from 'react-native';
import { usefocuseffect } from '@react-navigation/native';

const app: fc = () => {
  const urleventhandler = (event) => {
    const parsedurl = querystring.parseurl(event.url);
    const path = parsedurl.url.split('/--/')[1];

    if (
      path === 'browser-info'
    ) {
      // at this point, you have all the needed information.
      console.log('browser-info', parsedurl.query);
    }
  };

  usefocuseffect(
    usecallback(() => {
      linking.addeventlistener('url', urleventhandler);

      return () => linking.removeeventlistener('url', urleventhandler);
    }, []),
  );

  const handlebrowserinfotest: buttonprops['onpress'] = () => {
    webbrowser.openbrowserasync(
      'https://your.domain/browser.html?redirecturl='
      + linking.createurl('browser-info')
    );
  }

  return (
    <view>
      <button
        title="browser info"
        onpress={handlebrowserinfotest}
      />
    </view>
  );
};

with this code, you have a way to fetch the browser info just by pressing the button.

this solution is not ideal because of the user browser opening to achieve that, but i am afraid there is currently no other way.


Related Query

More Query from same tag