如何让我的 Android 应用程序用户下载 WebView 以供以后使用 dart|Flutter答案

【问题标题】：How do I enable my Android Application users to download a WebView for later use dart|Flutter如何让我的 Android 应用程序用户下载 WebView 以供以后使用 dart|Flutter
【发布时间】：2020-09-03 00:24:46
【问题描述】：

您好，我正在尝试创建一个阅读应用程序，允许用户从我的在线学习网站保存页面以供离线使用。它使用 webview 小部件来访问网页。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

 class ScholarshipsPage extends StatefulWidget {
  @override
 _ScholarshipsPageState createState() => _ScholarshipsPageState();
 }

 class _ScholarshipsPageState extends State<ScholarshipsPage> {
 Completer<WebViewController> _controller = Completer<WebViewController>();
  @override
  Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(
      title: Text('Scholarship Research Program'),
      backgroundColor: Colors.deepPurple,
      elevation: 0,
      centerTitle: true,
    ),
    body: WebView(
              initialUrl: 'https://mydigitalbackpack.net/scholarshipresearchprogram/',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController controller) {
                _controller.complete(controller);
              },
    )
    );
     }
    }

【问题讨论】：

标签： flutter dart webview

【解决方案1】：

如果您是html页面的所有者，请检查此答案：https://stackoverflow.com/a/59899281/5513788

如果没有，请参阅此处：Flutter - How to download files in WebView? 和此处：https://github.com/flutter/flutter/issues/26373。目前基本上是不可能的。

对于我的应用，我所做的是使用 Java 在 Android 中进行本地设置，效果非常好。

【讨论】：

【解决方案2】：

webview_flutter 插件无法做到这一点，因为缺少这些功能。

相反，您可以使用我的插件flutter_inappwebview，这是一个 Flutter 插件，允许您添加内联 WebView 或打开应用内浏览器窗口，并且有很多事件、方法和选项来控制 WebView。

在您的情况下，您可以使用 InAppWebViewController.android.saveWebArchive 方法将当前 WebView 保存为 Web 存档。目前该方法仅适用于Android（通过WebView#saveWebArchiveAndroid官方API实现）！

如果可能，我会检查如何为 iOS 实现相同的功能。

相反，如果您需要下载文件：为了能够识别可下载文件，您需要设置useOnDownloadStart: true 选项，然后您可以监听onDownloadStart 事件！

另外，例如，在 Android 上，您需要在 AndroidManifest.xml 文件中添加写入权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

然后，您需要使用permission_handler 插件请求许可。相反，为了有效地下载您的文件，您可以使用flutter_downloader 插件。

这是一个使用http://ovh.net/files/（特别是http://ovh.net/files/1Mio.dat作为URL）测试下载的完整示例：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_downloader/flutter_downloader.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterDownloader.initialize(
      debug: true // optional: set false to disable printing logs to console
  );
  await Permission.storage.request();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController webView;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialUrl: "http://ovh.net/files/1Mio.dat",
            initialHeaders: {},
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                debuggingEnabled: true,
                useOnDownloadStart: true
              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {

            },
            onLoadStop: (InAppWebViewController controller, String url) {

            },
            onDownloadStart: (controller, url) async {
              print("onDownloadStart $url");
              final taskId = await FlutterDownloader.enqueue(
                url: url,
                savedDir: (await getExternalStorageDirectory()).path,
                showNotification: true, // show download progress in status bar (for Android)
                openFileFromNotification: true, // click on notification to open downloaded file (for Android)
              );
            },
          ))
        ])),
      ),
    );
  }
}

在这里，如您所见，我也在使用 path_provider 插件来获取我要保存文件的文件夹。

【讨论】：