google-chrome-extension - 渐进式网络应用程序(PWA)与电子与浏览器扩展

标签 google-chrome-extension firefox-addon progressive-web-apps pwa

这个问题的背景是我一直在研究我称之为工具的东西,用户可以在其中构建他们以后可以运行的模块。它最初是一个小型网页,并在去年发展成为更类似于桌面应用程序的东西。但是,此时,仍然只是一组 html、css 和 js 文件。

我考虑使用像 electron 之类的东西将其打包为可安装的桌面应用程序,但我不喜欢这种方法,并认为最好坚持使用类似渐进式 Web 应用程序的东西,因为一切都是离线完成的。

因为我想访问仅对 Web 扩展可用的 API,所以我在 MDN 网络文档上阅读了一些关于它们的内容,这让我对 PWA 和使用扩展页面来运行自己的页面/程序,而不是改变其他网页在浏览器中的查看和使用方式,等等?

如果一个人希望他们的应用程序可以离线工作并像桌面应用程序一样运行,那么将其作为浏览器扩展有什么缺点?我发现了更多关于 PWA 的信息而不是浏览器扩展,给人的印象是不应该以这种方式使用扩展。

似乎好处包括对更多 API 的访问,它使用自己的图标安装到浏览器中,并且可以更改扩展页面的窗口,使其看起来不像在浏览器中运行。

我是 stackoverflow 的新手,并注意到问题有时会被关闭,因为它们被视为有争议或寻求意见而不是事实。那么,更具体地说,您能否帮助我了解每种方法的优缺点,和/或在选择方法时应考虑的决策点?谢谢你。

回复/评论

感谢您花时间回答我的问题。将问题扩展到包括电子是我想避免的事情,并在我的问题中提到它只是为了说明我已经对其进行了广泛的审查并且不想再开始讨论它。我的问题只是关于 PWA 和浏览器扩展。

这个问题也与我的申请细节没有太大关系。它已经可以作为 PWA 存在。问题是如果一个应用程序已经可以作为 PWA 存在,那么将其作为浏览器扩展或不这样做的原因是什么?访问比 PWA 可用的 API 更多的 API 并安装到浏览器中给它一个“家”似乎使扩展成为一个比 PWA 更好的环境,因为没有更好的术语。

MDN web 文档上关于浏览器扩展的描述包括独立游戏,但似乎鼓励集成到浏览体验中的游戏——不管是什么。我不是在构建游戏,而是想知道作为独立工具的扩展会出现什么问题。

一位评论者似乎认为虽然可以这样做,但不应该这样做,因为扩展只是为了增强浏览体验。这可能是正确的看法。但是,另一方面,我有点喜欢在浏览器中添加一个图标的想法,该图标可以在没有浏览器菜单的窗口中打开我的应用程序(例如全屏运行网站),并允许我访问下载 API。这将为我的应用程序的用户提供更好的体验。

但可能还有其他原因不这样做,除了这不是扩展的目的,也不是历史上如何使用它们。会不会违反规则,让自己在以后失败,等等?或者,它只是为现有功能寻找另一种用途。

如果听起来那样的话,我并不是想变得粗鲁,而是想更好地澄清我的问题。谢谢你。

最佳答案

浏览器扩展 - 这些本质上用于扩展和增强用户的浏览体验。想想广告拦截器。它本身没有用。但有助于在您访问其他网站时阻止添加。用于截取屏幕截图的屏幕截图扩展。一个深色主题扩展,可在您访问的任何页面中翻转颜色。

PWA - PWA 应用程序将取代 chrome 应用程序。 PWA 可以安装到所有主要桌面操作系统和移动操作系统的桌面上。它可以离线工作。它在硬件访问方面可以做什么取决于用户的浏览器版本。同样可以是checked here . Web 应用程序的所有限制仍然存在。

电子 - 它是一个带有原生层(有点!)的网络应用程序。这也可以离线工作。事实上,它首先是离线的,因为所有 HTML/CSS/JS 组件都包含在 Electron 中,它还可以访问 API 并完成 PWA 可以在功能上完成的所有工作。 Electron 与 PWA 的主要区别在于其构建、分发和部署的方式。 Atom 编辑器、Visual Code 编辑器、Slack 是一些使用 HTML/CSS/JS 构建并使用 Electron 打包的著名工具。

用户机器上的 PWA 功能由用户浏览器版本决定,而 Electron 应用程序将有自己的运行时打包。所以不依赖于用户机器。这可能是您在决定选择哪一个时要考虑的关键问题。

您需要更具体地说明您要在应用程序中实现/执行的操作。您所提到的只是“一种工具,用户可以在其中构建以后可以运行的模块”。这根本没有任何见识。

关于google-chrome-extension - 渐进式网络应用程序(PWA)与电子与浏览器扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50705226/

相关文章:

javascript - 如何否定 chrome.storage.local 中的变量

javascript - Firefox SDK pagemod无法与xml文档一起使用

firefox - 如何在 Firefox 下获取当前 SSL 连接使用过的 key ?

firefox-addon - Firefox 扩展按什么顺序初始化?

google-chrome - 简单地替换渐进式 Web 应用程序的图标会导致 list 中出现错误

create-react-app - 如何在 Create-React-App 2 中更改 PWA 工作箱缓存策略

javascript - 读取chrome的ctrl+p数据

javascript - 将 chrome.tabcapture.capture 转换为音频文件?

javascript - 在我的 Chrome 扩展程序的弹出窗口中获取 "ERR_FILE_NOT_FOUND"

javascript - IOS PWA默认在webview打开外部链接