Transferir como PDF, PPTX
![// /js/sw.js
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/index.html',
'/js/app.js',
'/css/styles.css',
'/images/gallery/jurassic_park.jpg'
]);
})
);
});](https://image.slidesharecdn.com/jurassic-javascriptpark-rodando-offline-ate-na-ilha-nublar-160610194330/85/Jurassic-JavaScript-Park-Rodando-Offline-ate-na-ilha-Nublar-24-320.jpg)
![// name, version, description, size (bytes)
var db = openDatabase("dinos", "1", "todo list example db",
2 * 1024 * 1024);
// executeSql
// (SQL string, arguments, success, error)
db.transaction(
function (tx) {
tx.executeSql(
"CREATE TABLE IF NOT EXISTS dinos (id INTEGER
PRIMARY KEY AUTOINCREMENT, name TEXT)",
[],
function (tx, results) {
console.log("ok!");
},
function (err) {
console.log("error!", err);
}
);
}
);](https://image.slidesharecdn.com/jurassic-javascriptpark-rodando-offline-ate-na-ilha-nublar-160610194330/85/Jurassic-JavaScript-Park-Rodando-Offline-ate-na-ilha-Nublar-46-320.jpg)
![db.transaction(
function (tx) {
tx.executeSql( "SELECT * FROM dinos WHERE id > ?",
["1"],
function (tx, results) {
var row = "";
for (var i=0; i<results.rows.length; i++) {
console.log("Dino name:", results.rows.item(i).name);
}
},
function (err) {
console.log("query problems...", err);
}
);
},
function (err) {
console.log("transaction problems...", err);
}
);](https://image.slidesharecdn.com/jurassic-javascriptpark-rodando-offline-ate-na-ilha-nublar-160610194330/85/Jurassic-JavaScript-Park-Rodando-Offline-ate-na-ilha-Nublar-47-320.jpg)
![db.transaction(
function (tx) {
tx.executeSql( "INSERT INTO dinos(name) VALUES(?)",
["Megalosaurus"],
function ( tx, results ) {
console.log("ok! inserted!");
},
function (err) {
console.log("not inserted :(");
}
);
},
function (err) {
console.log("inserting problems...", err);
},
function () {
console.log("transaction completed!");
}
);](https://image.slidesharecdn.com/jurassic-javascriptpark-rodando-offline-ate-na-ilha-nublar-160610194330/85/Jurassic-JavaScript-Park-Rodando-Offline-ate-na-ilha-Nublar-48-320.jpg)
![request.onsuccess = function (event) {
db = event.target.result;
var trans = db.transaction(["dinos"], "readwrite");
var transRequest = trans.objectStore("dinos");
transRequest.onsuccess = function (event) {
var result = transRequest.result || event.result;
if (!result) return;
console.log("dino", result.key, result.value.text);
cursor.continue();
}
var dinoName = "Velociraptor";
var storeRequest = transRequest.put(dinoName);
storeRequest.onsuccess = function (event) {
console.log(event.target.result)
}
storeRequest.onerror = function (event) {
console.log(event)
}
};](https://image.slidesharecdn.com/jurassic-javascriptpark-rodando-offline-ate-na-ilha-nublar-160610194330/85/Jurassic-JavaScript-Park-Rodando-Offline-ate-na-ilha-Nublar-55-320.jpg)
Carregado porCreditas
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
O documento discute estratégias para melhorar a experiência do usuário em ambientes offline, como cache de arquivos no navegador usando Application Cache e Service Workers, além de formas de armazenar dados localmente como cookies, localStorage, WebSQL e IndexedDB. O texto também apresenta bibliotecas como localForage para simplificar o uso dessas APIs.
Mais conteúdo relacionado
Semelhante a Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
- 1. JurassicJavaScriptParkRodando offline aténa Ilha Nublar!
- 2.
- 3. Seu empréstimo certo.Com garantia. Online.
- 4.
- 6.
- 7. MÉDIA DE CONEXÃOMÓVEL 2,5MB 20,4MB 8,8MB http://www.reclameaqui.com.br/noticias/noticias/com-media-de-velocidade-abaixo-da-mundial-internet-brasileir_1585/
- 9. COMO ISSO DEVERIA IMPACTARNOSSO DESENVOLVIMENTO?
- 10. UX Sensação de rapidez Nãodeve ser frustrante Deve ser honesta sobre conectividade Não deve perder informações
- 11. TÁ, E COMOFAZ?
- 12. APPLICATION CACHE CACHE DEARQUIVOS NO BROWSER
- 13.
- 15. PROBLEMAS O AppCache sóatualiza o conteúdo do manifesto se ele mesmo for atualizado Os arquivos sempre virão do ApplicationCache mesmo se você estiver online … Recomendo fortemente a leitura: http://sergiolopes.org/palestra-appcache-html5-offline/
- 17.
- 19. MAS AINDA NÃOÉ O IDEAL… O Application Cache é ok para cachear assets Mas precisamos de algo mais evoluído para controlar de forma programática, sem modo texto
- 21.
- 22. O FUTURO DOCACHE NO BROWSER SERVICE WORKERS
- 23. if ('serviceWorker' innavigator) { navigator.serviceWorker.register( '/js/sw.js', { scope: '/' } ).then(function(reg) { if(reg.installing) { console.log('Service worker installing'); } else if(reg.waiting) { console.log('Service worker installed'); } else if(reg.active) { console.log('Service worker active'); } }).catch(function(error) { // registration failed console.log('Registration failed with ' + error); }); };
- 24. // /js/sw.js this.addEventListener('install', function(event){ event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ '/index.html', '/js/app.js', '/css/styles.css', '/images/gallery/jurassic_park.jpg' ]); }) ); });
- 25. this.addEventListener('fetch', function(event) { varresponse; event.respondWith(caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/images/gallery/jurassic_park.jpg'); })); });
- 28. MAS VAMOS FALAR SOBREDADOS Como faço pra armazenar informações além de assets?
- 29. FORMAS DE SE ARMAZENARDADOS • cookies • localStorage • WebSQL • IndexedDB
- 30. COOKIE Forma mais primitivade armazenar informação no browser
- 31. document.cookie = "dino=T-Rex"; document.cookie= "dino=T-Rex;expires=Fri, 31 Dec 9999 23:59:59 GMT";
- 33.
- 34. Cookies.set("dino", "Velociraptor", {expires: 7 }); Cookies.get("dino"); // returns "dino" Cookies.remove("dino");
- 35. PRÓS CONTRAS Simples deimplementar Sem uma biblioteca o controle fica complicado Browsers suportam amplamente Problemas de segurança (Cookie stealing e XSS, CSFR, etc.) Ótimo para informações curtas Limite de 4093 bytes
- 36. LOCALSTORAGE Forma mais moderninhade armazenamento
- 37. localStorage.setItem("dino", "Aragosaurus"); localStorage.getItem("dino"); // returns"Aragosaurus" localStorage.dino = "Aragosaurus";
- 39.
- 40. basket.require( { url: "jquery.js"}, { url: "underscore.js" }, { url: "backbone.js" } ); basket.require({ url: "jquery.min.js", key: "jquery" }); var req = basket.get("jquery");
- 41.
- 42. store.set("dino", "Datousaurus"); store.get("dino"); // returns"Datousaurus" store.remove("dino"); store.clear(); store.set("dino", { name: "Datousaurus", diet: "herbivorous" });
- 44. PRÓS CONTRAS Fácil implementaçãoLimite de 5M por domínio Amplo suporte É síncrono Melhor segurança Os dados ficam lá eternamente, mesmo não visitando mais o site
- 45. WEBSQL SQL no seubrowser
- 46. // name, version,description, size (bytes) var db = openDatabase("dinos", "1", "todo list example db", 2 * 1024 * 1024); // executeSql // (SQL string, arguments, success, error) db.transaction( function (tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS dinos (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)", [], function (tx, results) { console.log("ok!"); }, function (err) { console.log("error!", err); } ); } );
- 47. db.transaction( function (tx) { tx.executeSql("SELECT * FROM dinos WHERE id > ?", ["1"], function (tx, results) { var row = ""; for (var i=0; i<results.rows.length; i++) { console.log("Dino name:", results.rows.item(i).name); } }, function (err) { console.log("query problems...", err); } ); }, function (err) { console.log("transaction problems...", err); } );
- 48. db.transaction( function (tx) { tx.executeSql("INSERT INTO dinos(name) VALUES(?)", ["Megalosaurus"], function ( tx, results ) { console.log("ok! inserted!"); }, function (err) { console.log("not inserted :("); } ); }, function (err) { console.log("inserting problems...", err); }, function () { console.log("transaction completed!"); } );
- 52. PRÓS CONTRAS Banco dedados no browser Sintaxe SQL pode assustar quem não está acostumado Performance razoável Deprecated. Apenas alguns browsers ainda dão suporte. Não é full SQL supported. Crash com muitos dados (10,000 rows já apresenta certa lentidão)
- 53. INDEXEDDB like a localStorage,but coolest
- 54. var request =window.indexedDB.open("DinoDatabase", 1); request.onerror = function (event) { console.log("Error", event.target.errorCode); }; request.onupgradeneeded = function (event) { db = event.target.result; if ( db.objectStoreNames.contains("dinos") ) { db.deleteObjectStore("dinos"); } var store = db.createObjectStore("dinos", { autoIncrement: true }); };
- 55. request.onsuccess = function(event) { db = event.target.result; var trans = db.transaction(["dinos"], "readwrite"); var transRequest = trans.objectStore("dinos"); transRequest.onsuccess = function (event) { var result = transRequest.result || event.result; if (!result) return; console.log("dino", result.key, result.value.text); cursor.continue(); } var dinoName = "Velociraptor"; var storeRequest = transRequest.put(dinoName); storeRequest.onsuccess = function (event) { console.log(event.target.result) } storeRequest.onerror = function (event) { console.log(event) } };
- 58. PRÓS CONTRAS Mais evoluídoque localStorage Suporte em browsers modernos Pode trabalhar com uma quantidade maior de dados Se o usuário fechar o browser no meio de uma transaction, o dado se perde Pode trabalhar em Workers Mais complexo que as outras formas de armazenamento Tem índices
- 59.
- 60.
- 61.
- 62.
- 63. OK, MAS TUDO ISSOAINDA PARECE MUITO COMPLICADO...
- 64.
- 65. // In localStorage,we would do: var obj = { value: "Dinofauro" }; localStorage.setItem("dino", JSON.stringify(obj)); console.log(obj.value); // With localForage, we use callbacks: localforage.setItem("dino", obj, function (err, result) { console.log(result.value); });
- 66. localforage.getItem("dino", function(err, value){ if (err) { console.error(“Oops...”); } else { console.log("Dino:", value); } });
- 69. var db =new PouchDB("dinoDB"); db.put({ _id: 1, name: "Dinofauro Fefiz" }); db.changes().on("change", function () { console.log("Alterou alfuma foisa"); }); db.replicate.to("http://dinofauro.com/dinoDB");
- 71. AGORA SIM! PODEMOSRODAR NOSSA APLICAÇÃO ATÉ NA ILHA NUBLAR!!!
- 72. NÃO É SÓPOR DIVERSÃO É QUESTÃO DE UX!!!
- 74. SEJA SENSATO! Em algunscasos o cenário offline nem pode existir, como em serviços de chat, transmissão de áudio e vídeo, e etc. O esforço vale a pena somente quando o cenário pede esse tipo de arquitetura
- 76.