如何将Flet与Flask结合部署PWA？连接失败问题求助

问题背景 #

开发了一个PWA，想部署到基于Flet的网站，但不知道如何结合Flet与Flask。尝试了以下代码：

@app.route('/flashcards')
def flashcards():
    def main(page: ft.Page):
        page.title = "title"
        page.add(ft.Text("Test text"))

    ft.app(target=main, view=None, port=5000)

运行后一直显示：

Please wait while the application is being started...

并抛出错误：

Exception: Could not connected to Flet server in 30 seconds

日志中出现大量404请求：

127.0.0.1 - - [26/Jun/2023 18:45:11] "GET /flutter_service_worker.js?v=2289608434 HTTP/1.1" 404 -
127.0.0.1 - - [26/Jun/2023 18:45:12] "GET /ws HTTP/1.1" 404 -
...

解决方案 #

之前的写法错误在于直接在Flask路由里调用ft.app()，这会启动独立的Flet服务器，和Flask服务器端口冲突，且Flet所需的静态资源、WebSocket路由未被Flask正确处理。正确做法是使用Flet官方提供的Flask集成方式：

1. 安装依赖 #

确保已安装flet和flask：

pip install flet flask

2. 正确集成代码 #

from flask import Flask
import flet as ft
from flet.flask import FletApp

app = Flask(__name__)

def main(page: ft.Page):
    page.title = "Flashcards"
    page.add(ft.Text("Test text"))

# 将Flet应用注册到Flask的/flashcards路由
app.add_url_rule(
    "/flashcards",
    view_func=FletApp(main).dispatch_request,
    methods=["GET", "POST"]
)

# 处理Flet静态资源请求
@app.route("/<path:path>")
def serve_flet_static(path):
    try:
        return app.send_static_file(path)
    except:
        return "", 404

if __name__ == "__main__":
    app.run(port=5000, debug=True)

3. 关键说明 #

• 用FletApp把Flet的main函数包装成Flask可处理的视图函数，注册到指定路由，避免启动独立Flet服务器。
• 添加通用静态资源路由，确保Flet需要的文件（如flutter_service_worker.js）能被正确返回。
• Flet依赖WebSocket实现实时通信，部署时需确保服务器支持WebSocket。

4. PWA配置 #

要让Flet应用成为PWA，需在main函数中配置page.pwa：

def main(page: ft.Page):
    page.pwa = ft.PWA(
        name="Flashcards PWA",
        short_name="Flashcards",
        description="我的闪卡PWA应用",
        icon="icons/icon-192.png"
    )
    page.title = "Flashcards"
    page.add(ft.Text("Test text"))

内容的提问来源于stack exchange，提问作者FortCraftCoder