使用html5 历史 api进行 url 重写时支持离线模式的最佳实践是什么(以及如何去做)?
例如,(假设)我在https://abc.xyz有一个 PWA SPA 应用程序,它内置了国际化功能。因此,当我访问此链接时,Vue 路由器(理想情况下可以是任何框架 - vue、react、Angular 等) .) 将我重定向到https://abc.xyz /en。
当我在线时,这非常有效(当然,网络服务器也正在处理此重定向,因此即使您直接访问上述链接,应用程序也可以正常工作)。
然而,当我离线时,情况就不同了。服务工作线程会正确缓存所有资源,因此当我访问 URL https://abc.xyz时,所有内容都会按预期加载。但是,现在如果我手动输入https://abc.xyz /en的 URL ,应用程序将无法加载。
有关如何实现这一目标的任何指示?
链接到 github 中的同一问题:https ://github.com/vuejs-templates/pwa/issues/188
offline offline-mode html5-history vue.js progressive-web-apps
我正在寻找一个关于如何使用 html、JavaScript 或者 jQuery 创建离线兼容 Web 应用程序的解决方案。我研究了 Service Worker,但它们还无法与所有移动设备相媲美。我还查看了清单文件,它有效,但它没有\xe2\x80\x99t 更新文件。所以现在我\xe2\x80\x99m在这里寻求解决方案。我希望这个应用程序成为一个音乐网站,也可以是一个网络应用程序。我喜欢音乐,我把它带到任何地方,所以我\xe2\x80\x99m试图找出如何保存网站文件以供离线使用,所以即使我没有\xe2\x80\x99t有WiFi,我也可以听我保存的音乐。顺便说一句,我\xe2\x80\x99d喜欢保存的文件是:
\n\nmain.js\nMain.css\nIndex.html\nRun Code Online (Sandbox Code Playgroud)\n\n编辑 1 \n另外,如果您知道如何正确使用服务工作者,您能举个例子吗?
\n对于Web-dev,可以将PHP处理器安装在常规的Windows XP计算机上,以便通过浏览器查看PHP文件来执行PHP脚本吗?(不是Windows Server 2003)
我甚至下载了PHP,但似乎他们希望将它安装在服务器上.
在没有将文件上传到服务器的情况下,在本地计算机上快速预览和运行PHP的任何其他方法?(Dreamweaver可以处理PHP文件中的静态HTML ..)
我们需要一个在线离线wiki类型的应用程序,基本上是一些带有文档的页面,但是也需要链接到用户的同步映射驱动器上的许多文件..文字docs/pdfs/ppts等笔记本电脑..
任何人都可以建议谷歌齿轮是否是一个合理的解决方案,我刚刚对齿轮文档进行了简要的细读..它看起来非常酷/有用.
就像制作网络维基并改进它一样.应用程序还需要一些方法来保存实际文件(docs/pdfs等)的链接,但这应该影响它的齿轮性我想象)
谢谢...
抱歉它在当天晚些时候所以问题可能实际上没有任何意义..
NAT
我注意到在使用Google Chrome时,如果某个网站(例如Facebook,YouTube或Google文档)无法访问,则会显示某个错误页面,其中显示" 该应用目前无法访问. ",如下所示.

这是Chrome内部还是离线网络应用清单文件的一部分?
为什么我的离线应用没有被任何浏览器缓存?
我在这里创建了一个简化的测试:http://design.aqueo.us/test/appcache/
它只有两个文件:一个html文件加上清单.(html文件包含一些javascript来显示缓存状态.)检查控制台日志,你会看到它总是显示"缓存状态:未缓存".此外,chrome:// appcache-internals /(在谷歌浏览器中)不会列出该网站.据我所知,浏览器甚至从不提取清单文件.我在多个浏览器中试过这个.
这是清单:
CACHE MANIFEST
# .
Run Code Online (Sandbox Code Playgroud)
这是HTML:
<!doctype html>
<html>
<head manifest="offline.appcache">
<meta charset="utf-8">
<title>Appcache test</title>
<script>
(function() {
var webappCache = window.applicationCache;
function loaded()
{
var h1El = document.querySelector("h1");
var connectionStatus = ((navigator.onLine) ? 'online' : 'offline');
h1El.textContent = h1El.textContent + " - currently: " + connectionStatus;
switch(webappCache.status)
{
case 0:
console.log("Cache status: Uncached");
break;
case 1:
console.log("Cache status: Idle");
break;
case 2:
console.log("Cache status: Checking");
break;
case 3:
console.log("Cache status: Downloading"); …Run Code Online (Sandbox Code Playgroud) 看来,火力地堡的iOS实现不支持客户端模式的离线缓存.这在实践中意味着什么:
这里的问题是,如果您使用Firebase实现,例如消息传递应用程序,您很可能希望在与后端服务器的实际连接之前向用户显示消息线程和消息的先前缓存版本成立.
我假设正确的实现需要处理:
有没有人想出一个解决方案(自己的或第三方)来实现2)和3)?
我正在尝试与服务工作者一起进行缓存并遇到经过身份验证的调用问题.我目前使用https://css-tricks.com/serviceworker-for-offline/(https://raw.githubusercontent.com/chriscoyier/Simple-Offline-Site/master/js/service-worker.js)虽然我使用Google的sw-toolbox看到了相同的行为,但作为模板.
在发出依赖于特定标头参数进行身份验证的请求时,似乎浏览器发出的初始请求失败,然后成功请求(请参阅图像).有没有想过为什么会这样?任何其他可能有用的细节?
提前谢谢,丹
自从升级到Android Studio 3.1以来,我遇到了一个大问题:
No cached version of com.github.bumptech.glide:compiler:4.6.1 available for offline mode
Run Code Online (Sandbox Code Playgroud)
但是我不处于离线模式,您可以在此处看到:
我尝试了“清理项目”和“重建项目”,但都没有成功。我什至重启了我的电脑。
这是我的Build.gradle:
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:design:27.1.0'
implementation 'com.android.support:support-v4:27.1.0'
implementation 'com.android.support:appcompat-v7:27.1.0'
implementation "com.android.support:gridlayout-v7:27.1.0"
implementation 'com.android.support:exifinterface:27.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.google.code.gson:gson:2.8.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
}
Run Code Online (Sandbox Code Playgroud) 如何获取服务工作者的“获取”事件正在服务的页面的完整URL?
“ self.location”属性似乎仅引用站点的根URL。例如,如果页面https://example.com/folder/pagename.html正在执行服务工作者正在拦截的提取,则服务工作者的'self.location'属性将返回“ https://example.com ”。
event.currentTarget.location和event.explicitOriginalTarget.location,event.originalTarget和event.target均返回服务工作者.js文件的URL。
如何获取触发fetch事件的页面的完整URL?