问题标签 [pwa]

我正在使用 service-worker 缓存一些静态文件，但我也在尝试将我的 json 数据缓存在 indexedDB 中。因此，每当我的应用程序访问 url “www.someurl.com/api/my-items”时，它都会被 service worker 拦截，相反，我的 indexedDB 数据会返回一个自定义响应。

我在这里使用基于承诺的 idb https://github.com/jakearchibald/idb

到目前为止，我想出了以下代码。据我了解，我需要拦截 fetch 事件并返回自定义响应。

我试图了解是否有一种更简洁的方式来编写此代码，而无需专门使用“new Response()”创建响应。我确信有一个我不完全理解的基于承诺的概念。

我按照本教程构建了一个简单的 Angular 6 应用程序并将 Universal 集成到其中：Angular Universal 教程

链接到我创建的 GitHub 存储库：Angular Universal SSR GitHub 存储库

Universal SSR 运行良好，它可以毫无问题地呈现内容（来自 Firebase 实时数据库和 Firestore 的静态和动态内容），但是，在我按照PWA 教程中的官方文档安装 PWA 后，Universal SSR 停止工作而没有任何错误......但 PWA 有效。

谁能告诉我为什么安装 PWA 后 SSR 停止工作？

提前致谢！

我正在使用城市列表服务，在我的主页中使用 HTTP 请求我已经获取列表并显示在自动完成中，所以我想知道通过使用服务工作者如何将该城市列表存储在缓存中并在离线模式下使用

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

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

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

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

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

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

对答案/评论的回应

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

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

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

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

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

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

我们是否需要为浏览器添加以下事件以显示添加到屏幕图标。

我问这个问题是为了消除疑问，因为从 chrome 版本 68+ 下面的注释来自https://developers.google.com/web/fundamentals/app-install-banners/
注意：从 Chrome 68 开始（2018 年 6 月初测试版） , Chrome 不会自动显示添加到主屏幕横幅，相反，您可以通过使用用户手势在 beforeinstallprompt 事件上调用 prompt() 来显示它。有关完整详细信息，请参阅添加到主屏幕行为的更新。

此外，在 Mac OS 上，我无法使用开发人员工具删除/取消注册添加到应用程序的图标。提前致谢。

我试图弄清楚是否可以使用默认系统应用程序从 Progressive Web App 打开文件。

这个想法是 PWA 将存储一些文件以供离线使用（例如 .docx 文件），并且用户无需（重新）下载它们就可以打开它们。

理想的情况是 PWA 能够将文件加载到内存中，使其可供该文件类型的默认系统应用程序访问（例如，用于 .docx 文件的 Word），监视更改（即用户保存编辑），以及然后将其存储回 PWA 存储中。即使是只读解决方案也会很棒。

由于隐含了严重的安全问题，并且由于谷歌搜索没有出现任何内容，我最好的选择是（尚不）支持。但是，我希望可能有一种我不知道的方法来做到这一点，并且不需要用户下载文件的副本。

我正在使用 React JS 开发 PWA

有一个要求，我们需要在第一次将应用添加到主屏幕后显示添加到主屏幕

任何机构都可以建议这是否可能以及如何？

信息：大多数情况下，此应用程序将在 Google Chrome 和 Safari 上运行

当我在 Chrome DevTools 中查看 manifest.js 时，我可以看到徽标和颜色都在那里。但是，当我从我的 android 设备上的主屏幕启动网站时，既没有加载背景或主题颜色，也没有显示我的启动画面。知道为什么吗？

清单.json：

截屏：

编辑

我发现了错误。我正在使用 Chrome DevTools 通过远程设备浏览网站。端口转发到 localhost:3000 与触发初始屏幕的 https 要求不匹配。

现在 pwa 以独立模式启动，颜色和启动画面正确显示。

但是，没有显示初始屏幕徽标，我不知道为什么。图像的路径是正确的，并且图像以正确的文件名和类型存在。

有什么建议么？

角度应用程序中 manifest.json 中的 start_url 应该是什么。

应该是“/”还是“。” 或“/index.html”，我需要为服务人员收听“beforeinstallprompt”事件吗？或任何其他，如果我错过任何东西。提前致谢！

我在用

这会呈现一个选择文件控件。哪个点击打开相机并选择文件。我试图完全避免这个手动选择文件。

这样做的方法是什么？

目前我有一个机制来传递像 ?action=scan 这样的 url 参数。使用 activateRouter 我正在阅读此参数并呈现上述输入控件。我只想启动相机。