Develop Reference

How to force an update of a Single-page application

I work on a AngularJS Single-page application which once loaded (all the resources are fetched from the HTTP server) only accesses the REST backend to get/send data. The task is how to make sure users are always using the latest version of the frontend code (.js, .css and .html files) when the users never leave the page and never refresh the browser.
I think there are several options:
the frontend asks the HTTP server every N minutes what is the latest frontend code version
the backend includes the latest frontend code version in every response (e.g. an additional HTTP header) which is inspected by the frontend code
the backend returns a cookie with the latest frontend code version and checks if the version provided by the user is outdated
websocket connection between the browser and the backend (not an option for me)
Do you know other approaches?

you can also use html5 application cache, this way every time something changes, the website will update itself in the first visit, pretty handy and faster than ordinary cache.

Recently I have used the 2nd approach in my Agnularjs SPA. What I did is
In my angularjs APP's .htaccess and my API Server's .htaccess I have added a header:
<IfModule mod_headers.c>
Header add appVersion "1.2"
</IfModule>
Now I will receive this header whenever I am getting anything from API server or frontend(js, html, css, images)
now in my index.html i have defined a variable something like
var frontendVersion = 1.2
I have a http Response interceptor that will look for each response and I have done something like this
myAPP.factory('httpRespInterceptor', function () {
return {
response: function (response) {
var appVersion = response.headers('appVersion')
if(appVersion == frontendVersion) {
console.log('ok')
} else if (appVersion != null) {
location.reload();
}
return response;
}
};
});
I have added a null check because when i am loading a same view twice I am getting Empty Header Object and in my console i don't see any request that is being sent to the server..don't have a clue why this is happening if someone can shed a light it will be grateful :)
so whenever I will make a change in my code/update the application i will change my header appVersion to 1.3 and my index.html variable to var frontendVersion = 1.3
I hope this helps. And also Please let me know if there are best solutions other than this,
Thanks,

Why do I have differences with AJAX hosted local vs remote?

I guess part of my answer relates to "same-origin" but I'm not still not absolutely clear on when it applies and when not (or why it works in one instance, but is not a solution in other cases).
I am using latest jQuery, jQuery mobile and Apache/MySQL/PHP stacks. Client is either Windows 7/Firefox 38, or iPad/PhoneGap.
My AWS hosted php code serves the following to help resolve "same origin":
$http_origin = $_SERVER['HTTP_ORIGIN'];
header("Access-Control-Allow-Origin: $http_origin");
The Phone Gap version of my app works as expected, retrieving data from my AWS server and rendering the data it has retrieved.
Calling the exact same code from my laptop browser fails. Why?
If I copy/paste the AJAX URL into my browser, it correctly pulls the JSON data from AWS.
In an effort to resolve, I dump output to console.log. The jQuery AJAX "error" section gets called instead of the "success" portion. The same "error" result occurs if I call the index.html file (which calls JS) using File Open within Firefox, or if I call the locally apache hosted index.html file, jQuery ajax jumps to "error" section.
So if my phonegap app works, but my laptop does not, why? I mean, I see my app being akin to the laptop web browser. They both in effect have a different origin than my web server so I would expect either both work, or both fail.
If someone can help clarify it would be great - I have twice spent time chasing a problem that only exists in my dev environment but works just fine in production - its frustrating!
Thanks all in advance

Have you white listed domain in your phonegap config ?
http://docs.phonegap.com/en/4.0.0/guide_appdev_whitelist_index.md.html
ex:
Access to google.com:
<access origin="http://google.com" />
__ reading it should improve : https://github.com/phonegap/phonegap-app-developer/issues/169 __

DOM exception error 11 on swapCache()

I am playing with an application cache and having problems with the swapCache function.
I have created the world's simplest cache manifest file:
CACHE MANIFEST
# Timestamp: 2013-03-01 11:28:49
CACHE:
media/myImage.png
NETWORK:
*
Running the application for the 1st time gives me this in the console:
Creating Application Cache with manifest http://blah_blah/offline.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 1) http://blah_blah/media/myImage.png
Application Cache Progress event (1 of 1)
Application Cache Cached event
All well so far. Then I swap out the image and change the timestamp in the manifest file and get the following:
Adding master entry to Application Cache with manifest http://blah_blah/offline.appcache
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://blah_blah/media/myImage.png
Application Cache Progress event (1 of 2) http://blah_blah/Widget/?invoke=myWidgetFunctionName
Application Cache Progress event (2 of 2)
Application Cache UpdateReady event
At which point the applicationCache.swapCache() function is called giving me a DOM exception 11 error.
MIME types all correctly configured on the webserver.
Anyone got any ideas / can point me in the right direction?
(I have read all the commonly linked appcache stuff online and can't see what am I doing wrong)
Thanks!
EDIT:
As I mentioned in the comments below, setting the expires headers on my web server for *.appcache files to expire immediately seems to have it working although I am still getting the DOM exception error(!?). I found the following blog entry which may help:
Possible Fix for Offline App Cache INVALIDSTATEERR
...but I have no idea how to set the MIME types client side. My google-Fu skillz have deserted me. Anyone?

I had the same issue. For a while I just disabled the cache if the browser was not chrome, but then I decided to try again, setting the mime-type as suggested. Firefox no longer throws an exception when I call swapCache(), and the whole refreshing process now works as expected. The mime-type has to be set server-side since the request isn't initiated from your web page, but the browser, so you have no control over how it reads the response. You have a couple options here. If you are using apache or IIS, you can do as koko suggested. If you are using a framework that handles routing for you and you configure the mapping of URLs to responses, such as rails or a python wsgi server, then you can typically set the content type manually. Here is my snippet of what I am using in my Python app using Bottle.py (WSGI based):
# BEFORE
#bottle.route(r"/<path:re:.+\.(manifest|appcache)>", auth=False)
def serve_cache_manifest(path):
return bottle.static_file(path, SITE_DIR)
# AFTER
#bottle.route(r"/<path:re:.+\.(manifest|appcache)>", auth=False)
def serve_cache_manifest(path):
return bottle.static_file(path, SITE_DIR, mimetype='text/cache-manifest')
Bottle comes with a utility function that handles returning static files that I am using. It has an optional parameter to set the mime-type.
tl;dr If you can't add the mime-type to your server configuration, you can almost always set it in your server side code (if you have
any).

