1

我正在开发一个 Angular 7 购物清单应用程序，带有 CLI Schematics (@angular/pwa) 的 PWA。

该应用程序将在手风琴内提供按项目类型分组的购物图标（每个类别大约 10 到 20 个，每个 2KB 到 6KB）。PWA 应用程序将仅由手机使用（仅用于上下文，因为这没有区别）。

由于图标不会改变，我不确定以下方法：

  1. 提供所有图标作为内部资产
  2. 远程存储图像

（我使用 Firebase 作为数据库，因此我正在考虑使用 Firebase 存储）

第一种方法的好处是所有图标都可以立即使用，但会使整个应用程序的大小更大。另一方面，第二种将遵循更多的延迟加载方法，仅下载请求的资产，然后在本地缓存。缺点是下载图标的加载时间较长（至少是第一次或缓存过期时）。

目前，我倾向于使用 PWA 延迟加载策略的解决方案 2，但我很想知道在这种情况下是否有更好的方法。

4

1 回答 1

0

还有第三种方法，因为你只有移动客户端，这意味着你几乎肯定有服务人员。然后，您可以在本地缓存项目，在服务工作人员存储中。这意味着，图标不会在用户第一次访问站点时加载（或者您可以添加一小部分所需的子集），但是当您第一次请求图标时，它会被缓存，以及任何其他项目从现在开始的类别 frmo 将受益于它。

如果不是这样，我最好将它们存储为常规资产，而不是 fireb 项目，然后设置适当的缓存控制。事实上，无论你是否使用 service worker，缓存控件都应该被正确设置。

所以我的 TL:DR; 答案是：

  • [*] 在 CDN 上存储为静态资产，并具有适当的缓存控制
  • [ ] 使用 service worker 让它们更快可用

(*) => 强制

这是一个已解决的问题，可能不值得将头撞到墙上，至少不会太久。使用推荐的方法，无论是否使用服务工作者，都不要将静态资产放入数据库中。

此外，还有一些需要测试的东西，但您可能可以这样做： - 将它们转换为 SVG（压缩得更好） - 将它们作为精灵发送

于 2018-10-25T11:46:35.707 回答