四月
14

load
load

你的业务场景是否适合使用flutter for web? 2022-04-14 21:35:26

本文以flutter 2.10,android studio4.1进行编写，可能未来版本会修复以下问题。

兼容性：

我相信这是所有开发者都会关心的问题，可惜这个兼容性非常糟糕。

在IE下，没有一个版本是兼容的，如果你的业务需要兼容IE，建议放弃。

安卓4兼容性极差，也不是渲染不出来，只是交互性极差，输入框几乎点不动，建议放弃。

支持两种渲染模式，一种是html渲染，另一种则是canvaskit渲染。前者兼容性会更好，后者性能和渲染力会更强，但需要加载更大的包。

如果你的业务要求兼容安卓6以下(不包括安卓6)，那么这个html渲染，你必须适配，因为在安卓6以下不支持wasm，使用canvaskit渲染，会自动转为html渲染

web目录下的index.html使用的不是es5语法，这意味着在安卓6以下会报错，改成es5就行，修改后代码如下：

<!DOCTYPE html>
<html>
<head>
  <base href="$FLUTTER_BASE_HREF">

<meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="test">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

<title>test</title>
  <link rel="manifest" href="manifest.json">
  <script src="fix.js"></script>
</head>
<body>
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.appendChild(scriptTag);
    }

if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl)
          .then(function(reg){
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', function() {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
			  var register = reg.installing;
			  if (!register) register = reg.waiting;
              waitForActivation(register);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });

setTimeout(function(){
          if (!scriptLoaded) {
            console.warn(
              'Failed to load app from service worker. Falling back to plain <script> tag.'
            );
            loadMainDartJs();
          }
        }, 4000);
      });
    } else {
      loadMainDartJs();
    }
  </script>
</body>
</html>

main.dart.js使用了Map对象，在安卓6以下原生不自带，可以自己实现一个出来并引入即可(上面代码可见，引入了fix.js)，这是别人写的代码，我忘了在哪抄回来了。

try {
    Map
} catch(e) {
    Map = function() {
        this.elements = new Array();
        // 获取Map元素个数
        this.size = function() {
            return this.elements.length;
        },
        // 判断Map是否为空
        this.isEmpty = function() {
            return (this.elements.length < 1);
        },
        // 删除Map所有元素
        this.clear = function() {
            this.elements = new Array();
        },
        // 向Map中增加元素（key, value)
        this.put = function(_key, _value) {
            if (this.containsKey(_key) == true) {
                if (this.containsValue(_value)) {
                    if (this.remove(_key) == true) {
                        this.elements.push({
                            key : _key,
                            value : _value
                        });
                    }
                } else {
                    this.elements.push({
                        key : _key,
                        value : _value
                    });
                }
            } else {
                this.elements.push({
                    key : _key,
                    value : _value
                });
            }
        },
        // 向Map中增加元素（key, value)
        this.set = function(_key, _value) {
            if (this.containsKey(_key) == true) {
                if (this.containsValue(_value)) {
                    if (this.remove(_key) == true) {
                        this.elements.push({
                            key : _key,
                            value : _value
                        });
                    }
                } else {
                    this.elements.push({
                        key : _key,
                        value : _value
                    });
                }
            } else {
                this.elements.push({
                    key : _key,
                    value : _value
                });
            }
        },
        // 删除指定key的元素，成功返回true，失败返回false
        this.remove = function(_key) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        this.elements.splice(i, 1);
                        return true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        },

// 删除指定key的元素，成功返回true，失败返回false
        this.delete = function(_key) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        this.elements.splice(i, 1);
                        return true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        },

// 获取指定key的元素值value，失败返回null
        this.get = function(_key) {
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        return this.elements[i].value;
                    }
                }
            } catch (e) {
                return null;
            }
        },

// set指定key的元素值value
        this.setValue = function(_key, _value) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        this.elements[i].value = _value;
                        return true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        },

// 获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
        this.element = function(_index) {
            if (_index < 0 || _index >= this.elements.length) {
                return null;
            }
            return this.elements[_index];
        },

// 判断Map中是否含有指定key的元素
        this.containsKey = function(_key) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        bln = true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        },

// 判断Map中是否含有指定key的元素
        this.has = function(_key) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].key == _key) {
                        bln = true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        },

// 判断Map中是否含有指定value的元素
        this.containsValue = function(_value) {
            var bln = false;
            try {
                for (i = 0; i < this.elements.length; i++) {
                    if (this.elements[i].value == _value) {
                        bln = true;
                    }
                }
            } catch (e) {
                bln = false;
            }
            return bln;
        },

// 获取Map中所有key的数组（array）
        this.keys = function() {
            var arr = new Array();
            for (i = 0; i < this.elements.length; i++) {
                arr.push(this.elements[i].key);
            }
            return arr;
        },

// 获取Map中所有value的数组（array）
        this.values = function() {
            var arr = new Array();
            for (i = 0; i < this.elements.length; i++) {
                arr.push(this.elements[i].value);
            }
            return arr;
        };

/**
        * map遍历数组
        * @param callback [function] 回调函数；
        * @param context [object] 上下文；
        */
        this.forEach = function forEach(callback,context){
            context = context || window;

//IE6-8下自己编写回调函数执行的逻辑
            var newAry = new Array();
            for(var i = 0; i < this.elements.length;i++) {
                if(typeof  callback === 'function') {
                    var val = callback.call(context,this.elements[i].value,this.elements[i].key,this.elements);
                    newAry.push(this.elements[i].value);
                }
            }
            return newAry;
        }

}
}

发布前，搜索main.dart.js的【-apple-system, 】去掉，在ios15下，这东西会导致白屏

如果你的代码使用了ImageFilter.blur，最好移除，在html渲染下，会变成一坨黑块。

如果你使用了webview，小心跨域问题。

编译：

如果你使用的是canvaskit渲染，且业务面向于国内，那么建议切换镜像，否则加载速度会很慢：

flutter build web

--dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.zhimg.com/canvaskit-wasm@0.28.1/bin/

html 渲染：

flutter build web --web-renderer html

使用体验：

和移动端一样，不管是canvaskit还是html，都是在canvas上渲染，与移动端不同的是，页面是一堆canvas。

canvaskit渲染并没有你想象中的优秀，字体加载问题，可能会产生大量的方块，html渲染则没有这个问题。

canvaskit渲染需要额外加载一个canvaskit.wasm，可以理解是一个运行库，大概6M左右。

编译一个hello world出来大概会占用1.2M左右。

个人感觉，flutter做网站，属于下位选择，需要满足3个条件：

1.只需兼容高版本浏览器

2.有app开发需求

3.没有SEO需求

原创文章,转载请注明出处

你的业务场景是否适合使用flutter for web? 2022-04-14 21:35:26

本文以flutter 2.10,android studio4.1进行编写，可能未来版本会修复以下问题。

兼容性：

编译：

使用体验：

警告