Javascript 移动 Web 应用程序未正确清除缓存

Mobile Web App not clearing cache properly

提问by Mulberry

I've been developing a mobile web app for iPad and I've been running into an issue while testing my code.

我一直在为 iPad 开发一个移动网络应用程序，但在测试我的代码时遇到了一个问题。

Occasionally, and seemingly at random, the iPad will stop properly updating all of the JS libraries I've written. After updating some code and posting the changes, I will notice some files will have properly updated while others have not. This bahavior persists after numerous cache clears, power cycles, and wifi toggles.

偶尔，而且似乎是随机的，iPad 会停止正确更新我编写的所有 JS 库。更新一些代码并发布更改后，我会注意到一些文件将正确更新，而其他文件则没有。在多次缓存清除、电源循环和 wifi 切换后，这种行为仍然存在。

If I load the app in safari i have no issues with it, but when I load from the app's homescreen icon the problem re-appears. I've done simple tests like adding an alert line to a library and that alert fires without issue anywhere except within the mobile-web-app window. Then, seemingly at random again, the problem is disappears, sometimes it takes 5 minutes, sometimes it takes an hour.

如果我在 safari 中加载应用程序，我没有问题，但是当我从应用程序的主屏幕图标加载时，问题再次出现。我已经完成了简单的测试，例如向库添加警报行，并且除了在移动网络应用程序窗口内之外，该警报在任何地方都没有问题。然后，似乎又是随机的，问题消失了，有时需要5分钟，有时需要一个小时。

I see this behavior regardless of whether the app is using a manifest file or not. I have also tried to flush these legacy files by updating the manifest file to force the recache that way, but the problem still persists.

无论应用程序是否使用清单文件，我都会看到这种行为。我还尝试通过更新清单文件来强制以这种方式重新缓存来刷新这些旧文件，但问题仍然存在。

Does anyone know if this is a known issue with iPad? Is there anything on my end that can be done to address this?

有谁知道这是否是 iPad 的已知问题？有什么办法可以解决这个问题吗？

回答by Ludovic

For me, the solution is adding ?v=1at the end of all your Javascript and CSS links. I've tried everything before seeing that on another Stackoverflow post and it worked directly !!! It was about time...

对我来说，解决方案是?v=1在所有 Javascript 和 CSS 链接的末尾添加。在另一个 Stackoverflow 帖子上看到它之前，我已经尝试了所有方法，并且它直接起作用了！！！是时候了...

回答by bench-o

I got the solution!

我得到了解决方案！

But first the problem: iPad and iPhone is not refreshing the cache when opening the app. Even deleting the app, clearing safari cache, restarting device etc. etc. doesnt work.

但首先是问题：iPad 和 iPhone 在打开应用程序时没有刷新缓存。即使删除应用程序、清除 safari 缓存、重新启动设备等也不起作用。

And here is the solution ... taadaa !

这是解决方案...... taadaa！

Your manifest-file MUST change. If it is changed, iPad/iPhone will reload the cache. So just write a version number in your manifest file and change it when you changed something:

您的清单文件必须更改。如果更改，iPad/iPhone 将重新加载缓存。因此，只需在清单文件中写入一个版本号，并在更改某些内容时更改它：

# Version: 1.2

So a full manifest file could look like this:

因此，完整的清单文件可能如下所示：

CACHE MANIFEST

# Version 1.5

NETWORK:
*

CACHE:
index.html
jquery-1.7.2.min.js
images/logo.jpg

It even reloads things like images that are not written into the manifest file. I tested it a several times.

它甚至会重新加载诸如未写入清单文件的图像之类的内容。我测试了几次。

Btw. dont forget to check your manifest-file with http://manifest-validator.com

顺便提一句。不要忘记使用http://manifest-validator.com检查您的清单文件

My source is this very cool how to about offline web applications: http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/

我的来源是关于离线 Web 应用程序的非常酷的方法：http: //gregsramblings.com/2012/05/28/html5-application-cache-how-to/

It also says that you maybe need to start your app twice:

它还说您可能需要两次启动您的应用程序：

