Website zeigt JavaScript-Fehler auf dem iPad/iPhone unter 3G, aber nicht unter WiFi

Question

Verbinden mit http://www.manage-us.com auf einem iPad unter 3G [früher] führte zu einem JavaScript-Fehler, der angezeigt wird, wenn die Entwicklerkonsole aktiviert wurde. Wenn dieselbe Seite unter Verwendung einer WiFi-Verbindung über dasselbe iPad erreicht wird, wird kein Fehler angezeigt. [Der Fehler ist jetzt weg, weil ich die Korrektur unten anwendete!].

Warum ist das?

Ich habe versucht, niedrige Bandbreite (mit Dummy-Netzwerk) auf Safari auf Mac und auf dem iPad-Simulator auf dem Mac zu simulieren. Dies reproduziert das Problem nicht.

Ich vermute derzeit, dass dies ein Problem ist, das von meinem Mobilfunkbetreiber in Großbritannien (O2) eingeführt wird, der dafür bekannt ist, einige Inhalte über einen Proxy-Cache wie das Herunterstufen von Bilddateien zu ändern. Wenn Sie bestätigen können, dass dieses Problem bei der Verbindung per 3G auf dem iPad oder iPhone durch einen anderen Mobilfunkanbieter nicht auftritt, wäre das hilfreich.

Answer 1

Ich habe dies weiter untersucht und festgestellt, dass das Problem ist, dass der britische Mobilfunknetzbetreiber O2 (der ursprüngliche exklusive iPhone-Betreiber für Apple) Webinhalte vor dem Senden an iPhones und iPads ändert. Wahrscheinlich bevor Sie es an ein Gerät senden, auf dem ein mobiler Browser ausgeführt wird.

Sie fügen einige der CSS und JavaScript nichtdeterministisch in die Hauptquelldateien der Webseiten ein. Dies kann zu Fehlern führen, entweder aufgrund von Fehlern in ihrem Algorithmus oder der Folge, dass Leerraum aus Quellendateien mit syntaktischen Fehlern in den Quelldateien, die ansonsten gutartig sind, entfernt wird.

Diese Änderungen entfernen auch Copyright-Nachrichten von urheberrechtlich geschützten JavaScript-Bibliotheken und CSS-Bibliotheken und spielen Chaos mit Lieferungsoptimierungen.

Stellen Sie sich zum Beispiel vor, wenn ein Benutzer eine Reihe von Seiten auf Ihrer Website besucht, die alle auf jQuery-Bibliotheken verweisen. Anstatt Ihren mobilen Browser die Bibliothek lokal zwischenzuspeichern, ordnet O2 die Bibliothek auf jeder Seite ein und zwingt Ihr Telefon, die gesamte Bibliothek für jede Seite immer wieder neu zu laden.

Ich habe einen Blog über das Thema hier in der Hoffnung geschrieben, wenn ein bisschen mehr Aufmerksamkeit auf diese Zeichnung: http://stuartroebuck.blogspot.com/2010/07/mobile-proxy-cache-content-modification.html

Meine Abhilfe ist document.write() zu verwenden, um die JavaScript-Bibliothek Abhängigkeiten beim Laden einzusetzen und zu verhindern, dass O2 aus inlining sie. Das scheint recht gut zu funktionieren. z.B .:

<script type="text/javascript"> 
// <![CDATA[ 
// Using document.write to load JavaScript dependencies to bypass O2 network inlining of JavaScript. 
function loadJS(file){document.write("<" + "script type='text/javascript' src='" + file + "'></" + "script>")} 
loadJS("/js/jquery-1.4.2.min.js"); 
loadJS("/js/myJSLibrary.js"); 
// ]]> 
</script> 

zu beachten, dass, wie immer, wird document.write nicht funktionieren, wenn die Seite als XHTML serviert wird.

Answer 2

Für alle, die eine Lösung in ASP.NET benötigen, legt diese den Cache-Control-Header gemäß http://stuartroebuck.blogspot.com/2010/08/official-way-to-bypassing-data.html für Javascript-Dateien mit URL Rewrite Module 2.0 http://learn.iis.net/page.aspx/665/url-rewrite-module-20-configuration-reference.

<system.webServer> 
     <rewrite> 
      <outboundRules> 
       <rule name="Compression header" preCondition="Match JS Files"> 
        <match serverVariable="RESPONSE_Cache-Control" pattern="(.*)" /> 
        <action type="Rewrite" value="no-transform" /> 
       </rule> 
       <preConditions> 
        <preCondition name="Match JS Files"> 
         <add input="{RESPONSE_CONTENT_TYPE}" pattern="(javascript)$" /> 
        </preCondition> 
       </preConditions> 
      </outboundRules> 
     </rewrite> 

Alternativ kann mit einem Httpmodule

public class AddHeaderModule : IHttpModule 
{ 
    public void Init(HttpApplication context) 
    { 
     context.EndRequest += OnEndRequest; 
    } 

    void OnEndRequest(object sender, System.EventArgs e) 
    { 
     if(HttpContext.Current.Response.ContentType.Contains("javascript")) 
      HttpContext.Current.Response.Headers.AddHeader("Cache-Control", "no-transform"); 
    } 
} 

und

<configuration> 
    <system.web> 
     <httpModules> 
     <add name="AddHeaderModule" type="your.namespace.AddHeaderModule" /> 
     </httpModules> 
    </system.web> 
</configuration>