CODEWITHSUNDEEP
phphtmlhttpshtml5-appcache
NoBugs
NoBugs

Reputation: 9496

What's wrong with my appcache manifest test?

I'm trying to test Appcache manifest:

<?php

// reference: http://diveintohtml5.info/offline.html

header( "Content-Type: text/cache-manifest" );
header( "Cache-Control: max-age=0, private, must-revalidate" );

?>CACHE MANIFEST

# todo

/cachetest/tryme/vid/missouristate

Now this appears to have the right headers in Network inspector, and is linked to at the top of a html file: 

<!DOCTYPE html>
<html manifest="/cachetest/cache.manifest/index.php" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

However, there is zero evidence this is actually working. If it were working, it should not show any other items, unless it had a NETWORK * setting in that file, as described here:

Finally, let’s examine the network section. The network section in this cache manifest also has just a single line, a line that contains just a single character (*). This character has special meaning in a network section. It’s called the “online whitelist wildcard flag.” That’s a fancy way of saying that anything that isn’t in the appcache can still be downloaded from the original web address, as long as you have an internet connection. This is important for an “open-ended” offline web application. It means that, while you’re browsing this hypothetical offline-enabled Wikipedia online, your browser will fetch images and videos and other embedded resources normally, even if they are on a different domain. (This is common in large websites, even if they aren’t part of an offline web application. HTML pages are generated and served locally, while images and videos are served from a CDN on another domain.) Without this wildcard flag, our hypothetical offline-enabled Wikipedia would behave strangely when you were online — specifically, it wouldn’t load any externally-hosted images or videos!

This looks like similar web-apps that work offline, though I have to wonder if I have to set up https on localhost or local-ip to get the browser to even recognize it.

I remember seeing something recently about Appcache now requiring https as Serviceworker requires https as well. Is that something I have to set up in test environment for this to work in the latest browsers? Can I change an about:config to use on plain http? Or am I missing something else?

Upvotes: 19

Views: 636

Answers (2)

Bhavik Hirani
Bhavik Hirani

Reputation: 2016

Check the following steps to see why your code is not working, then maybe your code will work.

  • you are using php file, but The recommended file extension for manifest files is: ".appcache"
  • if you use .appcache then don't need to set header, browser will get text/cache-manifest header for .appcache extension.
  • in manifest The first line, CACHE MANIFEST, is required. so remove php code from first.
  • CACHE MANIFEST section only get resource like JS, CSS, images etc.. I think the name of the page you entered is incorrect.

And after checking the steps above, the manifest will probably be ready as follows.

name will be : index.appcache

CACHE MANIFEST
# todo
/cachetest/images/1.jpg
/cachetest/css/style.css

NETWORK:
/login.php

FALLBACK:
/html/ /cachetest/offline.html

<!DOCTYPE html>
<html manifest="/cachetest/cache.manifest/index.appcache" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

The names of the list of files are given for example.

Upvotes: 1

Nikola Miljković
Nikola Miljković

Reputation: 164

You are not doing anything wrong.

Appcache does not work in Firefox. (at least for me in Firefox 42.0)

But it does work in Chrome (I tried on 46.0.2490.86 (latest)).

Some testing pages:
http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/

http://appcache-demo.s3-website-us-east-1.amazonaws.com/with-network/

http://appcache-demo.s3-website-us-east-1.amazonaws.com/offline-iframe/

And of course you can make your own empty cache manifest file and see for yourself.

Good Luck

Source of testing pages: http://alistapart.com/article/application-cache-is-a-douchebag

Upvotes: 1

Related Questions