Cache Issue

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
This is for a devloper and some general help.
I wanted to run this by Rise. Before the cache changes was done on both image widgets, the widgets use to just send GET request. My Apps would answer and be done and everything worked. Now with the change to HEAD request with a failback to a GET Request i have noticed issues. I thought maybe it was my IOT app but after further inspection its occuring on android as well. Everything still works but here is what happens. When the widget sends the first HEAD request with the url i send back the location. Once the location is sent, the widgets sends the request to open the file. The file opens and shows, but then a GET request comes in asking for the same file as soon as it shows. I shouldnt be getting any GET Request because the HEAD request was answered. I checked headers and i should be ok with them but this never happened. It started once the HEAD request was added in as part of the cache. 

What else can i be missing?
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hi William,

I just ran the Image Widget on player and watched the Network tab in DevTools. I'm not seeing multiple GET requests to Rise Cache. I'm seeing one request per image and have tested both for a single image and a folder of images.

Can you clarify your Widget settings?

Thx.
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Im getting a HEAD request first and then as soon as i send the location back i get a GET request of the same file.  Im thinking its probably with my headers but i dont know why i would be getting both HEAD and GET Request of the same file. What are the correct headers for when you send the location of the file back to the widget? 

Now for my setup im doing a 302 found to tell the viewer the location of the file. This might be wrong but how else am i to tell the viewer where the file is located. The 302 redirects the file to my file server on android and shows the file.

My problem also could be where i serve the file to the widget as well. It might think there is an issue there and then sends the GET request. Im still thinking im sending bad headers.

My other question though is why is the widgets using both HEAD and GET request. It use to be just GET. Now i have to support both just get things to work.

Anyway let me know
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
Hi William,

Regarding the GET request that happens after your own response to the HEAD request, if I'm understanding your scenario right than the GET request is the browser requesting the image here so that it gets applied as the background image of the element. 

The reason we changed to make a HEAD request first was to check response details of the file without making Rise Cache download the contents of the file. The reason there is a GET request fallback to a HEAD request failure here is because HEAD requests aren't permitted at the time being on our Chrome App Player. 

Hope this helps.

Thanks
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Ok i figure it out to the point where im trying to serve the file back to the widget. What i have done was not support HEAD request and that seemed to fix my double request issue. Now i just get the GET request like normal. My next issue comes when trying to serve the file back to the widget. The error that i end up with is 
Origin http://s3.amazonaws.com not found in Access-Control-Allow-Origin header.

In my header i have the correct access header but it still throws that error. 
(Edited)
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
OK i now can confirm its something in my headers when sending info back to the widget because doing an html item with an image page with localhost brought up the file with no issue. So its something with sending the location of the file. Can you all send me the headers that are required when a file exist or after its been downloaded to cache. Im so close to getting windows iot to work and i know im missing something. 
Hi William,

These are the headers rise cache sends to the widget 
HTTP/1.1 200 OK
Date: Thu, 10 Feb 2016 14:13:45 GMT
Server: Rise Cache
Access-Control-Allow-Origin: *
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Content-Type: text/javascript; charset=UTF-8
Content-Length: 22
Is that what you need?
Cheers
(Edited)
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Thats for the ping. Im looking for the headers after the file is downloaded or checked. I wanted to see how your sending the location of the file. Thanks
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
OK i finally got a regular single image to work with my cache server and it seems to work when i add multiple images as well so that part seems to be working. My next issue seems to be from the image widget when using the folder. I end up with an error like this, 

Unhandled exception at line 1, column 14813 in http://s3.amazonaws.com/widget-image/0.1.1/dist/js/widget.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'toLowerCase' of undefined or null reference

I checked using a single image to be sure i wasnt getting the same error and it seems to be that the error only comes from the image widget when im using a folder. I am sending the same headers as i would if i have a single image so i didnt know if there was something different that might be different. 

Thanks 


Edit: i forgot to add that i get this error on every image when i send back the location. 
(Edited)
Hi William,

Could you change the widget url on the html of your presentation?

From:
http://s3.amazonaws.com/widget-image/0.1.1/dist/widget.html

To:
http://s3.amazonaws.com/widget-image-test/stage-1-dev/0.1.1/dist/widget.html

This will use a non minified version of the widget so we can know exactly where it is failing.

Cheers
I don't think it has to do with the headers. The file url must be a valid one from a rise storage file. Could you confirm that is correct?

Could you step through on the debug mode and check what is the file url in this line https://github.com/Rise-Vision/widget-image/blob/master/dist/js/widget.js#L1236?

cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
It is valid because i can cache the file and download the file from storage. I get that far with no issue. If the file wasnt valid i wouldnt be getting the download request or the file request. Correct? I can download the file but this error happens right after i send back the location. 

I will look at more debugging and get back with you tomorrow. Been busy :)
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Could you change the widget js file to the link below. That way i can step through to see what happening. 

http://scottsdigitalsignage.com/widget/widget-image/dist/js/widget.js 
Hi William,

