Vraag HTML5-webapp wordt niet in cache opgeslagen wanneer deze in iOS wordt toegevoegd aan het startscherm


Voor de duidelijkheid, de web-app IS caching en werkt prima offline in Mobile Safari.

Het probleem is wanneer het wordt toegevoegd aan het startscherm op een iPhone 4s en iPad 2, beide met iOS 6.0.1. Het werkt niet offline en geeft een netwerkfout om verbinding te maken met internet, d.w.z. "Kan MYWEBAPP niet openen. MYWEBAPP kan niet worden geopend omdat het niet is verbonden met internet"

Ik debug dit voor verscheidene uren en kan geen oplossing schijnen te vinden. Ik ontvang geen fouten in de console en ik voer Jonathan Stark's aan foutopsporingscode

Ik heb de app getest in de ontwikkelaarstools van Desktop Safari, Chrome en Firefox, zowel online als offline. Evenals Web Inspector met de apparaten in Safari. Het resultaat is hetzelfde op iPhone of iPad. Ze cachen de webapp en werken in Mobile Safari, maar niet wanneer ze worden toegevoegd aan het startscherm. Geen fouten, offline of online.

Voor zover ik weet, gebruik ik best practices:

  1. HTML-header toegevoegd: <html manifest="photo.appcache"> 

    Ik heb ook geëxperimenteerd met het gebruik van verschillende namen voor het manifestbestand, waaronder: cache.manifest en offline.manifest toen ik las dat het een verschil maakt, maar in mijn tests maakt het niet uit wat de naam is zolang de extensies zijn. manifest of .appcache en wordt correct weergegeven in het .htaccess-bestand.

  2. Correcte MIME-typen toegevoegd: AddType text/cache-manifest appcache manifest

    Ik heb ook geprobeerd: AddType text/cache.manifest manifest,               AddType text/cache.manifest .manifest manifest, AddType text/cache-manifest .manifest

    Ik geloof niet dat dit werkte: AddType text/cache.manifest  maar ik kan het me niet herinneren. Voor het grootste deel deed het er niet toe en ik bleef bij:

    AddType tekst / cache-manifest appcache manifest

    als datgene wat in de HTML5 Mobile Boilerplate stond.

  3. Toegevoegd:

NETWERK: *

naar het appcache-bestand. Ik geloof dat dit alles toestaat om te downloaden en alle links te laten werken.

  1. Ik heb geprobeerd deze regel te verwijderen: <meta name="apple-mobile-web-app-capable" content="yes"> omdat ik hier op SO heb gelezen dat een probleem vergelijkbaar met het mijne is opgelost, maar ik kan bevestigen dat het niet werkt tijdens mijn testen. Het verwijderen van deze regel of het instellen van de inhoud op "nee" bij het indrukken van het startscherm, zal doorverwijzen naar Mobile Safari en niet op volledig scherm.

Ik heb het min of meer beperkt tot een bug in iOS 6 (ik gebruik zelfs iOS 6.0.1), omdat ik weet dat de gegevens nu zijn gescheiden voor web-apps in de browser en die zijn toegevoegd aan het startscherm . Ik plaats dit probleem hier om te kijken of andere ontwikkelaars hetzelfde probleem zijn tegengekomen.


15
2017-11-09 05:21


oorsprong


antwoorden:


Ik heb dit probleem opgelost. Ik raad het volgende aan voor web-apps op het startscherm in iOS 6.

Voor testdoeleinden gebruikt u de Web Inspector en een mooi JS-script zoals Jonathan Stark om te weten wanneer de app in Mobile Safari is gecacht:

http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

Nadat het in de cache is geplaatst, voegt u de app toe aan uw startscherm en laat u deze open zodat deze de startschermversie afzonderlijk in de cache kan opslaan. Het moet volledig cachen om offline te kunnen werken.

Omdat mijn app-cache 22 MB aan gegevens bevat en de cache van de gegevens apart is voor de web-app, was het probleem dat ik had de app op het startscherm niet lang genoeg geopend om te cachen.

Dit is vreselijk wat betreft gebruikerservaring, maar ook goed dat de gegevens gescheiden zijn. Ik kan dit bevestigen, want als u de websitegegevens uit Safari verwijdert, blijft de web-app voor het startscherm nog steeds werken.

Voor zover ik weet, is er geen manier om de gegevens in de cache te debuggen voor de web-app op het startscherm of waar deze is opgeslagen.


15
2017-11-09 18:43



Het bovenstaande antwoord was zeer nuttig. @aul zei dat hij geen manier wist om de web-app op het startscherm te debuggen, maar ik heb een manier gevonden.

Haak uw iPad of iPhone op uw computer, ga vervolgens in Safari naar> Ontwikkelen en selecteer uw apparaat. Je startschermapp moet open zijn om te verschijnen in het vervolgkeuzemenu. Zodra u de app opent, kunt u de foutconsole openen en kijken Het script van Jonathan Stark ga werken. Nadat het manifest is gedownload, kunt u de app in de offlinemodus gebruiken.


1
2018-01-23 22:15



Dit script maakte het leven gemakkelijker! Bedankt aan @Paul!

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);

setInterval(function(){cache.update()}, 10000);

1
2017-08-20 18:32



Ik had een probleem met twee delen. Ik was bezig met het genereren van mijn cachemodel met ASP.NET MVC / Razor omdat ik de site gemakkelijk van een virtuele applicatie kon hosten en de paden nog steeds op één lijn kon houden. Het inhoudstype werd niet goed ingesteld op het cachemanifest, dus Internet Explorer en Safari (iOS) werden niet herkend (hoewel Chrome op pc en Android zou werken).

Toen ik dat probleem eenmaal had opgelost, werkte het nog steeds niet toen ik via iOS Safari probeerde toegang te krijgen tot mijn door Azure gehoste app. Toen ik probeerde toegang te krijgen met Internet Explorer, zag ik dat het niet het juiste mime-type had voor een lettertype dat ik had.

Dus een woord van waarschuwing: wees absoluut zeker van het mime-type van niet alleen het manifest, maar ook alle bestanden waarvan het manifest afhankelijk is.


0
2018-05-08 18:36