使Angular Web App离线可用

Question

使Angular Web App离线可用

angularjsofflineindexeddbservice-workerlocalforage

3

我正在研究如何使一个Angular/C#应用离线可用的细节问题。

我的想法是使用upup.js通过service worker将Angular SPA的业务逻辑获得离线可用性。我会使用angular-localForage来存储离线应用所需的数据，它使用IndexedDB并在需要时回退到WebSQL和localStorage。

问题是，我还要使文件和图片离线可用，而不要求用户访问使用它们的页面，我担心超过最大配额的限制。我可以使用upup.js将它们作为资产添加到本地存储中，或者将它们作为blob与angular-localForage一起存储。如果我没有理解错的话，IndexedDB现在应该是无限制的？但我找不到服务工作者的最大配额，因为upup.js方案会使用它。AppCache已被废弃，所以我不会使用它...也许我理解错了什么，或者甚至有另一个更好的解决方案？总之，问题是：

TL;DR：对于AngularJS离线应用，更好的文件存储方式是什么：angular-localForage（IndexedDB等）还是Service Worker（upup.js），每种解决方案的最大配额是多少？或者有更好的解决方案吗？

- bergben

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Linh Pham · Accepted Answer

在我看来，Service Worker（SW）比传统的本地存储更好。此外，SW还可以使用indexedDB。

对于实现，它非常依赖于应用程序的结构，前端技术与你的angular应用程序一起使用了哪些技术，使用SW的主要目标是什么...

1. 传统的JS加载，您很可能会将所有JS文件合并为一个...例如`app.js`包含所有内容。

而且您也不关心Push Notification或SW提供的任何其他酷功能。

=> 对于这种情况，似乎upup.js最适合您。

注意:请注意，upup.js尝试自行注册SW，因此它可能会阻止或复杂化您扩展SW功能的工作。

2. 高级AMD用户，其中几乎所有JS都被切成小块...例如`fooCtrl.js`，`barCtrl.js`等。

当然，您不希望配置100多个JS文件，而且您还将有许多HTML模板需要加载。

=> 在这种情况下，我建议您使用sw-toolbox。这是由Google制作的非常强大且轻量级的工具。最初，如果您还不熟悉SW概念，则设置它以适用于您的站点可能会有些麻烦（但如果您是高级JS开发人员，则不会超过一天）

配置完成后，所有内容都变得非常简单。例如，这就是我如何缓存我的网站中的所有静态内容。

self.toolbox.router.get(/(.js|.css|.png|.jpg|.json|.html)/, self.toolbox.fastest);

3. 你不关心前端使用的技术，只对SW感兴趣。

=> 只需要使用sw-toolbox，它可以帮助你快速配置基础功能。如果你想要扩展SW的使用，可以根据自己的意愿进行扩展。

使Angular Web App离线可用

1. 传统的JS加载，您很可能会将所有JS文件合并为一个...例如app.js包含所有内容。

2. 高级AMD用户，其中几乎所有JS都被切成小块...例如fooCtrl.js，barCtrl.js等。

3. 你不关心前端使用的技术，只对SW感兴趣。

1. 传统的JS加载，您很可能会将所有JS文件合并为一个...例如`app.js`包含所有内容。

2. 高级AMD用户，其中几乎所有JS都被切成小块...例如`fooCtrl.js`，`barCtrl.js`等。