This version should have the js you provided above.

http://s3.amazonaws.com/widget-image-test/0.1.1/dist/widget.html

cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Thanks. I did what you said by adding it in on the html and im working on finding where the issue is at. Im getting undefined in the e.details.url. Still walking through this. Its a slow process because im having to unistall the app every time. :)
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
When you send back the location of the file what does your url look like? I think when im sending the url, im sending the wrong thing which is giving the undefined url. Thanks

Edit. This is for the image folder. :)
(Edited)
This is an example of url it sends back to the widget: 

localhost:9494/?url=https%3A%2F%2Fstorage.googleapis.com%2Frisemedialibrary-30007b45-3df0-4c7b-9f7f-7d8ce6443013%2Flogo.png

There is a peace of code that parses this url taking the name of the file.

cheers 
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
It use to not be that way. Use to i was able to download the file and then tell the widget where the location of that file is at. It didnt matter what port. It pulled from the url sent back. Now having hard coding your port doesnt help much. Im going to completely have to change my android and IOT apps because of this change. Also can you provide the full complete header you send after you download a file? I will need that just so i can match up when working on a way that you have it now. Thanks
Hi William,

Could you clarify one thing for me? Are you trying to use rise storage files or 3rd party files? I mean when selecting the file do you choose single image, folder image or custom url option?

Cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Let me get you a run down through the process. We are using rise storage on all files. 

We get the initial ping and respond.
We get the file/files request. 
If exist we respond/if not we download then respond.

My problem has been with the responce. Since the localhost and port are hard coded. I wanted to see the headers you send back after downloading the file. 

Hope that helps. Thanks
Alright, this is the headers after the file is download

HTTP/1.1 200 OKDate: Wed, 17 Feb 2016 16:51:14 GMT
Server: Rise Cache
Access-Control-Allow-Origin: *
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Last-Modified: Mon, 18 Jan 2016 21:26:41 GMT
ETag: "c9f9670c8a175e0181b5d5239554ce3a"
Content-Type: image/png
Content-Length: 132076
File-URL: https://storage.googleapis.com/risemedialibrary-30007b45-3df0-4c7b-9f7f-7d8ce6443013/logo.png
Accept-Ranges: bytes

Cheers
(Edited)
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
OK i got android working again but i think my issue is with
 https://github.com/Rise-Vision/widget-image/blob/master/dist/components/rise-storage/rise-storage.ht...

The reason i say this is because on my android library v45 it gets the correct url but on anything lower it seems to be undefined. I believe windows IOT is doing the same thing by getting undifined. I wonder if there is a way to get the url if that is null or blank. Maybe add this below.

if(file.url == null){
file.url = resp.xhr.getResponseHeader("Location");
}
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
I did some more research and found that this line of xhr.responseURL is only supported by chrome 37 and above and firefox 32 and above. No IE support. The question i would like to know is there a way that this line could be changed to something that all browsers could use. The reason for this, windows IOT is IE based so that eliminates that and android 4.4 device webview is webkit based which kills that. Im hoping there is an alternative to that because its the only thing that is stopping me from releasing another beta test for windows IOT.   
Hi William,

We have queued up the work. I will let you know when it is deployed.

cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
Thanks for helping on all this. Its always fun finding that one line of code that makes everything not work. Im also surprised that the line of code isnt supported on everything. Its always something. Thanks for everything you all do and helping. 
Hey William,

I have implemented the fallback as you can see here: https://github.com/Rise-Vision/web-component-rise-storage/pull/81/files

It will read the 'Location' header attribute.

Could you please test if that works for you with the image widget hosted on the following?

widget: http://s3.amazonaws.com/widget-image-test/stage-0/0.1.1/dist/widget.html
settings: http://s3.amazonaws.com/widget-image-test/stage-0/0.1.1/dist/settings.html

Cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
I get a Refused to get unsafe header "Location". I tried adding Access-Control-Expose-Headers: Location to my headers and still got that. ANy idea why?
Hey William,

Could you check if this header option is supported by IE?

cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
This happened on an older version of chrome as well so its something with cors. Have figure it out yet. 
I could not find anything that would be wrong on the javascript client side. It must be something in the server side. I would check if the headers are set correctly and the browser is receiving it.

cheers
Photo of William Oneal

William Oneal, Champion

  • 13,770 Points 10k badge 2x thumb
I think i have it now. I ended up switching on the HEAD request and it seemed to work now. I also did a small change to the first header. In a 302 found situation the Location header cant be access by javascript. Hints why we get a refusal when we are trying to get the location. In a 200 OK it does get the location. The funny thing is that when i do 200 OK in android your hard coded port keeps me from using my own file server to serve out files. On IOT this doesnt happen. It uses the location i sent. 

I do hope though at some point the hard coded port of the widget would go away. I wish the player would send the correct location instead of the widget doing it for you. 

Anyway i think this is answered now. I can now mark that off the list. 

Thanks for all the help