Is there a way to use a CDN (for jQuery) and have an offline Web app (via HTML5 manifests)?

Asked 10/3, 2011 at 19:27 Answered 15/4, 2012 at 4:28

Solved jquery html manifest cdn offline-browsing

I'm beginning to look at HTML5s ability to allow for offline Web applications.

A while back I found that using a CDN worked well for my applications, so I've been sticking with them, mostly just for jQuery.

However, it doesn't appear that manifest files allows cross-domain resources to be cached.

At this point I've been using the catch-all manifest as described by the relevant Dive Into HTML5 tutorial. My jQuery is pulled in similar to what's defined in the HTML5 Boilerplate.

I'd like to be able to continue to serve jQuery from a CDN for online users, but perhaps have a local copy cached for offline access.

Is it worth trying to pursue this route, or should I just switch over to just serving jQuery from my site, for all requests?

Thanks.

Mahmud answered 10/3, 2011 at 19:27 Comment(1)

If one of these answers answers your question, you should accept it. – Juniejunieta 26/7, 2016 at 19:4

Actually, you can write your manifest that has a link to your jQuery CDN. Just like my app.manifest:

CACHE MANIFEST
# 2012-01-20:v4

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

That is HTML segment:

<html manifest="app.manifest">
<head>
    ....
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    ....
</body>
</html>

It works to me.

Sequence answered 15/4, 2012 at 4:28 Comment(3)

This also works for me, got stuck on a css file importing a font for a bit but adding the font to the manifest solves that issue! – Clemmer 20/3, 2013 at 22:18

Bit of nitpicking, but, of course, that <script> should be at bottom of <body>... – Diazo 5/5, 2017 at 15:15

Thank for adjusting, but it's irrelevant to the question. – Sequence 6/5, 2017 at 0:18

the path of checking if online jquery exists and if not loading from local was answered here: How to load local script files as fallback in cases where CDN are blocked/unavailable?

where there is a discussion and a couple of different approaches

personally I like the html5boilerplate approach:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

you can check if the browser supports offline caching with modernizer http://www.modernizr.com/ the modernizer 2.0 version supports conditional loading , so you can use it to detect and load the needed resource with the following script (taken from diveintohtml5):

    if (Modernizr.applicationcache) {
  // window.applicationCache is available!
} else {
  // no native support for offline :(
  // maybe try Gears or another third-party solution
}

but as I said before, I prefer the html5boilerplate method

Sector answered 7/10, 2011 at 14:50 Comment(0)

After weeks of thought I finally had an idea while driving home tonight.

It's possible to check if a browser has offline support. You could then have an area that would ask a user if they'd like to enable offline support for an application. If they do, you load in your local copy of jQuery. If not, or offline support isn't available, then you just reference jQuery from a CDN.

Or perhaps it's a separate page in the application. If they visit it it simply has a script element that pulls in your local jQuery file. Then the page either goes back one or the window is closed, depending upon the application. (I assume adding your local copy of jQuery wouldn't work on the main page, unless you removed jQuery from the existing page (overwriting the variables or otherwise?).)

Depending upon how the browser(s) decide to hold onto offline content (files), there may potentially be an issue if the local jQuery file is only loaded on one page, and very rarely. Until the user is offline, of course, at which point it is called on (potentially) every page.

Mahmud answered 29/3, 2011 at 0:4 Comment(0)

Recommended topics

Hot tags