将 Webview 添加到主屏幕

Question

我在 webview 中打开一个 web URL。如何将Adding it to the HomeScreen的功能添加到webview？

我正在使用 InAppWebview 来启动 web 视图。使用ChromeSafariBrowser 组件，它提供了Adding to HomeScreen 的默认选项。如何为 webview 构建类似的功能？

对于没有经验的人，我正在研究这个功能。

Answer 1

您可以调用一个 javascript 函数来询问用户是否要将当前网页添加到他的主页。 https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen.

在他们的文档中： https://pub.dev/documentation/flutter_inappwebview/latest/flutter_inappwebview/JavaScriptReplyProxy-class.html

Answer 2

我认为您正在尝试询问如何将 web 视图添加到应用程序的主屏幕。 您没有分享您的主屏幕代码，但我相信可以肯定地说，flutter 中的所有内容都是一个小部件，并且您目前也在使用 InAppWebView 小部件。

他们的documentation 显示了一个示例，其中用户可以输入 url 并且 webview 控制器加载该 url

加载代码：

onSubmitted: (value) {
                    var url = Uri.parse(value);
                    if (url.scheme.isEmpty) {
                      url = Uri.parse("https://www.google.com/search?q=" + value);
                    }
//The below given 2 lines are responsible for loading the url
                    webViewController?.loadUrl(
                        urlRequest: URLRequest(url: url));
                  },

网页视图显示代码：

InAppWebView(
                        key: webViewKey,
                        initialUrlRequest:
                        URLRequest(url: Uri.parse("https://inappwebview.dev/")),
                        initialOptions: options,
                        pullToRefreshController: pullToRefreshController,
                        onWebViewCreated: (controller) {
                          webViewController = controller;
                        },
                        onLoadStart: (controller, url) {
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        androidOnPermissionRequest: (controller, origin, resources) async {
                          return PermissionRequestResponse(
                              resources: resources,
                              action: PermissionRequestResponseAction.GRANT);
                        },
                        shouldOverrideUrlLoading: (controller, navigationAction) async {
                          var uri = navigationAction.request.url!;

                          if (![ "http", "https", "file", "chrome",
                            "data", "javascript", "about"].contains(uri.scheme)) {
                            if (await canLaunch(url)) {
                              // Launch the App
                              await launch(
                                url,
                              );
                              // and cancel the request
                              return NavigationActionPolicy.CANCEL;
                            }
                          }

                          return NavigationActionPolicy.ALLOW;
                        },
                        onLoadStop: (controller, url) async {
                          pullToRefreshController.endRefreshing();
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        onLoadError: (controller, url, code, message) {
                          pullToRefreshController.endRefreshing();
                        },
                        onProgressChanged: (controller, progress) {
                          if (progress == 100) {
                            pullToRefreshController.endRefreshing();
                          }
                          setState(() {
                            this.progress = progress / 100;
                            urlController.text = this.url;
                          });
                        },
                        onUpdateVisitedHistory: (controller, url, androidIsReload) {
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        onConsoleMessage: (controller, consoleMessage) {
                          print(consoleMessage);
                        },
                      ),

建议： 浏览文档。大部分代码不必编辑。