External resources fail to load when using HTML5 cache

I'm trying to get app cache to work:

CACHE MANIFEST

/css/style.css
/js/colors.js
/js/dropzone.js
/js/jquery.min.js
/js/script.js

/img/icon_analytics.png
/img/icon_exit.png
/img/icon_expand.png
/img/icon_list.png
/img/icon_lock.png
/img/icon_menu.png
/img/icon_more_content.png
/img/icon_settings.png
/img/icon_settings_black.png
/img/svg_icons/close_fullscreen.svg
/img/svg_icons/go_fullscreen.svg
/img/loader.gif

But here is what I'm getting in the console:

GET https://www.google.com/jsapi net::ERR_FAILED
(index):517 Uncaught ReferenceError: google is not defined
(index):524 GET http://www.google-analytics.com/analytics.js net::ERR_FAILED
0.s3.envato.com/files/115114837/profile.jpg:1 GET https://0.s3.envato.com/files/115114837/profile.jpg net::ERR_FAILED
jquery.min.js:3 GET http://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIpBw1xU1rKptJj_0jans920.woff2 net::ERR_FAILED

Apparently, it refuses to load any resources which are not specified in the .appcache file. I even tried to specify only the images, it still throws errors for the stylesheet and all .js files.

What's going on?

Solution

You need to add the NETWORK section, like this:

CACHE MANIFEST

CACHE:
/css/style.css
/js/colors.js
/js/dropzone.js
/js/jquery.min.js
/js/script.js

/img/icon_analytics.png
/img/icon_exit.png
/img/icon_expand.png
/img/icon_list.png
/img/icon_lock.png
/img/icon_menu.png
/img/icon_more_content.png
/img/icon_settings.png
/img/icon_settings_black.png
/img/svg_icons/close_fullscreen.svg
/img/svg_icons/go_fullscreen.svg
/img/loader.gif

NETWORK:
*