0

Afternoon All,

A bit of background - I'm building a custom calendar for a company where jobs can be scheduled and engineers can access it from their mobile to know when and where they're going. They previously used Google calendar but now want something bespoke.

All is fine until somebody loses phone signal and gets a horrible offline page in Chrome and can't access any information. What I'm wanting to do is have it save an offline version of the calendar but also update it when they re-visit it with a better connection - as job times often change.


I've tried saving the page and enabling offline mode in Chrome but the page doesn't update until you manually clear the cache so no good.

I've tried adding some javascript to hard refresh the page in the hope it clears the browser cache but again it doesn't update the page.

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

I read about cache manifests and have tried that too but although it feels like it wants to work it also doesn't update the page until I go to chrome://appcache-internals and remove the file.

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

Neither PHP or Javascript headers work either as they either don't update the file on re-visit or simply don't save any files in the first place.

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

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

As far as I can tell there's no way to manually delete a user's website cache and re-download it and once the cache has been saved there's no way to force it to update. If you set it to expire then it's not there to access and you don't know when they will next have a connection to update so I'm going round in circles.

I've been trying for several hours now to find something that works and can't believe it's not a simple thing to do and therefore I'm now throwing myself on the mercy of you fine coders to point me in the right direction before my boss hangs me from the first floor window.

Many Thanks


UPDATE

Using what Clarence said as a starting point I came up with the following code in my appcache file:

CACHE MANIFEST

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

NETWORK:
/calendar.php

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

What this does is caches the calendar.php file BUT if there is a connection then it has another look at those files under the NETWORK heading so I also put it in there. If the appcache files hasn't changed then the browser doesn't bother looking so I've used the following code to write to the file when a job has been altered:

$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);

Basically just searches the file for "UPDATED" and inserts a new time thus updating the file and requiring a re-check from returning users.

Somebody might point out this isn't the right way to do it but it seems to work from my tests so would like to thank those that contributed.

3 Answers 3

0

Have you tried changing the contents of your cache manifest whenever you change one of the files? The APPCACHE is a bit finicky when it comes to changes in the files and can be troublesome to handle. I usually include a comment with a timestamp and version number just to force it to update in the browser, like so:

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:
5
  • The problem there is that once I'm done building these pages everything will be pulling from an SQL database that will be updated by the guys in the office. So although times and dates will change and be added, the files themselves will remain the same. If there was a way to make it timestamp itself so the manifest file was different every time it's loaded (as the seconds would differ at least) then it may work but I believe everything in the appcache file is manually entered. If that makes sense. Thanks for the response though. Apr 3, 2018 at 12:29
  • Ah, not sure how you're serving up the APPCACHE file itself but you could be clever with it and generate if dynamically using a template to generate portions of the appcache file when its requested. That's certainly how I've managed to get around not being able to manually edit the appcache.
    – fixatd
    Apr 3, 2018 at 13:35
  • I think I've got it using your answer as a starting point so I'll mark this one as correct. What I've done is when a calendar time is updated it changes the "Last updated" time of the APPCACHE file using file get/put contents and that forces returning users to check the files within. My issue was updating those files as I didn't know about the NETWORK option like you said so I put my calendar.php under there and it seems to work. What this does is uses the offline version if there's no connection but it uses the online one if there is. I'll update my question with my code. Thank you. Apr 3, 2018 at 15:10
  • Ah, the NETWORK option simply indicates which resources always require an internet connection. You can have a read about the APPCACHE here
    – fixatd
    Apr 3, 2018 at 15:14
  • Ah so actually yours was right in that I could just use NETWORK: * because then when there is a connection it checks ALL the files. Silly me. So the only thing I needed to add from your answer was my calendar.php file so it could be cached for offline use along with my css files so users would be none the wiser whether they were online or offline. It seems to work anyway no matter the reasoning haha. Apr 3, 2018 at 15:27
0

well the best option would be creating a PWA. This should include the manifest files and Service workers as well. It enables you to cache the content of the websites and update it once the connection has been reestablished. However it is very new and would require a decent amount of research into service workers. If you need any help regarding the development of PWA would be happy to help to an extent

1
  • Thanks for the response, I'll do some research into PWA and service workers as you suggested and see if this works for us as a solution. Apr 3, 2018 at 12:41
0

The only way without HTTP-Header is to rename files continuously.

And the depending HTML tag file-name.

So the files are loaded afresh.



With HTTP-Header look here.

How to control web page caching, across all browsers?



You can do this whenever a new change in the calendar was made.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.