Search code examples
angularjsweb-applicationsmanifesthtml5-appcacheapplication-cache

AngularJS Error using manifest.appcache


Case 1: After event 'cached' comming from window.applicationCache.addEventListener, i get my mobile using OFFLINE MODE(airplane mode i mean),then i open my webapp from HomeScreen icon and everything works fine, except AngularJS, that doesnt get loaded. None function or variable is recnognized.

Case 2: After event 'cached' comming from window.applicationCache.addEventListener, i open my webapp from HomeScreen icon using ONLINE MODE, at this moment angular worked fine because its on correct view. BUT if i dont interact with webApp (Login for example), when i get offline mode, AngularJs get a error and not even the correct view is displayed anymore.

EDIT: I realized that if after cached event, i close web app, and then open it again, without interact, it will work fine in offline mode... How is it possible?

All the calls to Angular scripts are getting called from same page that im using <html manifest="manifest.appcache" type="text/cache-manifest">, why it wont work just after i send it to home screen? I already tried couple workarounds.. none work! Any help is appreciated

Above my manifest code:

CACHE MANIFEST

# Learn more:
# https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

# -----------------------------------------------------------------------------

# It's necessary to tell web browsers to reconsider this manifest any time the
# website is updated, and you do so by changing *anything* inside the manifest.
# A common way to do this is by simply updating a commented-out string, like a
# date or a version number, or both:

# 2016-09-10:v1.122

# -----------------------------------------------------------------------------

# This is where you define all of the resources to be cached. Add new and/or
# remove old resourses as needed, keeping each one on its own line. Learn more:
# https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache#Explicit_entries
CACHE:
assets\js\jquery.min.js
assets\js\main.js
assets\js\skel.min.js
assets\js\util.js
assets\js\ie\html5shiv.js
assets\js\ie\respond.min.js
js\angular.min.js
js\angular-cookies.min.js
js\app\gmApp-controller.js
js\app\gmApp-factory.js
LICENSE.txt
assets\css\ie8.css
assets\css\ie9.css
assets\css\main.css
assets\fonts\FontAwesome.otf
assets\fonts\fontawesome-webfont.eot
assets\fonts\fontawesome-webfont.svg
assets\fonts\fontawesome-webfont.ttf
assets\fonts\fontawesome-webfont.woff
assets\fonts\fontawesome-webfont.woff2
assets\css\font-awesome.min.css
images\02.png
images\avatar.jpg
images\bg_login.jpg
images\favicon.png
images\fundo-bar.jpg
images\fundo-home.jpg
images\hotel-1.png
images\logo.jpg
images\pic01.jpg
images\pic02.jpg
images\pic03.jpg
images\pic04.jpg
images\pic05.jpg
images\pic06.jpg
images\pic07.jpg
images\pic08.jpg
images\pic09.jpg
images\pic10.jpg
images\pic11.jpg
images\pic12.jpg
images\cancun\chichen-tza.jpg
images\cancun\cirque-soleil.jpg
images\cancun\coco-bongo.jpg
images\cancun\haceienta-mortero.jpg
images\cancun\isla-mujeres.jpg
images\cancun\la-isla-shopping.jpg
images\cancun\navio-pirata.jpg
images\cancun\shopong-plaza.jpg
images\cancun\tulum.jpg
images\cancun\xcaret.jpg
images\cancun\xel-ha.jpg
images\dicas\dica1.jpg
images\dicas\dica2.png
images\dicas\dica3.jpg
images\dicas\dica3a.jpg
images\dicas\dica3b.jpg
images\dicas\dica3c.jpg
images\dicas\dica3d.jpg
images\dicas\dica3e.jpg
images\dicas\dica4.jpg
images\dicas\dica5.jpg
images\dicas\dica6.jpg
images\dicas\dica6a.jpg
images\dicas\dica6b.jpg
images\dicas\dica6c.jpg
images\dicas\dica7.jpg
images\dicas\dica7a.jpg
images\dicas\dica7b.jpg
images\dicas\dica7c.jpg
images\dicas\dica9.jpg
images\dicas\rodape.jpg
images\mini-menu\Cancun-42.jpg
images\mini-menu\chichen-tza.jpg
images\mini-menu\cirque-soleil.jpg
images\mini-menu\coco-bongo.jpg
images\mini-menu\haceienta-mortero.jpg
images\mini-menu\isla-mujeres.jpg
images\mini-menu\la-isla-shopping.jpg
images\mini-menu\navio-pirata.jpg
images\mini-menu\shopong-plaza.jpg
images\mini-menu\tulum.jpg
images\mini-menu\xcaret.jpg
images\mini-menu\xel-ha.jpg
index.html

# -----------------------------------------------------------------------------

# Resources that must be retrieved from the network. The wild card ensures any
# resource not listed in the cache above will instead be downloaded from the
# network. Learn more:
# https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache#Network_entries

NETWORK:
*

# -----------------------------------------------------------------------------

# Fallbacks. In each row, if the first resource isn't available, the second
# resource is requested. Uncomment and update as needed. Learn more:
# https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache#Fallback_entries

FALLBACK:
assets\fonts\FontAwesome.otf assets\fonts\FontAwesome.otf
assets\fonts\fontawesome-webfont.eot assets\fonts\fontawesome-webfont.eot
assets\fonts\fontawesome-webfont.svg assets\fonts\fontawesome-webfont.svg
assets\fonts\fontawesome-webfont.ttf assets\fonts\fontawesome-webfont.ttf
assets\fonts\fontawesome-webfont.woff assets\fonts\fontawesome-webfont.woff
assets\fonts\fontawesome-webfont.woff2 assets\fonts\fontawesome-webfont.woff2
js\angular.min.js js\angular.min.js
js\angular-cookies.min.js js\angular-cookies.min.js

Detail: all these fallback links are already 'work-arounds' im trying to get everything works fine at 'Add to home screen' event


Solution

  • After a while i realized that it was a css reference inside .css files. After add that references into manifest everything works like a charm