使Angular Web App可脱机使用

时间:2016-05-12 15:58:03

标签: angularjs offline indexeddb service-worker localforage

我正在努力寻找一些解决方案来让离线的Angular / C#应用程序可用。
我的想法是使用upup.js获取Angular中SPA的业务逻辑可脱机使用。 upup.js使用服务工作者这样做。我将使用angular-localForage存储离线应用程序所需的数据,该angular-localForage使用IndexedDB并返回到WebSQL和localStorage以防万一。
问题是,我必须离线使文件和图像可用,而不需要用户访问他们正在使用的页面,我担心最大配额。我可以使用upup.js存储它们并将这些文件添加为资源,或者将angular-localForage存储为blob。如果我被正确告知,IndexedDB现在应该是无限的?我找不到服务工作者的最大配额,因为upup.js解决方案会使用。 AppCache已被弃用,所以我不会使用它......或者我可能理解完全错误的东西,或者甚至还有另一个更好的解决方案?无论如何,问题是:

TL; DR:为AngularJS离线应用程序存储文件的更好方法是什么:upup.js(IndexedDB等)或服务工作者({{3}})以及最大值是多少每个解决方案的配额?或者是否有更好的解决方案?

1 个答案:

答案 0 :(得分:2)

在我看来,服务工作者(SW)比传统的本地存储更好。加上SW也可以使用indexedDB。

对于实施,它非常依赖。你的应用程序结构,前端技术与你的角度应用程序的关系,你使用SW的主要目标是什么?

1。传统的JS加载,您很可能将所有JS文件合并在一起......就像app.js包含所有内容一样。

而且你也不关心推送通知,也不关心SW提供的任何其他很酷的功能。

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

注意:请注意upup.js尝试自行注册SW,因此可能会阻止或加强您扩展SW功能的工作。

2。高级AMD用户,几乎所有的JS都切成小块......比如fooCtrl.jsbarCtrl.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的使用,你可以按照自己的意愿扩展它。