@charset "UTF-8";
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 18px; overflow-x: hidden; color: rgba(51, 51, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 40px; margin-bottom: 20px; color: rgba(0, 127, 255, 1); display: flex; align-items: center }
.markdown-body h1:hover:before, .markdown-body h2:hover:before, .markdown-body h3:hover:before, .markdown-body h4:hover:before, .markdown-body h5:hover:before, .markdown-body h6:hover:before { transition: all 0.4s ease-in-out; transform: rotate(1turn) }
.markdown-body h1 { font-size: 30px; background: linear-gradient(rgba(255, 255, 255, 1) 60%, rgba(198, 227, 255, 1) 0) }
.markdown-body h1:before { content: ""; display: inline-block; width: 32px; height: 32px; margin-right: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC") }
.markdown-body h2 { font-size: 24px; background: linear-gradient(rgba(255, 255, 255, 1) 60%, rgba(204, 227, 251, 1) 0) }
.markdown-body h2:before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC") }
.markdown-body h3 { font-size: 20px }
.markdown-body h3:before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC") }
.markdown-body h4 { font-size: 18px }
.markdown-body h4:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC") }
.markdown-body h5 { font-size: 16px }
.markdown-body h5:before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC") }
.markdown-body h6 { font-size: 14px }
.markdown-body h6:before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC") }
.markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { border-bottom: 2px solid rgba(0, 127, 255, 1); color: rgba(0, 127, 255, 1); padding-right: 10px }
.markdown-body p { letter-spacing: 1px; line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { display: block; max-width: 100%; margin: 10px auto }
.markdown-body hr { border-top: 1px dashed rgba(146, 200, 255, 1); border-right: none; border-bottom: none; border-left: none }
.markdown-body hr:before { content: ""; display: inline-block; position: relative; top: -12px; left: 40px; padding: 0 3px; color: rgba(0, 127, 255, 1); font-size: 18px }
.markdown-body hr:after { content: "按虛線剪開"; position: relative; top: -15px; left: 84%; padding: 0 3px; color: rgba(0, 127, 255, 1); font-size: 12px }
.markdown-body del { color: rgba(255, 68, 68, 1) }
.markdown-body em { color: rgba(0, 127, 255, 1); margin: 0 2px }
.markdown-body strong { color: rgba(0, 127, 255, 1); font-weight: bolder }
.markdown-body code { border-radius: 4px; overflow-x: auto; background-color: rgba(230, 243, 255, 1); color: rgba(0, 127, 255, 1); font-weight: 600; font-size: 16px; padding: 0.065em 0.4em; border: 1px solid rgba(0, 127, 255, 1) }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75; box-shadow: 0 0 8px rgba(110, 110, 110, 0.45); border-radius: 5px; margin: 16px }
.markdown-body pre:before { content: ""; display: block; height: 30px; width: 100%; background: url("data:image/png;base64,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") 10px 10px / 40px no-repeat }
.markdown-body pre>code { font-size: 18px; font-weight: 400; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); border: none }
.markdown-body a { text-decoration: none; color: rgba(0, 127, 255, 1); border-bottom: 1px solid rgba(0, 127, 255, 1) }
.markdown-body a:before { content: "?"; margin-right: 5px; font-size: 22px }
.markdown-body a:after { content: "?"; margin-left: 2px; font-size: 22px; display: none }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1); border-bottom: 1px solid rgba(39, 91, 140, 1) }
.markdown-body a:active:after, .markdown-body a:hover:after { display: inline-block }
.markdown-body table { display: inline-block !important; font-size: 16px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(165, 211, 255, 1) }
.markdown-body thead { background: rgba(198, 227, 255, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(238, 247, 255, 1) }
.markdown-body tbody>tr:nth-child(2n+1) { background-color: rgba(248, 252, 255, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(0, 127, 255, 1); background-color: rgba(238, 247, 255, 1) }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol li::marker,.markdown-body ul li::marker { color: rgba(0, 127, 255, 1) }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { background: rgba(28, 27, 25, 1); color: rgba(252, 232, 195, 1) }
.hljs-emphasis, .hljs-strong { color: rgba(145, 129, 117, 1) }
.hljs-bullet, .hljs-link, .hljs-literal, .hljs-number, .hljs-quote, .hljs-regexp { color: rgba(255, 92, 143, 1) }
.hljs-code, .hljs-selector-class { color: rgba(104, 168, 228, 1) }
.hljs-emphasis { font-style: italic }
.hljs-attribute, .hljs-keyword, .hljs-section, .hljs-selector-tag, .hljs-variable { color: rgba(239, 47, 39, 1) }
.hljs-name, .hljs-title { color: rgba(251, 184, 41, 1) }
.hljs-params, .hljs-type { color: rgba(10, 174, 179, 1) }
.hljs-string { color: rgba(152, 188, 55, 1) }
.hljs-addition, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-id, .hljs-selector-pseudo, .hljs-subst, .hljs-symbol, .hljs-template-tag, .hljs-template-variable { color: rgba(192, 122, 190, 1) }
.hljs-comment, .hljs-deletion, .hljs-meta { color: rgba(145, 129, 117, 1) }

我正在參加「掘金·啟航計劃」

一.引言

隨著移動互聯網的不斷發展，移動端的軟件越來越受到重視。為了滿足用戶不同平臺的需求，開發者需要同時開發iOS和Android兩個平臺的應用，這對開發者來說是一項挑戰。為了提高開發效率，Flutter作為一種跨平臺的技術框架，成為了主流開發工具之一。但是，Flutter開發者面臨的一個難題就是如何保持應用在后臺長時間?；睿疚膶⒔榻BFlutter 3.7以上版本對于移動端軟件跨平臺后臺?；畹募夹g指南。

二.什么是后臺保活

后臺?；钍侵笐贸绦蛟诤笈_運行而不被系統殺死的能力。一些應用需要在后臺進行長時間的運行，例如下載管理、聊天應用、定位等等。如果應用在后臺被系統殺死，用戶將會失去對該應用的操作能力，對用戶的使用體驗造成很大影響。因此，實現后臺?；罘浅Ｖ匾?。

三.Flutter 3.7以上版本的后臺?；罘桨?/h2>

Flutter 3.7以上版本為了解決上述問題，提供了多種方案來保證應用在后臺運行，主要包括Android平臺和iOS平臺。下面我們分別介紹這些方案。

1. Android 平臺的后臺保活方案

Android平臺提供了以下三種后臺保活方案供開發者選擇：

• 資源管理器

Android系統中的資源管理器非常重要，它負責管理應用程序的資源和進程。在Android系統中，資源管理器是管理空閑內存和運行進程的一種機制。如果一個應用程序所需的內存超出了系統可用的內存空間，應用程序將被系統直接殺死。開發者可以通過以下兩種方式防止應用被殺死：a.監聽系統內存變化，并在系統內存過低時釋放應用的內存。b.通過提高應用程序的進程優先級來避免被系統殺死

• WorkManager

WorkManager是Android Jetpack中提供的一種API，它能夠在滿足條件的情況下在后臺運行任務，同時它是一種能夠在設備上能夠保持活動狀態的解決方法。在Flutter中，WorkManager可以用來調度后臺任務，例如下載，上傳，同步等等。WorkManager會自動保存任務的狀態，并在下次應用程序啟動時恢復任務的狀態，同時在應用程序殺死后也可以恢復任務的狀態并繼續執行。

• Flutter Isolate

Flutter Isolate是一種靈活的機制，用于在Flutter應用程序中運行同時。它允許開發者將計算分配給單獨的工作線程，這些工作線程有自己的內存空間和運行時器。通過利用Flutter Isolate，開發者可以避免執行I/O和計算密集型任務時，造成主線程阻塞和應用程序卡頓。

2. iOS 平臺的后臺?；罘桨?/h3>

iOS平臺提供了以下三種后臺?；罘桨腹╅_發者選擇：

• Background Modes

Background Modes是iOS 7以后新增的功能，它讓應用程序在不打斷用戶或在前臺工作的情況下，在后臺繼續運行，例如播放音樂或者進行定位。Background Modes可以取得當前時間、位置、推送信息等，在比如應用程序在后臺運行時，當有新的信息時，應用程序可以發出一聲聲音提示用戶并顯示出信息。

• Background Fetch

Background Fetch是以固定的周期去獲取數據并重載最新數據的功能，可以在應用程序不活躍時進行數據更新。例如，一個新聞應用程序可以在后臺每隔一定時間去獲取最新的新聞內容，然后在應用程序被用戶打開時，能夠立即顯示最新的新聞內容。

• Flutter Isolate

Flutter Isolate也可以用于iOS平臺，與Android平臺相同，利用Flutter Isolate，開發者可以避免執行I/O和計算密集型任務時，造成主線程阻塞和應用程序卡頓。

四. 后臺?；畹膶崿F步驟

除了選擇適合自己的后臺?；罘桨?，還需要按照以下步驟實現后臺保活：

步驟1：編寫保活代碼

根據選擇的后臺?；罘桨妇帉懕；畲a，例如：

在Android平臺上使用WorkManager：

void myBackgroundTask() {

  // Do some work.

}

void enqueuMyBackgroundTask() async {

  await Workmanager().initialize(

      callbackDispatcher

  );

  await Workmanager().registerPeriodicTask(

      "myUniqueName",

      "Sync Data",

      inputData: <String, dynamic>{

        "someKey": "someValue"

      },

      frequency: Duration(minutes: 15),

  );

}

步驟2：注冊保活代碼

在Android平臺上，可以通過在AndroidManifest.xml中注冊你的服務或者廣播，并且通過在WorkManager中注冊你的任務來保持應用程序后臺運行。在iOS平臺上，你可以在Info.plist中注冊Background Fetch、Background Modes等等，具體注冊方式可以參考官方文檔。

步驟3：測試?；钚Ч?/h4>

測試后臺?；畹男Ч?，可以使用一些模擬器或者真實設備測試。

五. 后臺保活的注意事項

在進行后臺保活的過程中，需要注意以下事項：

不同系統的不同表現

不同的操作系統在處理后臺保活時有不同的規則和機制，例如在Android系統中，系統會周期性的掃描后臺程序，找出處理器和內存的占用情況，然后強制結束某些應用程序進程，從而清空空間。但是在iOS系統中規則和機制不同，需要注意針對不同的平臺進行不同的處理。

后臺?；顚κ謾C電量的影響

后臺?；畹倪^程中，需要占用一定的系統資源和電量，因此應該合理運用后臺保活的相關方案，盡量減少對電量的消耗。

六. 完整demo示例

WorkManager方案

如果需要在后臺周期性地執行任務，可以選擇WorkManager方案，在Android中使用WorkManager API進行任務調度，iOS中選擇Background Fetch方案。示例代碼如下：

import 'dart:io';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:workmanager/workmanager.dart';

void main() {

  Workmanager().initialize(

    callbackDispatcher,

    isInDebugMode: false,

  );

  runApp(MyApp());

}

void callbackDispatcher() {

  Workmanager().executeTask((task, inputData) {

    print('Background running: $task');

    return Future.value(true);

  });

}

Future<void> registerPeriodicTask(

    String uniqueName, String taskName, {int seconds = 15}) async {

  await Workmanager().registerPeriodicTask(

      uniqueName,

      taskName,

      frequency: Duration(seconds: seconds),

      constraints: Platform.isAndroid

          ? Constraints(

              networkType: NetworkType.connected,

              requiresBatteryNotLow: false,

              requiresCharging: false,

              requiresDeviceIdle: false,

              requiresStorageNotLow: false,

            )

          : null,

      input: {},

      initialDelay: Duration(seconds: 15),

      existingWorkPolicy: Platform.isAndroid

          ? ExistingWorkPolicy.replace

          : ExistingWorkPolicy.keep,

      isPeriodic: true);

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text('WorkManager Demo'),

        ),

        body: Center(

          child: ElevatedButton(

            child: const Text('Register periodic task'),

            onPressed: () =>

                registerPeriodicTask('uniqueName', 'Task name'),

          ),

        ),

      ),

    );

  }

}

