Browse files

Switch to XHR to favicon to fix 'shows failure on 404' issue.

  • Loading branch information...
1 parent 0d0c3e4 commit a51348607bde9a5304faa5d6315da1bfc68ad812 Zack Bloom committed Mar 4, 2014
Showing with 18 additions and 22 deletions.
  1. +12 −16
  2. +3 −3 coffee/
  3. +2 −2 js/offline.js
  4. +1 −1 offline.min.js
@@ -79,31 +79,27 @@ Properties
-Offline ships with two methods for checking the connection. One makes a request for your `/favicon.ico` file
-, the other makes an XHR request against the current domain, hoping to get back any sort of response (even a 404).
-You can change the url of the image, if you like:
+By default, Offline makes an XHR request to load your `/favicon.ico` to check the connection. If you don't
+have such a file, it will 404 in the console, but otherwise work fine (even a 404 means the connection is up).
+You can change the URL it hits (an endpoint which will respond with a quick 204 is perfect):
-Offline.options = {checks: {image: {url: 'my-image.gif'}}};
+Offline.options = {checks: {xhr: {url: '/connection-test'}}};
-You can also switch to the XHR method:
+Make sure that the URL you check has the same origin as your page (the connection method, domain and port all must be the same), or you
+will run into CORS issues. You can add `Access-Control` headers to the endpoint to fix it on modern browsers, but it will still cause issues on
+IE9 and below.
-Offline.options = {checks: {active: 'xhr'}}
-The XHR method is not enabled by default because of a concern that some sites do a significant amount of
-processing to build their 404 page, so it's not something we want to send unnecessarily. It's also
-possible that the page would respond with a redirect to a different domain, creating a CORS problem.
-If you have control of the domain and can create an endpoint which just responds with a quick 204,
-that's the perfect solution. You can set the endpoint in settings as well:
+If you do want to run tests on a different domain, try the image method. It loads an image, which are allowed to cross domains.
-Offline.options = {checks: {xhr: {url: '/health-check'}}};
+Offline.options = {checks: {image: {url: 'my-image.gif'}, active: 'image'}}
+The one cavet is that with the image method, we can't distinguish a 404 from a genuine connection issue, so any error at all will
+appear to Offline as a connection issue.
@@ -20,14 +20,14 @@ defaultOptions =
url: ->
# This can be any endpoint, even one that will 404.
- "/offline-test-request/#{ Math.floor(Math.random() * 1000000000) }"
+ "/favicon.ico?_=#{ Math.floor(Math.random() * 1000000000) }"
url: ->
- # This can be any image:
+ # This can be any image, this is the better option if your image is on a different domain, otherwise just use XHR
"/favicon.ico?_=#{ Math.floor(Math.random() * 1000000000) }"
- active: 'image'
+ active: 'xhr'
checkOnLoad: false
@@ -29,15 +29,15 @@
checks: {
xhr: {
url: function() {
- return "/offline-test-request/" + (Math.floor(Math.random() * 1000000000));
+ return "/favicon.ico?_=" + (Math.floor(Math.random() * 1000000000));
image: {
url: function() {
return "/favicon.ico?_=" + (Math.floor(Math.random() * 1000000000));
- active: 'image'
+ active: 'xhr'
checkOnLoad: false,
interceptRequests: true,
Oops, something went wrong. Retry.

0 comments on commit a513486

Please sign in to comment.