☰

桌面上的 Firefox 独立网络应用程序，类似于 Chrome 的“添加到桌面”

tag-icon • tag-icon firefox web-application
桌面上的 Firefox 独立网络应用程序，类似于 Chrome 的“添加到桌面”

如何将单页 Web 应用程序制作成 Firefox 上的独立桌面应用程序，类似于 Chrome 的“添加到桌面...”选项？平台是 Linux。

答案1

我经常手动操作，你可能会喜欢这种方式，因为你运行的是 Linux。除了 Firefox 之外不需要其他工具 :)

  1. 运行firefox -p。这将启动 Firefox 配置文件编辑器。为要使用的 Web 应用程序创建一个新的配置文件，并相应地命名。将配置文件文件夹位置保留为默认位置，或选择您想要的任何位置。
  2. 启动新创建的配置文件。确保取消选中“使用所选配置文件而不在启动时询问”，否则它将被设置为默认的 Firefox 配置文件，而您并不需要它。
  3. 在新建的配置文件中根据需要设置任何 Firefox 首选项（Cookie / 历史记录 / 搜索引擎 / 隐私注意事项）。确保将要使用的 Web 应用程序设置为起始页，并让 Firefox 在启动时加载该起始页。
  4. 您现在可以关闭带有新创建的配置文件的 Firefox 窗口。
  5. 要启动新创建的独立 Web 应用程序，请使用以下 Firefox 命令行参数：
    • -P <profile name>在启动时启动给定的配置文件名称，而不是默认名称。您需要在此处输入新创建的配置文件的名称。
    • --no-remote使 Firefox 忽略远程命令。这意味着，您可以在另一个（您的默认）Firefox 实例旁边运行此 Firefox 实例，并且新命令（如单击外部应用程序中的链接）将不会发送到新的 Firefox 实例，而是发送到默认实例。

例如，要为 WhatsApp Web 创建独立桌面应用程序，请执行以下操作：

  1. 创建新的个人资料WhatsApp-Web
  2. 启动配置文件，自定义首选项。将起始页设置为web.whatsapp.com
  3. 运行firefox --no-remote -P WhatsApp-Web以启动新的配置文件。

这样，您可以在默认实例旁边运行第二个 Firefox 实例，而不会干扰默认实例的行为。Cookie 和其他数据不会在两者之间共享，从而为您提供额外的隐私。为了方便启动，如果您的操作系统/桌面环境支持此功能，您甚至可以为这个新的 Firefox 实例添加启动文件。在 Linux 中，您可能需要创建一个.desktop文件，如下所示：

  1. 将 /usr/share/applications/firefox.desktop 复制到 /usr/share/applications/firefox-yourwebappname.desktop
  2. 自定义新 .desktop 文件中的名称、执行和图标字段（例如，为 Web 应用程序设置自定义图标、设置一些合适的名称，并将自定义 Firefox 命令行放在执行行中）。当然，您也可以自定义其他参数
  3. 将 .desktop 文件添加到您的任务栏或桌面（您的任务菜单应该会自动检测到它）。

答案2

为了完全独立离线使用，您必须将网站内容保存在本地。
创建一个文件夹，打开终端（在该目录中）并运行：

wget -e robots=off -r -np --page-requisites --convert-links --wait=".2" "https://www.example.com"

您需要 JavaScript 库。安装nodejs&npm即可开始。

sudo apt-get install nodejs npm

网站的 CDN 通常提供库。如果任何 .js 库无法运行或缺失，请npm install -g尽可能使用安装。否则，请从开发人员处下载。我不得不使用 jQuery。

更新2：
五台服务器（Live Server 的维护分支）用 TypeScript 重写。最新的依赖项。PHP 和服务器端渲染内容。（如Express.js）使用以下命令安装：npm -g i five-server

如果您已经有“Live Server”，要切换，请运行：

npm -g rm live-server && npm -g i five-server

（如果您不需要五服务器的功能，使用实时服务器仍然可以。）

wget完成后，只需five-server --port=5000从包含的文件夹运行即可index.html。观察终端窗口中的得到请求。任何缺失的中间文件都将显示404。

实时服务器控制台输出示例

wget只需使用检索文件-B即可设置基本 URL 和路径。

wget -B 'https://jsoneditoronline.org' '/favicon.ico'

如果您必须检索相当多的中间文件： 控制台选择 创建一个文件404.txt并将类似的控制台输出复制到其中。然后，从同一目录运行以下命令：

cat 404.txt | sed 's/[^ ]* //' | sed 's/\s.*$//' | awk '{if (++dup[$0] == 1) print $0;}' > list.txt

现在您的list.txt已准备好wget。使用 下载时--input-file请确保使用-x。您可以覆盖目录结构，而不必单独移动它们。

wget -x -B 'https://jsoneditoronline.org' --input-file=list.txt

如果您需要 PHP/SQL 功能，请跳过“live-server”并从存储库安装它们。您不必设置 Apache，PHP 已包含服务器。

sudo apt-get install php community-mysql php-mysqlnd

从同一目录运行：php -S localhost:5000
然后打开浏览器并访问：http://localhost:5000

更新：
来自的评论格罗诺斯塔伊启发了我。亚德是将其隔离到其自己的应用程序窗口的方法。运行live-server --no-browser或仅将其包含在 YAD 中：

live-server --no-browser --port=5000 && yad --window-icon="favicon.png" --title="JSON Example" --geometry="1190x500" --center --uri-handler="$YAD_XID" --browser --html --uri="http://127.0.0.1:5000"

不要显示在任务栏上：--skip-taskbar
如果您想要托盘图标：--notification --image="favicon.png"

相关内容