Mobile view

[lazuardyk]

Is there any mobile view on this new version? Thanks for the great tool!

[blakebyrnes]

Thanks! You can control your viewport size, but we haven't created a true mobile view yet. It's on the radar, but not a nearterm priority. Maybe someone will take it on once the Unblocked project released the emulator generator.

[lazuardyk]

Thanks! You can control your viewport size, but we haven't created a true mobile view yet. It's on the radar, but not a nearterm priority. Maybe someone will take it on once the Unblocked project released the emulator generator.

Thanks for the reply. If I control the viewport size, will it change the user agent also? Because I need to use a mobile user agent.

[timewalkerF]

I need to use a mobile user agent too

[Baker68]

You could try to use the code provided by @blakebyrnes here ; So you could send :

await page.devtoolsSession.send("Emulation.clearDeviceMetricsOverride");
await page.devtoolsSession.send("Emulation.setDeviceMetricsOverride", {
    ...contentSize,
    mobile: true,
});

you should test what happens when you set mobile to TRUE ;

you could also use the Emulation.setUserAgentOverride api ;

do note that some built in evasions will be affected by those changes.

[lazuardyk]

@Baker68 Thanks for the reply,

I've tried using the @blakebyrnes code, the viewport is changed and it works, but it doesn't work when I try to change user-agent using Emulation.setUserAgentOverride.

This is my onClientCommand method:

async onClientCommand({ frame, page }, contentSize, userAgent) {
    await page.devtoolsSession.send("Emulation.clearDeviceMetricsOverride");
    await page.devtoolsSession.send(
      "Emulation.setDeviceMetricsOverride",
      contentSize
    );
    await page.devtoolsSession.send(
      "Emulation.setUserAgentOverride",
      userAgent
    );
  }

And I called it like:

await hero.activeTab.resize(
    {
      width: userAgent.viewportWidth,
      height: userAgent.viewportHeight,
      screenWidth: userAgent.screenWidth,
      screenHeight: userAgent.screenHeight,
      deviceScaleFactor: 1,
      mobile: true,
    },
    {
      userAgent: userAgent.userAgent,
      platform: userAgent.platform,
    }
  );

The result is the viewport is changed but the user-agent isn't. Am I missing something?

[Baker68]

@lazuardyk ; here is what you need : https://ulixee.org/docs/hero/plugins/core-plugins#new-coreplugincreateoptions

constructor({ emulationProfile, corePlugins, logger, sessionSummary }) {
        emulationProfile.userAgentOption.string = "UA string here";
        super({ emulationProfile, corePlugins, logger, sessionSummary });

[GlenDC]

Is that even within scope of Hero? I mean it's not impossible, but it means essentially a lot of emulation work which I cannot imagine there is time for on roadmap unless a company is willing to invest serious dev time into it? For my purposes It is not a requirement for now at all to have this, as we're fine with just desktop for browser purposes (atm).

Am I wrong here @blakebyrnes ?

[blakebyrnes]

@GlenDC Yes, to do this correctly is a large effort. And mobile Chrome on IOS doesn't run on the same engine. However, Android Chrome is likely do-able. It's just not a priority in the nearterm. If I could mark this with a lower priority, I probably would.