Offline eerst

Omdat internetverbindingen zwak kunnen zijn of niet bestaan, moet u eerst offline overwegen: schrijf uw app alsof deze geen internetverbinding heeft. Zodra uw app offline werkt, voegt u de netwerkfunctionaliteit toe die u nodig heeft, zodat uw app meer kan doen wanneer deze online is. Lees verder voor tips over het implementeren van uw offline-app.

Overzicht

Chrome-apps krijgen het volgende gratis:

  • De bestanden van uw app (alle JavaScript, CSS en lettertypen, plus andere bronnen die de app nodig heeft (zoals afbeeldingen)) zijn al gedownload .
  • Uw app kan kleine hoeveelheden gegevens opslaan en optioneel synchroniseren met behulp van de Chrome Storage API .
  • Uw app kan veranderingen in de connectiviteit detecteren door te luisteren naar online en offline gebeurtenissen .

Maar deze mogelijkheden zijn niet voldoende om te garanderen dat uw app offline werkt. Uw offline-app moet aan deze regels voldoen:

Maak waar mogelijk gebruik van lokale data.
Wanneer u bronnen van internet gebruikt, gebruikt u XMLHttpRequest om deze op te halen en slaat u de gegevens vervolgens lokaal op. U kunt de Chrome Storage API, IndexedDB of Filesystem API gebruiken om gegevens lokaal op te slaan.
Scheid de gebruikersinterface van uw app van de gegevens.
Door de gebruikersinterface en gegevens te scheiden, verbetert u niet alleen het ontwerp van uw app en wordt het offline gebruik eenvoudiger, maar kunt u ook andere weergaven van de gegevens van de gebruiker bieden. Een MVC-framework kan u helpen de gebruikersinterface en gegevens gescheiden te houden.
Stel dat uw app op elk moment kan worden gesloten.
Bewaar de applicatiestatus (zowel lokaal als op afstand, indien mogelijk), zodat gebruikers verder kunnen gaan waar ze gebleven waren.
Test uw app grondig.
Zorg ervoor dat uw app goed werkt in zowel veelvoorkomende als lastige scenario's .

Beveiligingsbeperkingen

Chrome-apps hebben een beperkt aantal plaatsen waar ze hun bronnen kunnen plaatsen:

  • Omdat lokale gegevens zichtbaar zijn op de computer van de gebruiker en niet veilig kunnen worden gecodeerd, moeten gevoelige gegevens op de server blijven . Bewaar wachtwoorden of creditcardnummers bijvoorbeeld niet lokaal.
  • Alle JavaScript die de app uitvoert, moet zich in het pakket van de app bevinden. Het kan niet inline zijn.

  • Alle CSS-stijlen , afbeeldingen en lettertypen kunnen zich aanvankelijk in het app-pakket of op een externe URL bevinden. Als de bron extern is, kunt u deze niet in uw HTML opgeven. Haal de gegevens in plaats daarvan op met behulp van XMLHttpRequest (zie Verwijzen naar externe bronnen ). Verwijs vervolgens naar de gegevens met een blob-URL of (beter nog) sla de gegevens op en laad ze vervolgens met behulp van de Filesystem API .

U kunt echter grote mediabronnen zoals video's en geluiden van externe sites laden. Eén reden voor deze uitzondering op de regel is dat de elementen <video> en <audio> goed terugvalgedrag vertonen wanneer een app beperkte of geen connectiviteit heeft. Een andere reden is dat het ophalen en aanbieden van media met XMLHttpRequest en blob-URL's momenteel geen streaming of gedeeltelijke buffering toestaat.

Om een ​​iframe in een sandbox te maken, kunt u een <webview> -tag maken. De inhoud kan op afstand staan, maar heeft geen directe toegang tot de API's van de Chrome-app (zie Externe webpagina's insluiten ).

Sommige beperkingen op Chrome-apps worden afgedwongen door het Content Security Policy (CSP), dat altijd het volgende is en niet kan worden gewijzigd voor Chrome-apps:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

Offline_enabled opgeven

Er wordt van uitgegaan dat uw app zich offline goed gedraagt. Als dit niet het geval is, moet u dit feit bekendmaken, zodat het startpictogram grijs wordt weergegeven wanneer de gebruiker offline is. Om dit te doen, stelt u offline_enabled in op false in het app-manifestbestand :

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

Gegevens lokaal opslaan

De volgende tabel toont uw opties voor het lokaal opslaan van gegevens (zie ook Gegevens beheren ).

API Beste gebruik Opmerkingen
Chrome-opslag-API Kleine hoeveelheden stringgegevens Geweldig voor instellingen en staat. Gemakkelijk op afstand te synchroniseren (maar dat hoeft niet). Niet goed voor grotere hoeveelheden gegevens vanwege quota.
GeïndexeerdeDB-API Gestructureerde gegevens Maakt snel zoeken op gegevens mogelijk. Gebruik met de toestemming unlimitedStorage .
Bestandssysteem-API Nog iets anders Biedt een sandboxgebied waar u bestanden kunt opslaan. Gebruik met de toestemming unlimitedStorage .

Gegevens op afstand opslaan

Over het algemeen bepaalt u zelf hoe u gegevens op afstand opslaat, maar sommige frameworks en API's kunnen u helpen (zie MVC-architectuur ). Als u de Chrome Storage API gebruikt, worden alle synchronisatiegegevens automatisch gesynchroniseerd wanneer de app online is en de gebruiker is ingelogd bij Chrome. Als de gebruiker niet is aangemeld, wordt hem gevraagd zich aan te melden. Houd er echter rekening mee dat de gesynchroniseerde gegevens van de gebruiker worden verwijderd als de gebruiker uw app verwijdert. {VRAAG: waar?}

Overweeg om de gegevens van gebruikers ten minste 30 dagen te bewaren nadat uw app is verwijderd, zodat gebruikers een goede ervaring hebben als ze uw app opnieuw installeren.

UI scheiden van gegevens

Met behulp van een MVC-framework kunt u uw app zo ontwerpen en implementeren dat de gegevens volledig gescheiden zijn van de weergave van de app op de gegevens. Zie MVC-architectuur voor een lijst met MVC-frameworks.

Als uw app met een aangepaste server praat, moet de server u gegevens geven, geen stukjes HTML. Denk in termen van RESTful API’s.

Zodra uw gegevens gescheiden zijn van uw app, is het veel eenvoudiger om alternatieve weergaven van de gegevens te bieden. U kunt bijvoorbeeld een websiteweergave van openbare gegevens opgeven. Een websiteweergave kan niet alleen handig zijn wanneer uw gebruiker Chrome niet gebruikt, maar het kan zoekmachines ook in staat stellen de gegevens te vinden.

Testen

Zorg ervoor dat uw app goed werkt onder de volgende omstandigheden:

  • De app wordt geïnstalleerd en gaat vervolgens onmiddellijk offline. Met andere woorden: het eerste gebruik van de app is offline.
  • De app wordt op de ene computer geïnstalleerd en vervolgens met een andere computer gesynchroniseerd.
  • De app wordt verwijderd en vervolgens onmiddellijk opnieuw geïnstalleerd.
  • De app draait tegelijkertijd op twee computers, met hetzelfde profiel. De app moet zich redelijk gedragen als een computer offline gaat, de gebruiker een heleboel dingen op die computer doet en de computer vervolgens weer online komt.
  • De app heeft intermitterende connectiviteit en schakelt vaak tussen online en offline.

Zorg er ook voor dat de app geen gevoelige gebruikersgegevens (zoals wachtwoorden) opslaat op de computer van de gebruiker.