我们正在开发一个原生的Android应用程序(iOS和Web跟随),用户可以在其中协作创建相册.
当设备无法与服务器连接时,我们希望尽可能无缝地体验.在这个Hoodie博客中提到的东西,但Hoodie现在正在用于Web和iOS,我们现在正在寻找Android.
问题
在客户端维护专辑,朋友,图片(URL /本地,而不是位图)的数据.能够在以后将脱机创建/更新操作同步到服务器,并解决冲突.
目前的研究
习惯
使用Android同步适配器在服务器同步上在Android和MySQL上的SQLite中维护数据.然而,这可能是耗时的并且在启动时存在缺陷.
应该如何处理这个问题？
android offline-mode offline-caching offlineapps android-sqlite
我在缓存存储中存储视频时遇到问题.如果视频尺寸较小,它可以正常工作,但如果它的大小约为100MB,我会收到此错误:
DOMException: Entry was not found.
我使用以下代码:
fetch(videoUrl).then(function(res) {
var responseToCache = res.clone();
caches.open('videos').then(function(cache) {
var request = new Request('https://example.com/video.mp4');
cache.put(request, responseToCache).catch(function(err) {
console.log(err); //this is where the error is thrown
});
});
});
我可以存储多个总大小> = 100 MB的小文件.
我想这是Chrome浏览器的限制,但我在Internet上找不到任何引用.
有没有办法避免这种限制？
编辑:
我可以存储的最大视频大小是64MB.如果大小超过该大小,则会发生错误.
编辑2:
该错误仅在Chrome中出现.Firefox没有这样的限制.我在Firefox中尝试了大小> = 350MB的视频和OK.
要使历史模式与Vue-Router一起使用,您需要在尝试访问不存在的路由时返回主页面的内容.例如,当您访问mypwa.com/route1服务器时检查是否存在资源,route1如果没有,则返回在mypwa.com/(但不重定向)的内容.这很棒并且可以在您上线时使用,但它需要您的服务器进行实际的重新路由.
如果您的PWA要脱机工作,则需要在没有服务器可用的情况下重新路由.
问题是:mypwa.com/当您离线工作时访问.加载后,您可以mypwa.com/route1从应用程序内部导航.但是,如果您尝试直接导航到mypwa.com/route1离线时,您将收到404错误,因为mypwa.com/route1没有缓存,只有/缓存.我想这意味着您需要在服务工作者中使用某种后备条款？有谁知道实现这一目标的方法？是否有一种常见的方法来使用sw-precache-webpack-plugin？
offline-caching vue.js service-worker progressive-web-apps vue-router
我试图让网站的HTML5离线缓存版本在webview内部网络时显示.
我已经覆盖了onReceivedErrorok,当网络关闭时,会调用此方法.问题是它显示通用的"网页不可用"消息.
如何让它显示HTML5缓存版本的页面？webapp的离线存储肯定有效,因为它在桌面版Firefox和Chrome中运行良好.
我知道我可以loadData手动调用视图onReceivedError,但我不确定从哪里可以获得HTML5缓存值.
注:如果我在设置一些虚拟的数据loadData,例如view.loadData(Uri.encode("<html><div>Page load failed</div></html>"), "text/html", "UTF-8");,然后单击后退(通过检测回事件,并呼吁webview.goBack();然后显示ok了网页的缓存版本.
以下是我在设置webview时添加的一些代码行:
webview.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
webview.getSettings().setAppCacheMaxSize(1024*1024*8);
webview.getSettings().setAppCachePath("/data/data/com.stuff.android/cache");
webview.getSettings().setAllowFileAccess(true);
webview.getSettings().setAppCacheEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setJavaScriptEnabled(true);
我目前正在研究一个学校项目,我正在尝试学习将OSM地图图块下载到手机的本地内存/缓存中的技术,以便用户能够在离线时查看地图.
这是通过给出特定位置来完成的,并且在距离该位置的特定半径/距离内的地图图块将被下载到手机存储器中(当存在在线连接时)以用于离线显示.
但是,我在理解OSMDroid的API方面遇到了一些麻烦.根据我的理解,所涉及的课程似乎是:
如果我弄错了,请纠正我.
另外,在MapTileBase(我认为是提供者)中,getMapTile返回android.graphics.drawable.Drawable.
这个Drawable类甚至与离线地图显示的概念有关吗？
希望有人可以告诉我在哪里准确地将地图下载到手机的内存中,以及我们如何编辑地图以显示路线,引脚等界面项目.
我的问题是这个主题的后续行动.到目前为止,我喜欢Firebase的简洁性和性能.
据我所知,firebase.js将来自服务器的数据快照同步到Javascript内存中的对象.但是,目前没有将此数据缓存到磁盘的功能.
结果是:
由于快照数据作为Javascript对象位于内存中,因此将其序列化为JSON并将其保存到localStorage应该非常简单,因此可以在下次启动应用程序时在线或不加载确切的应用程序状态.但是当firebase.js代码缩小并且神秘时,我不知道在哪里看.
PouchDB在CouchDB后端处理得非常好.(但它缺乏Firebase的快速响应时间和简单性.)
所以我的问题是:
1.我需要将哪些数据序列化以将快照保存到localStorage？如何在应用启动时将其加载回Firebase？
2.我在哪里可以下载firebase.js的原始非缩小开发源代码？
(顺便说一下,有两个功能可以帮助Firebase将比赛从水中吹走:离线缓存和地图减少.)
我想找一个本地/离线版本的Angular 4文档(https://angular.io/docs),我可以在离线环境中使用(根本没有互联网访问,热心及其替代品)不能不幸地使用了.
经过几个小时的搜索,似乎没有人能找到这个任务的简单解决方案,仅适用于angularJS 1.0版本.
我还尝试克隆角度文档项目,但没有成功在没有互联网可用的情况下在本地运行它.
这基本上与这个尚未回答的SO问题完全相同:离线Web应用程序不在Firefox上缓存,但在Chrome上可以
我遇到了同样的问题,我将提供更多信息,因为它可能有助于某人试图找出试图实现缓存清单的神秘奥秘和陷阱.
问题:点击页面重新加载/刷新,页面应该从脱机缓存重新加载,但事实并非如此.
它在Chrome 23中工作正常:当我从互联网断开连接并刷新页面时,它加载正常,控制台显示Application Cache NoUpdate事件.
但是,Firefox 15.0.1向我展示了我的404页面.
故障排除(Firefox):转到Firebug并单击DOM,然后单击applicationCache.状态显示0,表示未缓存(页面尚未脱机存储).
故障排除(Firefox):转到Firefox选项 - >高级,查看脱机Web内容和用户数据.它显示我的域使用1.4MB数据供离线使用.(这是检查您的页面是否已被缓存的好地方).
故障排除(Firefox):打开一个新选项卡,然后转到about:cache.在这里,您应该看到脱机缓存设备的标题.在这里,您可以看到缓存目录,它是保存脱机缓存文件的位置.如果单击列表缓存条目,您将在脱机缓存清单中看到这些文件.
这里有两件事我觉得很奇怪:1)当我点击列表中的任何文件时,它会转到一个空白页面,上面写着"缓存条目信息您选择的缓存条目不可用".但是,文件确实存在并且在缓存目录中不是空白2)尽管列出了缓存清单中的所有文件,但我在此处未列出我正在呼叫的页面(在Chrome DevTools中,它在清单中显示为主:即使它未在缓存清单文件中明确列出,它也会自动缓存.
这是我在线时看到的内容:使用冷(空)缓存,当我加载页面时,控制台会显示检查,下载,进度和缓存事件,但缓存状态未缓存.基本上,下载缓存文件,但无法访问它们.Firebug DOM applicationCache说:离线缓存中的0项(这与about:cache和Options - > Advanced中显示的内容相矛盾).状态为1,表示空闲.当我在线查看Firebug中的Net选项卡时,它会显示对200 OK响应的页面的GET请求.Expires设置显示1969年12月31日星期三,我认为这意味着将始终提取页面.其他文件显示304 Not Modified响应,这意味着它们是从浏览器缓存加载的,而不是脱机缓存(Chrome对这些文件的类似响应是200 OK(来自缓存),这意味着它们是从离线加载的缓存,而不是浏览器缓存).
当我离线时:使用"未缓存"缓存,GET请求失败,并加载具有200 OK(BFCache)响应的脱机回退404页面.
似乎已下载脱机缓存,因为它实际存在于磁盘上,并且控制台中显示了进度事件,但Firefox从未触发缓存事件,因此某些资源未成功下载.这些文件都是png,js或php格式,所以没有疯狂的文件格式.Chrome会将完全相同的文件下载到缓存中而不会出现问题.我也尝试过移动版Safari,它成功地从离线缓存重新加载页面.
Firefox没有缓存某些文件类型是否存在任何已知问题？我在我的一些文件上使用.html.php扩展名.我还使用php文件动态生成清单,因此它只获取存在的文件,并将它们哈希以检测更改并更新清单.
后续步骤:我将尝试一个简单的清单,看看我是否能让它工作,然后逐个添加文件,看看哪个文件触发了错误.也许Firefox不喜欢我动态生成缓存清单而不是手动更新静态文件的事实？
我已经了解了很多关于缓存清单的神秘错综复杂的知识,但我更像是一个黑客而不是计算机专家.还有其他人在使用Firefox时遇到过这种怪癖吗？
页面的开头:
<!DOCTYPE html>
<html manifest="/directory/manifest.php">
然后manifest.php就是
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
它使用RecursiveDirectoryIterator来获取目录中的所有文件(默认情况下包含的缓存本身除外).
firefox offline application-cache offline-caching html5-appcache
我在我的应用程序中使用AFNetworking,并尝试通过使用缓存数据(如果可用)使其在脱机模式下工作.
我预计在将请求缓存策略设置为NSURLRequestReturnCacheDataDontLoad之后,getPath:parameters:success:failure:在脱机时将使用缓存数据成功.但是,即使缓存中有数据(我通过使用代码检查缓存进行验证),getPath也会在飞行模式下失败.
AFNetworking github中有一个帖子:https://github.com/AFNetworking/AFNetworking/issues/378 但似乎根本没有解决这个问题.AFNetworking的作者只是简单地指出Apple的文件,它说:
NSURLRequestReturnCacheDataDontLoad指定应使用现有缓存数据来满足请求,无论其年龄或到期日期如何.如果缓存中没有与URL加载请求相对应的现有数据,则不会尝试从原始源加载数据,并且认为加载失败.此常量指定类似于"脱机"模式的行为.
正如Apple所说,NSURLRequestReturnCacheDataDontLoad完全是为离线模式设计的.
我在iOS6中测试,我用NSURLCache和SDURLCache测试,都有相同的结果.
请求失败,错误消息:
2012-12-22 03:11:18.988 Testapp [43692:907]错误:错误域= NSURLErrorDomain代码= -1009"Internet连接似乎处于脱机状态." UserInfo = 0x211b87c0 {NSErrorFailingURLStringKey = http://Testapp.com/api/v1/photo/latest/,NSErrorFailingURLKey = http://Testapp.com/api/v1/photo/latest/,NSLocalizedDescription = Internet连接似乎是离线.,NSUnderlyingError = 0x211b9720"Internet连接似乎处于脱机状态."}
我的 Service Worker 有问题。
我目前正在使用 offline.html 站点实现离线功能，以便在网络故障时显示。我已经实现了导航预加载，如下所述：https : //developers.google.com/web/updates/2017/02/navigation-preload#activation_navigation_preload
这是我安装的 EventListener是 skipWaiting() 并初始化新缓存
const version = 'v.1.2.3'
const CACHE_NAME = '::static-cache'
const urlsToCache = ['index~offline.html', 'favicon-512.png']
self.addEventListener('install', function(event) {
self.skipWaiting()
event.waitUntil(
caches
.open(version + CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache)
})
.then(function() {
console.log('WORKER: install completed')
})
)
})
这是我的激活 EventListener功能检测导航预加载并启用它。之后我检查旧缓存并删除它们
self.addEventListener('activate', event => {
console.log('WORKER: activated')
event.waitUntil(
(async function() {
// Feature-detect
if (self.registration.navigationPreload) {
// Enable navigation preloads!
console.log('WORKER: Enable navigation preloads') …google-chrome offline-caching offlineapps service-worker progressive-web-apps
offline-caching ×10
android ×3
html5 ×2
javascript ×2
offline ×2
offline-mode ×2
offlineapps ×2
afnetworking ×1
angular ×1
firebase ×1
firefox ×1
ios ×1
ios5 ×1
maps ×1
osmdroid ×1
vue-router ×1
vue.js ×1
webview ×1