search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
166.29k stars 27.51k forks source link

Flutter inapp webview doesn't work for most websites on android #142495

Closed rohan-mehta closed 9 months ago

rohan-mehta commented 9 months ago

What package does this bug report belong to?

webview_flutter

What target platforms are you seeing this bug on?

Android

Have you already upgraded your packages?

Yes

Dependency versions

pubspec.lock ```lock webview_flutter: dependency: "direct main" description: name: webview_flutter sha256: "71e1bfaef41016c8d5954291df5e9f8c6172f1f6ff3af01b5656456ddb11f94c" url: "https://pub.dev" source: hosted version: "4.4.4" webview_flutter_android: dependency: transitive description: name: webview_flutter_android sha256: b54c89fe14a6d26a2a46e24880da0441cdd2bf1f6d01a5b3e1d39558feb1de0b url: "https://pub.dev" source: hosted version: "3.13.1" webview_flutter_platform_interface: dependency: transitive description: name: webview_flutter_platform_interface sha256: dbe745ee459a16b6fec296f7565a8ef430d0d681001d8ae521898b9361854943 url: "https://pub.dev" source: hosted version: "2.9.0" webview_flutter_wkwebview: dependency: transitive description: name: webview_flutter_wkwebview sha256: eebfabfa8a115b535b52031b8b26f7a4b58ceceab378bc9db8762b0fb46f7b5d url: "https://pub.dev" source: hosted version: "3.10.0" ```

Steps to reproduce

See code sample below. I used [youtube.com](https://www.youtube.com/) as the URl.

Expected results

Webview loads, buttons are clickable etc.

Actual results

For some websites, page doesn't load. For others, loads but not usable.

Works fine on iOS, and on the actual device browser on Android. BUt not in the in-app webview.

Code sample

Code sample ```dart import 'package:app/components/app_bar.dart'; import 'package:app/navigation/helper.dart'; import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebviewHost extends HookWidget { const WebviewHost({super.key, required this.url, this.title}); final String url; final String? title; @override Widget build(BuildContext context) { final webviewController = useMemoized( () => WebViewController()..loadRequest(Uri.parse(url)), [url]); return Scaffold( appBar: AppBarHelper.getAppbar(title: title, context: context), body: WebViewWidget(controller: webviewController)); } static Future pushWebview(BuildContext context, String url, {String? title}) async { final route = NavigationHelper.getRoute( context: context, builder: (_) => WebviewHost(url: url, title: title)); await Navigator.of(context).push(route); } } ```

Screenshots or Videos

Screenshots / Video demonstration Hangs on this forever:

Logs

Logs ```console D/EGL_emulation( 8888): app_time_stats: avg=261.34ms min=12.04ms max=3560.18ms count=15 I/PlatformViewsController( 8888): Hosting view in view hierarchy for platform view: 3 I/PlatformViewsController( 8888): PlatformView is using SurfaceProducer backend E/FrameEvents( 8888): updateAcquireFence: Did not find frame. D/EGL_emulation( 8888): app_time_stats: avg=3893.43ms min=3893.43ms max=3893.43ms count=1 E/FrameEvents( 8888): updateAcquireFence: Did not find frame. I/ImageReaderSurfaceProducer( 8888): Dropping rendered frame that was not acquired in time. I/chromium( 8888): [INFO:CONSOLE(0)] "Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.", source: (0) I/chromium( 8888): [INFO:CONSOLE(1)] "The key "" is not recognized and ignored.", source: https://m.youtube.com/ (1) E/FrameEvents( 8888): updateAcquireFence: Did not find frame. D/EGL_emulation( 8888): app_time_stats: avg=72.26ms min=10.15ms max=525.50ms count=15 E/FrameEvents( 8888): updateAcquireFence: Did not find frame. D/EGL_emulation( 8888): app_time_stats: avg=403.85ms min=4.40ms max=762.13ms count=3 D/EGL_emulation( 8888): app_time_stats: avg=400.35ms min=5.34ms max=750.62ms count=3 E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. I/ImageReaderSurfaceProducer( 8888): Dropping rendered frame that was not acquired in time. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. I/ImageReaderSurfaceProducer( 8888): Dropping rendered frame that was not acquired in time. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. E/FrameEvents( 8888): updateAcquireFence: Did not find frame. ```

Flutter Doctor output

Doctor output ```console flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, 3.19.0-0.3.pre, on macOS 14.1.2 23B92 darwin-arm64, locale en-US) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.85.2) [✓] Connected device (4 available) ! Device R9TT1145T4A is not authorized. You might need to check your device for an authorization dialog. ! Error: Browsing on the local area network for Rohan’s iPhone 13. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources ! Doctor found issues in 1 category. ```
huycozy commented 9 months ago

Hi @rohan-mehta

For some websites, page doesn't load. For others, loads but not usable.

Could you share some sites that can't load? Your sample code is not minimal, you can try below code to see if the issue persists or not.

Sample code ```dart // Copyright 2013 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. // ignore_for_file: public_member_api_docs import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(const MaterialApp(home: WebViewExample())); class WebViewExample extends StatefulWidget { const WebViewExample({super.key}); @override State createState() => _WebViewExampleState(); } class _WebViewExampleState extends State { late final WebViewController controller; @override void initState() { super.initState(); // #docregion webview_controller controller = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..setBackgroundColor(const Color(0x00000000)) ..setNavigationDelegate( NavigationDelegate( onProgress: (int progress) { // Update loading bar. }, onPageStarted: (String url) {}, onPageFinished: (String url) {}, onWebResourceError: (WebResourceError error) {}, ), ) ..loadRequest(Uri.parse('https://youtube.com/')); // #enddocregion webview_controller } // #docregion webview_widget @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Flutter Simple Example')), body: WebViewWidget(controller: controller), ); } // #enddocregion webview_widget } ```
rohan-mehta commented 9 months ago

@huycozy apologies, this was actually my mistake. Didn't realized I needed to add setJavaScriptMode(JavaScriptMode.unrestricted). Adding that fixed things. Sorry and thank you!

github-actions[bot] commented 9 months ago

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.