一个不用重加载的WebView

一、背景

• 一个基于WebView的Cocos2d游戏，因为启动加载引擎会有3-5秒的加载时长。为了更好的游戏体验，希望启动后重新进入不用重新加载。

二、webView的方案汇总

序号	描述	方式	方案	缺点
1	传统方法	页面	APage + AWebView + AWebControl	重进重载
2	单例WebControl	页面	APage + AWebView + ShareWebControl	暂未发现
3	单例WebView	页面	APage + ShareWebView	Flutter因无法插入视图直接不适用
4	全局WebView 用法1	弹窗	ShareWebView	页面返回
5	全局WebView 用法2	假页面	AWebPlaceholderPage+ShareWebView	页面返回

重新梳理各方案特性：

	传统方法 页面	单例WebControl 页面	单例WebView 页面	全局WebView 弹窗	全局WebView 假页面
附着物	页面	页面	页面	视图	视图
语言适用性	✅	✅	✅	✅	✅
进出可系统控制	✅	✅	✅	❌	✅
侧滑返回系统控制	✅	✅	❌Flutter因无法插入视图直接不适用	❌	🚗侧滑会先看到白屏
重进可免重加载	❌重进重载	✅	✅	✅	✅

下面我们按WebView的存在形式，对WebView的方案进行各自的详细说明。

三、WebView方案之是单页面

1、传统：APage + AWebView + AControl

✅进出

✅侧滑返回

❌重进入游戏加载重复

2、webView视图”单例”—Flutter无效

🚗：Flutter因无法对视图树进行视图插入直接不适用。

不同地方共用一个webView视图（）

APage.addSubView(shareWebView);
BPage.addSubView(shareWebView);
CPage.addSubView(shareWebView);

区别：全局webView：所有地方都使用同一个地方的webview。

3、webViewControl 单例

// 类似 player 的 control()
webView1.control = shareControl;
APage.addSubView(webView1);

webView2.control = shareControl;
BPage.addSubView(webView2);

webView3.control = shareControl;
CPage.addSubView(webView3)
 
  
build() {
  //return shareWebView(); // ❌
	return webViewWidget(control: shareControl)
}

四、WebView方案之是全局

1、直接弹窗

在Flutter上，以Overlay的方式进行全局WebView的显示时候，底部页面仍会进行相应渲染事项，即仍占用CPU、GPU。

原因：轮播图、gif动画的渲染在弹出弹窗后，并未停止。

🚄优化：显示游戏时候，轮播图停止、gif动画停止（类似隐藏游戏的时候，游戏定时器及渲染关闭）。

2、新页面+弹窗

目的：通过新页面来作为路由页。

2.1、显示方式：先显示全局webView视图，再弹出新页面

若先弹出新页面再显示全局webView视图，页面会有新页面的假白屏问题。所以，应该是先显示再弹出。

2.2、隐藏之返回方式：先关闭新页面，再隐藏全局webView视图

同理若先隐藏全局webView视图再关闭新页面，页面会有新页面的假白屏问题。所以，应该是先关闭再隐藏。

2.3、隐藏之进入新页面：直接进入新页面。

以从全局webView视图进入一个app页面。若进入新页面是先关闭全局webView视图，再进入新页面，则从新页面返回的时候，返回位置会错乱（如果为了不错乱，则你必须自己判断返回到哪）。所以应该直接进入新页面。

End