Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webappok és offline működés

1,241 views

Published on

Developing offline webapps - the method.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Webappok és offline működés

  1. 1. Web app és offline működés
  2. 2. Miért? ● állandó elérhetőség ● felhasználói élmény ● sebesség ● energiatakarékos :)
  3. 3. Mikor? ● webalkalmazások ● single-page weboldalak ● statikus oldalak
  4. 4. Mikor ne? ● tartalomközpontú oldalak ● realtime alkalmazások
  5. 5. A böngészőből?
  6. 6. Hogyan? ● statikus elemek letárolása (html, js, css, jpg) ● dinamikus elemek letárolása (json, xml, csv) ● offline működés biztosítása
  7. 7. Statikus elemek ● browser cache ● service workers ● appcache
  8. 8. Statikus elemek ● browser cache - inkább ne alapozzunk rá ● service workers - nem eléggé támogatott ● app cache
  9. 9. app cache <html manifest="my.appcache"> CACHE MANIFEST # 2015-06-30 v1.0.0 CACHE: index.html script.js style.css NETWORK: login.php FALLBACK: /user/*.jpg img/user.jpg
  10. 10. app cache ● mindig a cache-ből húzza a fájlokat! ● csak a manifest fájl változásakor frissít ● manuálisan kell törölni ( swapCache() )
  11. 11. Dinamikus elemek ● localStorage ● indexedDB ● webSQL
  12. 12. Dinamikus elemek ● localStorage ● indexedDB - hiányos támogatottság ● webSQL - DEPRECATED! localForage ( github.com/mozilla/localForage )
  13. 13. localForage ● aszinkron működés ● mindig a megfelelő driver-t használja ● localforage.setItem('key','value').then(...) ● localforage.getItem('key', function(err, value) { alert(value) });
  14. 14. Offline vs online ● szinkronizálás ● api hívások megfelelő elszeparálása ● navigator.onLine - nem optimális ● OnlineJS ( https://github.com/PixelsCommander/OnlineJS )
  15. 15. Offline vs online
  16. 16. Tapasztalatok ● már tervezéskor is szem előtt kell tartani ● az utólagos átalakítás mindig körülményes ● a localstorage véges! ● http://offlinefirst.org
  17. 17. Köszönöm a figyelmet! Tóth Zoltán @totya24 totya@fps.hu www.fps.hu

×