更新离线缓存（Chrome 在手机上）

Question

大家下午好，

一些背景知识 - 我正在为一家公司构建一个自定义日历，可以在其中安排工作，工程师可以从他们的手机访问它以了解他们要去的时间和地点。他们以前使用 Google 日历，但现在想要一些定制的东西。

一切都很好，直到有人失去 phone 信号并在 Chrome 中出现可怕的离线页面并且无法访问任何信息。我想要做的是让它保存日历的离线版本，但当他们 re-visit 它具有更好的连接时也更新它 - 因为工作时间经常改变。

我已经尝试在 Chrome 中保存页面并启用离线模式，但页面不会更新，直到您手动清除缓存，所以不好。

我已经尝试添加一些 javascript 来硬刷新页面，希望它能清除浏览器缓存，但它还是不会更新页面。

<script>location.reload(true);</script>

我阅读了有关缓存清单的内容并也尝试过，但尽管感觉它想要工作，但直到我转到 chrome://appcache-internals 并且它也不会更新页面删除文件。

CACHE MANIFEST
/calendar.php
/css/style.css

PHP 或 Javascript headers 都不起作用，因为它们要么不在 re-visit 上更新文件，要么根本不在第一个文件中保存任何文件地点。

header("Cache-Control: no-cache, must-revalidate");

<meta http-equiv="Cache-Control" content="no-store" />

据我所知，没有办法手动删除用户的网站缓存和 re-download 它，一旦缓存被保存，就没有办法强制它更新。如果您将它设置为过期，那么它就无法访问，您也不知道他们下一次连接更新的时间，所以我在兜圈子。

我已经尝试了好几个小时来寻找有用的东西，我不敢相信这不是一件简单的事情，因此我现在只能任凭你们这些优秀的程序员指点我老板把我吊在一楼之前的正确方向 window.

非常感谢

更新

以 Clarence 所说的为起点，我在我的应用程序缓存文件中提出了以下代码：

CACHE MANIFEST

CACHE:
/css/bootstrap.css
/css/style.css
/calendar.php

NETWORK:
/calendar.php

# UPDATED: 03-04-2018 15:55:57

它的作用是缓存 calendar.php 文件，但如果有连接，它会再次查看 NETWORK 标题下的那些文件，所以我也把它放在那里。如果 appcache 文件没有改变，那么浏览器就不会费心去寻找，所以当作业被改变时，我使用以下代码写入文件：

$manifest = file_get_contents(__DIR__ . '/cache.appcache');
$newFile = substr($manifest, 0, (strpos($manifest, '# UPDATED: ') + 11));
$newFile = $newFile . date('d-m-Y H:i:s');
file_put_contents('cache.appcache', $newFile);

基本上只是在文件中搜索 "UPDATED" 并插入新时间，从而更新文件并要求回访用户提供 re-check。

有人可能会指出这不是正确的方法，但从我的测试来看它似乎有效，所以要感谢那些做出贡献的人。

Answer 1

最好的选择是创建一个 PWA。这应该包括清单文件和 Service workers。它使您能够缓存网站的内容，并在重新建立连接后对其进行更新。然而，它是非常新的，需要对服务人员进行大量研究。如果您需要有关 PWA 开发的任何帮助，我们很乐意

提供帮助

Answer 2

您是否尝试过在更改其中一个文件时更改缓存清单的内容？ APPCACHE 在涉及文件更改时有点挑剔，处理起来很麻烦。我通常包含一个带有时间戳和版本号的评论，只是为了强制它在浏览器中更新，就像这样：

CACHE MANIFEST
# 01-01-2001 v1.0 (Change whenever you need to force an update of the cache)

CACHE:
/css/file.css
/js/file.js


NETWORK:
*

FALLBACK:

Answer 3

没有HTTP-Header的唯一方法是不断重命名文件。

和依赖 HTML tag file-name.

所以文件被重新加载了。

HTTP-Header 看这里。

How to control web page caching, across all browsers?

每当对日历进行新更改时，您都可以执行此操作。

更新离线缓存（Chrome 在手机上）

Updating Offline Cache (Chrome On Mobile)

javascript

php

caching

offline

google-chrome