If the manifest was updated, the browser will download all of the files in the cached file list, BUT, the original content will have already loaded at this point (remember that it's already cached, so it loads super fast!).

如果清单被更新，浏览器将下载缓存文件列表中的所有文件，但是，原始内容此时已经加载（记住它已经被缓存，所以它加载超快！）。

But it worked for me always on first attempt.

但它总是在第一次尝试时对我有用。

回答by John Wolf

Work around for this problem. Add a link to the Web App itself like...

解决这个问题。添加指向 Web 应用程序本身的链接，例如...

<a href="javascript:top.frames.location.reload();">refresh</a>

It works just like the reload button on the iPhone/iPad Safari address bar!

它就像 iPhone/iPad Safari 地址栏上的重新加载按钮一样工作！

回答by onemesh

I can't verify the cache being cleared properly but this worked for me :

我无法验证缓存是否被正确清除，但这对我有用：

In order to do this, you need to allow Web Inspector on your iOS device. Go to Settings > Safari > Advanced > Web Inspector (it has to be active) And you have to activate the developer menu on your computer's Safari. Go to Preferences > Advanced > Activate Developer menu

为此，您需要在 iOS 设备上允许 Web Inspector。转到“设置”>“Safari”>“高级”>“Web Inspector”（它必须处于活动状态）并且您必须激活计算机 Safari 上的开发人员菜单。转到首选项 > 高级 > 激活开发者菜单

1. Connect your device to your computer with the USB cable
2. Go to safari > Developpement > Your Device name > Inspect an App (The app has to be running)
3. This will open The inspector on your computer for the web app
4. While the inspector is open Clear the cache (command + alt + E)
5. With the inspector still open refresh the page on your computer (command + R)

1. 使用 USB 数据线将您的设备连接到计算机
2. 转到 safari > 开发 > 您的设备名称 > 检查应用程序（应用程序必须正在运行）
3. 这将在您的计算机上打开 Web 应用程序的检查器
4. 当检查器打开时清除缓存（command + alt + E）
5. 在检查器仍然打开的情况下刷新计算机上的页面（命令 + R）

Somehow the Webapp cache got cleared and i got the non-cached code.

不知何故，Webapp 缓存被清除，我得到了非缓存代码。

回答by Jezen Thomas

I spent several hours trying to fix this problem, and it seems as though the manifest file that is supposed to manage file caching, can itself be cached, leaving your web-app in limbo.

我花了几个小时试图解决这个问题，似乎应该管理文件缓存的清单文件本身可以被缓存，让您的网络应用程序处于不确定状态。

In my case, I didn't want anything cached. Here's how I solved the problem:

就我而言，我不希望缓存任何内容。这是我解决问题的方法：

• Enable the mod_expires Apache module on my server
• Create a .htaccessfile in the same directory as the index file. The file should contain the line ExpiresDefault A1.

• 在我的服务器上启用 mod_expires Apache 模块
• .htaccess在与索引文件相同的目录中创建一个文件。该文件应包含行ExpiresDefault A1。

This tells the server that every file should expire one second after it was accessed. My web-app is used as a survey at student conventions, so only one person is using it at a time. My solution works for me; you might need to tweak it further so it suits you.

这告诉服务器每个文件都应该在访问后一秒到期。我的网络应用程序在学生大会上用作调查，因此一次只有一个人在使用它。我的解决方案对我有用；您可能需要进一步调整它以适合您。

In the past, this problem had presented itself seemingly at random. All of my recent testing has shown it to respond as one would expect.

过去，这个问题似乎是随机出现的。我最近的所有测试都表明它的响应正如人们所期望的那样。

回答by Neo

I'm having exactly the same problem with my web applications on iPad - sometimes, at random, the web app run in standalone mode wouldn't refresh a particular resource (HTML/CSS/JS file), despite killing every possible app, clearing Safari cache & history, rebooting, restarting wifi-connection, refreshing or removing the manifestfile or putting the device in a microwave; even applying a sledgehammer proved to be futile.

我在 iPad 上的网络应用程序遇到了完全相同的问题 - 有时，随机运行在独立模式下的网络应用程序不会刷新特定资源（HTML/CSS/JS 文件），尽管杀死了所有可能的应用程序，清除Safari 缓存和历史记录、重新启动、重新启动 wifi 连接、刷新或删除manifest文件或将设备放入微波炉；即使使用大锤也被证明是徒劳的。

While I haven't found a "kosher" way to fix it, there is always a workaround - renamethe resource.

虽然我还没有找到解决它的“犹太洁食”方法，但总有一种解决方法 -重命名资源。

Simply change the name of the not-refreshing file. If you have a problem with, let's say, foobar.jsnot updating, rename it to foobar2.jsand update the referencesto this resource in other files. This of course could be a pain in you know what(especially when after a week's worth of development you are at foobar12.js), but until we see an official fix to iOS or a working refreshing technique, it's the only way I know of to get it up and running.