如上述代碼所示，WorkManager提供了registerPeriodicTask方法用于注冊周期性執行任務。在iOS中，不同于Android的WorkManager，使用Background Fetch來實現周期性任務。同時我們需要在info.plist中注冊Background Modes，并配置fetch和Background Modes的相關項。

具體配置方法可以參考蘋果官方文檔：developer.apple.com/documentati…

Background Fetch方案

下面是在Flutter中使用Background Fetch的示例代碼：

import 'dart:async';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter_background_fetch/flutter_background_fetch.dart';

void main() {

  runApp(MyApp());

  FlutterBackgroundFetch.initialize( // required

    onFetch: _onFetch,

  );

}

Future<void> _onFetch(String taskId) async {

  print('Background running: $taskId');

  FlutterBackgroundFetch.finish(taskId);

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text('Background fetch demo'),

        ),

        body: Center(

          child: ElevatedButton(

            child: const Text('Start background fetch'),

            onPressed: () async {

              // Configure BackgroundFetch.

              await FlutterBackgroundFetch.configure(

                fetchInterval: 15,

                minimumFetchInterval: 15,

                stopOnTerminate: false,

                startOnBoot: true,

              );

              // Start background fetch.

              await FlutterBackgroundFetch.start();

            },

          ),

        ),

      ),

    );

  }

}

在iOS中，當應用程序進入后臺模式后，它會周期性的執行任務并在下一個時間段結束后再次喚醒應用程序?？梢酝ㄟ^FlutterBackgroundFetch.configure方法來配置fetchInterval到15秒，以保證后臺任務周期性執行。在startOnBoot設置為true之后，當設備重啟后任務也會被自動觸發執行。

七. 結論

Flutter 3.7以上版本提供了多種后臺?；罘桨?，在Flutter中，不同的后臺保活方案都有各自的優缺點。根據實際業務需求，選擇最適合的方案。開發者可以根據自身應用的需求選擇最適合的方案來在應用程序在后臺保持運行狀態，并提高用戶的使用體驗。在進行后臺?；畹倪^程中需要注意各種平臺的不同規則和機制，并且合理使用后臺?；罘桨敢詼p少對手機電量的影響。