I would suggest trying to comment out the catchall NETWORK whitelist.
NETWORK:
# *
The * would seem to require network access for all file, according to
https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache
I commented out all NETWORK entries for now for a simple web application of mine and it works well.

405 error not allowed whereas I have javascript error [duplicate]

I am trying to host an ASP.NET MVC4 web application with IIS 7.5. When debugging the app everything works fine (I'm assuming this is because of Windows Authentication).
However, when I publish the app and browse to it I get a 405 Method not allowed error:
POST http://localhost/ 405 (Method Not Allowed)
send
i.extend.ajax
i.(anonymous function)
(anonymous function)
From what I've been reading this is either a problem with the Handler Mappings in IIS or some configuration is needed in the web.config. Either way, I have not found the correct solution.
Could anyone tell me what my web.config should include to all POSTS? And/or how to set up the correct Handler mapping in IIS, as I am new to web development and find the number of options a bit overwhelming.
The piece of javascript that throws the error is the following:
$.post("/", { latitude: locLat, longitude: locLon, username: $('#onlineUsers').attr('itemid') });

A 405 is thrown by IIS when an HTTP verb(GET,PUT,POST,DELETE,HEAD,etc.) is requested and is not supported/disallowed by the designated handler.
You'll need to open the IIS manager -> Default Web Site -> Handler Mappings (Or the handler mappings specific to your web-application)
In here you'll need to play with the handler mappings as one of them is not allowing "POST" verbs.
As you are not posting to any specific page (.aspx, .ashx, etc.), it will be difficult to identify the exact handler that is causing you issues.
Handlers of interest may be:
ExtensionlessUrlHandler-ISAPI-4.0_32bit /64bit
StaticFile
Once you identify the handler your request is being routed to, double click it to open the dialogue.
From there click "Request Restrictions" then "Verbs"
Make sure the appropriate verb is present in the text area.
As I mentioned before, I'm not sure which handler is handling your request as you are not posting to any particular page (you may have URL re-writing in place that is routing your request appropriately).
If the above fails, you may need to check if WebDAV Publishing is installed and remove it (restart required).

Maybe you should modify your post'URl format like this:
$.post('#Url.Content("~/Attach/UpdateAttach")'

some users here are having shared hosting and not dedicated servers, so they might not be able to get access to the IIS control panel..
this is my case and here is what I found..
I have my web application on the root directory created through Godaddy control panel.. and the POST request is acknowledged ..
then I used the FileZilla to create a testing folder for my jquery ..( notice i used FileZilla , so the web application and hence the IIS of GoDaddy is not aware that I wanted this folder to be part of my we application )
then whenever I test this jQuery on this testing folder.. I get that error [405 Method not allowed]..
the solution was extremely simple :
I moved my testing page out of that testing folder created by FileZilla and located it inside a folder that was created through Godaddy control panel ( in this case the IIS will be aware that this page is part of my web application :) )
Hope that will help those on Shared hosting

Referencing Page Method in ASP.Net Web Service

I am trying to access a page method from centralized module.
I tried putting it in a master page it didn't work
I tried putting it in a web service and did the following
added its path to the script manager that its existed in the master page
added a web service reference to the project
configured the web.config for the page methods
Also didn't work (kept telling me that "PageMethods is not defined" <- JavaScript error)
tried to access the page methods through http request from Javascript, got server error response (500)
What am I missing?

I followed example #2 at this link and it worked fine (the samples appear to be broken however): http://www.asp.net/Ajax/Documentation/Live/tutorials/ExposingWebServicesToAJAXTutorial.aspx
Here are the steps I took:
1) create a basic .asmx web service with 'HelloWorld' method
2) add the attribute [ScriptService] to the 'HelloWorld' method (and any methods in the web service that you want to call from your page script)
3) add a ScriptManager to the page, referencing the web service, and including InlineScript="true"
4) call the page from Javascript like this:
ServiceNamespace.ServiceClass.Method(parameters, callback);
function callback(result)
{
alert(result);
}
The fact that you're getting a 500 error tells me that there's an error in your web service. I would start here: can you open your web service URL in a browser successfully, and invoke its methods?