只需更改不刷新文件的名称即可。如果您有问题，例如foobar.js不更新，请将其重命名为foobar2.js并更新其他文件中对此资源的引用。这当然可能会让您感到痛苦（尤其是在您进行了一周的开发之后foobar12.js），但在我们看到 iOS 的官方修复或有效的刷新技术之前，这是我所知道的获得它的唯一方法启动并运行。

回答by Summer

turning the ipad off and on works for me - at least on ios 5. not completely off, just use the sleep button on the top of the ipad and then the home button to turn it back on. appending a version number at the end of files also works, but that gets quite tedious.

关闭和打开 ipad 对我有用 - 至少在 ios 5 上。没有完全关闭，只需使用 ipad 顶部的睡眠按钮，然后使用主页按钮将其重新打开。在文件末尾附加版本号也有效，但这会变得非常乏味。

回答by skeggse

I spent many days working on this problem. It looked like a rendering bug because of some coincidental changes I had made in both CSS and HTML, thus putting buttons at random places on the screen rendering the app unusable.

我花了很多天来解决这个问题。它看起来像是一个渲染错误，因为我在 CSS 和 HTML 中进行了一些巧合的更改，因此将按钮放在屏幕上的随机位置使应用程序无法使用。

I determined that the CSS was cached, after several days of poking and prodding, and finally tried renaming the files, something @Neo talks about. I also changed cache-control in my .htaccess file, as I had been using an old .htaccess that instructed the browser to cache for a year.

经过几天的摸索和刺激，我确定 CSS 已被缓存，最后尝试重命名文件，@Neo 谈到了这一点。我还更改了 .htaccess 文件中的缓存控制，因为我一直在使用旧的 .htaccess 指示浏览器缓存一年。

tl;dr: Remove cache-control (mod_expiresand mod_headers) for your webapp files, and just use a cache manifestif you're not already. Then rename the files and update the links in your HTML and you should be good.

tl; dr：删除您的 webapp 文件的缓存控制（mod_expires和mod_headers），如果您还没有使用缓存清单，请使用缓存清单。然后重命名文件并更新 HTML 中的链接，您应该会很好。

回答by René

I had the exact same problem.

我有同样的问题。

I tried the different suggestions here, and added cache control with no luck. I tried renaming the file that refused to update, no luck. I tried adding a cache manifest (I had one before, but removed it), no luck. And I tried all the usual things: delete app, clear cache, reboot, reinstall app, no luck.

我在这里尝试了不同的建议，并在没有运气的情况下添加了缓存控制。我尝试重命名拒绝更新的文件，但不走运。我尝试添加缓存清单（我之前有一个，但已将其删除），但不走运。我尝试了所有常见的事情：删除应用程序，清除缓存，重新启动，重新安装应用程序，没有运气。

The only thing that worked for me, was to rename the virtual directory on my web server. This might not be a viable solution for everyone, but luckily for, this was not really a problem, as I'm testing using a local IIS server.

唯一对我有用的是重命名我的 Web 服务器上的虚拟目录。这对每个人来说可能不是一个可行的解决方案，但幸运的是，这并不是真正的问题，因为我正在使用本地 IIS 服务器进行测试。

回答by Mohamad Hamouday

To fix this problem you should add new letterswith numbers (not just numbers)to the end of link like that:

要解决此问题，您应该在链接的末尾添加带有数字（不仅仅是数字）的新字母，如下所示：

?v1
?x2
?z3

And every time you want to update your script, you should add a different lettersand numbers (different letters is required because today many mobile browsers are ignoring all pure numbers in the end of Javascript/CSS link.)

每次你想更新你的脚本时，你应该添加不同的字母和数字（需要不同的字母，因为今天许多移动浏览器忽略了 Javascript/CSS 链接末尾的所有纯数字。）