Cannot get desktop mode

[TheCarpetMerchant]

• [x] I have read the Getting Started section
• [x] I have already searched for the same problem

Environment

Technology	Version
Flutter version	3.3.8
Plugin version	5.7.2+1
Android version	API 31
iOS version	/
macOS version	/
Xcode version	/

Device information: Pixel 2 emulator

Here are the options I have activated :

HeadlessInAppWebView headlessWebView = HeadlessInAppWebView(
    initialUrlRequest: URLRequest(
      url: Uri.parse('https://www.fanfiction.net/'),
    ),
    initialOptions: InAppWebViewGroupOptions(
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
        useWideViewPort: false,
        supportMultipleWindows: true,
      ),
      crossPlatform: InAppWebViewOptions(
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
        preferredContentMode: UserPreferredContentMode.DESKTOP,
      ),
    ),
  );

Using the Chrome app on the emulator, I get the website in desktop mode just fine, so it is the Android Webview that doesn't communicate the correct informations to the website.

[github-actions[bot]]

👋 @TheCarpetMerchant

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[pichillilorenzo]

Tested using InAppWebView and it works correctly. Here is the full code example used:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb &&
      kDebugMode &&
      defaultTargetPlatform == TargetPlatform.android) {
    await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("InAppWebView test"),
        ),
        body: Column(children: <Widget>[
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialUrlRequest:
                  URLRequest(url: Uri.parse("https://www.fanfiction.net/")),
              initialOptions: InAppWebViewGroupOptions(
                android: AndroidInAppWebViewOptions(
                  useHybridComposition: true,
                ),
                crossPlatform: InAppWebViewOptions(
                  userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
                  preferredContentMode: UserPreferredContentMode.DESKTOP,
                ),
              ),
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
            ),
          ),
        ]));
  }
}

Screenshot:

However, on Android, the desktop mode implementation overrides some options to make it work. You can find the Java code implementation here: https://github.com/pichillilorenzo/flutter_inappwebview/blob/c078c48c682b82e3a1134bb105b1da1098ecd88a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/in_app_webview/InAppWebView.java#L1215

[TheCarpetMerchant]

@pichillilorenzo After investigating further, it seems the webview doesn't have the same behavior as browsers. Calling loadUrl opens a new session from the point of view of Cloudflare. How can I emulate the behavior of navigating to a new page ? Edit : I tried with isLoading(), but that doesn't seem to consider javascript running on page load, which makes sense.

[erickcchoi]

Same issue here, just change the above code's url to www.olevod.com, the example above cannot get desktop mode.