FlowUs 使用攻略：如何快速制作 Web 应用（PWA）

Posted 2023-04-28

参考技术A 最近在寻找 Notion 的替代品过程中，我发现了 FlowUs.虽然是后起之秀，但不是唯 Notion 亦步亦趋。

FLowUs 有两个很重要的特性打动了我。

FlowUs 虽香，但是目前缺少桌面客户端。作为在线文档，是否有客户端对于我而言并不太重要。然而，为了更好地聚焦当前工作区页面，我并不想看见书签、插件或者其他标签页等分散注意力的元素。为此，我便想为 FLowUs 制作一个 Web 应用（PWA）满足我的需求。

在正式介绍操作步骤之前，简单介绍一些什么是 Web 应用（PWA）. PWA 这是由谷歌提出的 Web 应用概念，全称是 Progressive Web App｜渐进式网页应用，可以为用户提供可靠、快速、类似 Native 应用的服务方案，具有可被发现、易安装、渐进式、可重用等优点。

以下我以 Chrome 浏览器为例，展示生成 Web 应用（PWA）的操作过程

1.使用 Chrome 浏览器或者 Edge 浏览器打开 FlowUs 官网

2.1 选择右上角设置，如果显示“在 FlowUs 中打开”，那么点击即可生成 Web 应用。如果没有这个显示，请按照下列流程进行操作：

2.2 选择右上角的 设置 → 更多工具 → 创建快捷方式

3.随后在弹出的对话框中，将“在窗口中打开”进行勾选。随后，基于 Chrome 浏览器技术的 Web 应用（PWA）便会保存至你的应用程序文件夹，你也可以从应用仪表盘看见 FlowUs 的图标。

4.1 点击 FlowUs 的图标，你便可以在独立的窗口中打开 FlowUs.

4.2 建议使用快捷键 Command + Shift + F, 便可以实现全屏效果。如图。

5.现在尽管可以使用，但是图标不太好看。为了和 Mac 应用图标保持一致，我打算调整 FlowUs 的图标。

5.1 使用工具，生成 Mac 图标专有的 ICNS 格式。解决办法，使用专门的工具，比如 Image2Icon，或者在搜索引擎中使用关键词 “PNG to ICNS” 寻找图片格式在线转换工具。

5.2 打开 Chrome 应用 程序文件夹，找到 FlowUs。使用快捷键 Command + I 打开应用简介，然后直接将 ICNS 图标拖到简介左上角的图标处，便实现了图标更换。

最终效果如图。

如何使用webify快速构建Nuxt应用

Webify是云开发团队推出的一款一站式托管服务产品，这是一个专为 Web 开发者打造的云上开发、部署平台，帮助开发者快速开发、预览、部署自己的 Web 应用，还支持从Github等第三方代码托管平台导入应用，为前端开发者提供极佳的服务体验。

应用场景

静态网站： Web 应用托管不仅支持托管静态网站的各种资源，还对开源社区内流行的开源框架进行了适配。

单页面应用： Web 应用托管提供自定义路由能力，支持 SPA 类型的配置，免除配置服务端的烦恼。

服务端渲染（SSR）应用： Web 应用托管对诸多开源 SSR 框架进行了适配。

后台 Web 服务： Web 应用托管提供云托管、云函数两种形式的计算能力，以满足多种类型的后台 Web 服务的需求。

模版创建

地址：https://cloud.tencent.com/product/webify

首先进入Web应用托管平台，点击「新建应用」，选择从模版创建，选择Nuxt.js

选择Git平台，并填写好仓库名称后，单击「下一步」

填写应用名称，选择框架预设(亦可自己自定义填写)，单击「部署应用」

可以看到应用正在构建与部署中

首次创建应用，会下发CND配置，需要3-5分钟才能生效

单击应用中的链接，可以发现我们的应用可以访问啦！

开发应用

进入到我们的GitHub仓库后，可以发现webify在创建应用的时候，已经自动为我们创建了代码仓库

git clone <romote-URL> //克隆仓库到本地
cd <workplace-dir> //进入项目目录
npm i //安装相关依赖

把项目Clone到本地后，即可进行开发，在修改完后，提交至远程 Git 仓库，将会触发Webify 的自动构建及部署。

git commit -m "change index.vue"
git push

可以见到我们的修改生效啦。

注意事项

有时候在提交代码并构建完成后，并未能见到页面有变化，是因为CDN生效需要一些时间，稍等一会即可更新应用页面。

详见一键部署文档：https://webify.cloudbase.net/docs/guides/deploy-button

Webify官方网站：https://webify.cloudbase.net/