angularjs - 使 Angular Web App 可离线使用

标签 angularjs offline indexeddb service-worker localforage

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

TL;DR:为 AngularJS 离线应用程序存储文件的更好方法是什么:angular-localForage (IndexedDB 等)或 Service Worker(upup.js)以及每个解决方案的最大配额是多少?或者有更好的解决方案吗?

最佳答案

在我看来,Service Worker (SW) 优于传统的本地存储。 Plus SW也可以使用indexedDB。

对于实现来说,是非常依赖的。您的应用程序结构如何,您的 Angular 应用程序使用了哪些前端技术,您使用 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的用途,你可以按照自己的意愿进行扩展。

关于angularjs - 使 Angular Web App 可离线使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37191991/

相关文章:

node.js - NoSql 与远程服务器离线同步

javascript - javascript-处理 'UnknownError'

google-chrome - 我或我的应用如何知道 Chrome 正在丢弃索引的数据库项目?

css - 为什么动画不适用于最大高度?

javascript - 如何从 Controller 中访问 app.js 中的 .state() 以使用 ROUTER 中的项目

javascript - 使用 AngularJS 在 Apache Zeppelin 中绘制多条线(折线图)

javascript - Angularjs ng-repeat 跨多个 trs

python - Service Worker 让我的网络速度变慢! 、如何使用workbox为Django work添加离线功能

reactjs - 更新具有多个定义的查询的中继存储

javascript - IndexedDb 上的 WebSQL 语法