📝 docs: Update PWA & update pnpm in CONTRIBUTING (#2148)

* 📝 docs: Update PWA & update `pnpm` in CONTRIBUTING

* 📝 docs: Update image & callout

CONTRIBUTING.md

@@ -43,7 +43,7 @@ Choose a meaningful branch name related to your work. It makes collaboration eas
 🧙‍♀️ Time to work your magic! Write your code, fix bugs, or add new features. Be sure to follow our project's coding style. You can check if your code adheres to our style using:
 
 ```bash
-yarn lint
+pnpm lint
 ```
 
 This adds a bit of enchantment to your coding experience! ✨

docs/usage/features/pwa.mdx

@@ -25,8 +25,15 @@ We understand the importance of providing a seamless experience for users in tod
 
 If you are unfamiliar with the installation process of PWA, you can follow the steps below to add LobeChat as a desktop app (also applicable to mobile devices):
 
+## Running on Chrome / Edge
+
+<Callout type={'important'}>
+  On macOS, when using a Chrome-installed PWA, it is required that Chrome be open, otherwise Chrome will automatically open and then launch the PWA app.
+</Callout>
+
 <Steps>
-  ### Run Chrome or Edge browser on your computer
+
+### Run Chrome or Edge browser on your computer
 
 ### Visit the LobeChat webpage
 
@@ -35,3 +42,32 @@ If you are unfamiliar with the installation process of PWA, you can follow the s
 ### Follow the on-screen instructions to complete the PWA installation
 
 </Steps>
+
+## Running on Safari
+
+Safari PWA requires macOS Ventura or later. The PWA installed by Safari does not require Safari to be open; you can directly open the PWA app.
+
+<Steps>
+
+### Run Safari browser on your computer
+
+### Visit the LobeChat webpage
+
+### In the top right corner of the address bar, click the <kbd>Share</kbd> icon
+
+### Click <kbd>Add to Dock</kbd>
+
+### Follow the on-screen instructions to complete the PWA installation
+
+</Steps>
+
+<Callout type={'tip'}>
+  The default installed LobeChat PWA icon has a black background, you can use <kbd>cmd</kbd> + <kbd>i</kbd> to paste the following image to replace it with a white background.
+</Callout>
+
+<Image
+  alt={'PWA White Icon'}
+  borderless
+  cover
+  src={'https://github.com/lobehub/lobe-chat/assets/36695271/16ce82cb-49be-4d4d-ac86-4403a1536917'}
+/>

docs/usage/features/pwa.zh-CN.mdx

@@ -25,8 +25,15 @@ tags:
 
 若您未熟悉 PWA 的安装过程，您可以按照以下步骤将 LobeChat 添加为您的桌面应用（也适用于移动设备）：
 
+## Chrome / Edge 浏览器上运行
+
+<Callout type={'important'}>
+  macOS 下，使用 Chrome 安装的 PWA 时，必须要求 Chrome 是打开状态，否则会自动打开 Chrome 再打开 PWA 应用。
+</Callout>
+
 <Steps>
-  ### 在电脑上运行 Chrome 或 Edge 浏览器
+
+### 在电脑上运行 Chrome 或 Edge 浏览器
 
 ### 访问 LobeChat 网页
 
@@ -35,3 +42,32 @@ tags:
 ### 根据屏幕上的指示完成 PWA 的安装
 
 </Steps>
+
+## Safari 浏览器上运行
+
+Safari PWA 需要 macOS Ventura 或更高版本。Safari 安装的 PWA 并不要求 Safari 是打开状态，可以直接打开 PWA 应用。
+
+<Steps>
+
+### 在电脑上运行 Safari 浏览器
+
+### 访问 LobeChat 网页
+
+### 在地址栏的右上角，单击 <kbd>分享</kbd> 图标
+
+### 点选 <kbd>添加到程序坞</kbd>
+
+### 根据屏幕上的指示完成 PWA 的安装
+
+</Steps>
+
+<Callout type={'tip'}>
+  默认安装的 LobeChat PWA 图标是黑色背景的，您可以在自行使用 <kbd>cmd</kbd> + <kbd>i</kbd> 粘贴如下图片替换为白色背景的。
+</Callout>
+
+<Image
+  alt={'PWA White Icon'}
+  borderless
+  cover
+  src={'https://github.com/lobehub/lobe-chat/assets/36695271/16ce82cb-49be-4d4d-ac86-4403a1536917'}
+/>