💄 style: support multi-window for PWA

[BrandonStudio]

Support multi-window on desktop devices

💻 变更类型 | Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 👷 build
• ⚡️ perf
• 📝 docs
• 🔨 chore

🔀 变更说明 | Description of Change

Support multi-window for PWA on desktop devices.

📝 补充信息 | Additional Information

closes #4191 #4206

[vercel]

@BrandonStudio is attempting to deploy a commit to the LobeChat Community Team on Vercel.

A member of the Team first needs to authorize it.

[lobehubbot]

👍 @BrandonStudio

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
如果您遇到任何问题，请随时与我们联系。

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.26%. Comparing base (6bb6ea6) to head (b5204d9).
Report is 25 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #4334    +/-   ##
========================================
  Coverage   92.26%   92.26%            
========================================
  Files         489      489            
  Lines       35057    35062     +5     
  Branches     2133     2282   +149     
========================================
+ Hits        32346    32351     +5     
  Misses       2711     2711            

Flag	Coverage Δ
app	92.26% <ø> (+<0.01%)	⬆️
server	97.37% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[arvinxx]

问了下 Claude：

---

这个配置是 PWA (Progressive Web App) 中的 Web App Manifest 文件中的一个属性，用于控制 PWA 应用的启动行为。具体来说，launch_handler 属性定义了当用户尝试打开已经安装的 PWA 时，浏览器应该如何处理这个请求。

让我们详细解释一下这个配置：

launch_handler: {
  client_mode: ['navigate-existing', 'auto']
}

1. launch_handler: 这是主属性，用于定义启动处理行为。

2. client_mode: 这个子属性指定了当 PWA 被启动时应该采取的具体行为。它是一个数组，包含了优先级排序的处理模式。

3. 数组中的值：

   • 'navigate-existing': 如果 PWA 已经有一个打开的窗口或标签页，浏览器会尝试导航到那个已存在的实例，而不是创建一个新的。
   • 'auto': 如果无法使用 navigate-existing 模式（比如没有已打开的实例），浏览器将自动决定最佳的启动方式，可能是创建一个新的 PWA 实例。

这个配置的主要目的是：

1. 提高用户体验：避免不必要地打开多个相同的 PWA 实例。
2. 资源优化：通过重用已打开的实例，可以节省系统资源。
3. 状态保持：如果用户之前在 PWA 中有未完成的操作，可以直接回到那个状态。

需要注意的是，launch_handler 是一个相对较新的特性，可能并不是所有的浏览器都完全支持。在使用时，应该考虑到兼容性问题，并提供适当的降级策略。

在实际应用中，这个特性对于那些用户可能频繁打开关闭的 PWA 特别有用，比如社交媒体应用、邮件客户端或者文档编辑器等。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Asked Claude:

---

This configuration is a property in the Web App Manifest file in PWA (Progressive Web App) and is used to control the startup behavior of the PWA application. Specifically, the launch_handler attribute defines how the browser should handle the request when a user attempts to open an installed PWA.

Let's explain this configuration in detail:

launch_handler: {
  client_mode: ['navigate-existing', 'auto']
}

1. launch_handler: This is the main attribute used to define launch handling behavior.

2. client_mode: This sub-property specifies the specific behavior that should be taken when the PWA is launched. It is an array containing prioritized processing modes.

3. Values ​​in the array:

   • 'navigate-existing': If the PWA already has an open window or tab, the browser will try to navigate to that existing instance instead of creating a new one.
   • 'auto': If navigate-existing mode is not available (e.g. there is no instance opened), the browser will automatically decide the best way to launch it, possibly by creating a new PWA instance.

The main purpose of this configuration is:

1. Improve user experience: Avoid opening multiple identical PWA instances unnecessarily.
2. Resource optimization: System resources can be saved by reusing open instances.
3. State retention: If the user has unfinished operations in PWA before, they can directly return to that state.

It should be noted that launch_handler is a relatively new feature and may not be fully supported by all browsers. When using, compatibility issues should be taken into consideration and an appropriate downgrade strategy should be provided.

In practical applications, this feature is particularly useful for PWAs that users may frequently open and close, such as social media applications, email clients, or document editors.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lobe-chat-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 7:08am

[BrandonStudio]

I think remove launch_handler is equivalence to set as auto, which requests new window on desktop devices and navigates to existed window on mobile devices

refs: https://developer.mozilla.org/en-US/docs/Web/Manifest/launch_handler

[arvinxx]

@BrandonStudio 我试了下怎么没区别额…

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@BrandonStudio I tried it but there is no difference...

[BrandonStudio]

@BrandonStudio 我试了下怎么没区别额…

应该有区别啊，在Windows上，默认的安装pwa之后，任务栏按鼠标中键只会刷新原有窗口，修改之后的安装pwa按鼠标中键会出一个新窗口

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@BrandonStudio I tried it but there is no difference...

There should be a difference. On Windows, after the default installation of pwa, pressing the middle mouse button on the taskbar will only refresh the original window. After the modified installation of pwa, pressing the middle mouse button will open a new window.

[arvinxx]

mac 上没区别…

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

No difference on mac...

[arvinxx]

LGTM, Thanks!

[lobehubbot]

❤️ Great PR @BrandonStudio ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.
项目的成长离不开用户反馈和贡献，感谢您的贡献! 如果您对 LobeHub 开发者社区感兴趣，请加入我们的 discord，然后私信 @arvinxx 或 @canisminor1990。他们会邀请您加入我们的私密开发者频道。我们将会讨论关于 Lobe Chat 的开发，分享和讨论全球范围内的 AI 消息。

[lobehubbot]

🎉 This PR is included in version 1.22.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[BrandonStudio]

那我觉得是mac的设计，你可以试试别的pwa是不是也不能打开多窗口，比如claude.ai，这个Windows上也是可以的

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Then I think it’s the design of Mac. You can try to see if other pwa can’t open multiple windows, such as claude.ai, which can also be used on Windows.