将 Webview 添加到主屏幕

Posted 2023-02-23

【中文标题】将 Webview 添加到主屏幕

【英文标题】：Add Webview to HomeScreen

【发布时间】：2021-10-05 12:41:48

【问题描述】：

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

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

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

【参考方案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

【讨论】：

这正是我所期待的。我会试一试并恢复。谢谢@Stan。

没问题，如果您的尝试成功，请告诉我。否则我会为你编写一个例子

@Stan 它是否显示为您的解决方案的弹出窗口，还是您仍然需要导航到您的 ios 浏览器首选项？

我不确定。通常浏览器会处理对特定函数的调用。例如，调用 alert() 函数时显示的弹出窗口在每个浏览器中看起来确实有些不同。 webview 基本上是一个虚拟浏览器。像所有浏览器一样，它解析 HTML/CSS/JS。所以它启动添加到主页功能的方式取决于flutter_inappwebview背后的团队如何实现它。

【参考方案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);
                        ,
                      ),

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

【讨论】：

我知道如何在 webview 中加载 url。我特意问How can I add the option to 'Add to Home screen' functionality?