i am trying to clean my cache in a web application, so, i erase my css and put this function in my all.js archive, below document.ready:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
console.log("entered the function");
window.applicationCache.addEventListener('updateready', function(e) {
console.log("entered the function 2");
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
the problem is, it don't cleans my cache, after erase my css it still shows the old one, and the console.log("entered the function 2") is not printing as well.
can anybody helps, please?
thank you a lot!
I solve my problem doing:
// Check if a new cache is available on page load.
window.addEventListener('beforeload', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
don't think is the right way, but works
Related
Recently, I noticed that the drag and drop function was added back so that you could successfully drag an email from your Microsoft Outlook inbox to a web app's file upload. The issue is that once the file has been dragged to the web app, the email is moved to the Deleted folder in Outlook. Any ideas on how to resolve?
This issue can be solved by the web developper.
You can go to the following web page to see exemples with the different behaviors (copy, move, link) when we do a drag and drop in a browser:
https://codepen.io/SitePoint/pen/epQPNP
Put the following line into 'dragenter', 'dragover' and 'drop' event handler :
e.originalEvent.dataTransfer.dropEffect = "copy";
My code to solve the issue:
$('#myDropArea').on({
'dragenter': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.stopPropagation();
e.preventDefault();
$(this).addClass('draginprogress');
$(this).find('.DragText').css({ 'z-index': '1000' }).show()
},
'dragover': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
},
'dragleave': function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide();
},
'drop': function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide()
if (dataTransfer && dataTransfer.files.length) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
//DO DROP action
}
}
});
I hope this helps
Most likely you are doing move instead of copy.
I was reading about cache cleaning and update for my website, and i just can't figure it out what is the diffence in using a manifest or this function below:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
link: https://www.html5rocks.com/en/tutorials/appcache/beginner/
I build an html/js application (a progressive web app) with Polymer and polymer-cli and the well generated service-worker for caching and offline.
I wonder how to notify the user when a new version of the application is available and invite him to restart browser.
any ideas ?
Edit
a talk at IO2016 where Eric Bidel talk about service worker and notify user about new version of an application :
https://youtu.be/__KvYxcIIm8?list=PLOU2XLYxmsILe6_eGvDN3GyiodoV3qNSC&t=1510
Need to check the google IO Web source code
References:
https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
https://classroom.udacity.com/courses/ud899
// page script
document.addEventListener('DOMContentLoaded', function(){
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function(registration) {
console.info('ServiceWorker registration successful with scope:', registration.scope);
// if there's no controller, this page wasn't loaded
// via a service worker, so they're looking at the latest version.
// In that case, exit early
if (!navigator.serviceWorker.controller) return;
// if there's an updated worker already waiting, update
if (registration.waiting) {
console.info('show toast and upon click update...');
registration.waiting.postMessage({ updateSw: true });
return;
}
// if there's an updated worker installing, track its
// progress. If it becomes "installed", update
if (registration.installing) {
registration.addEventListener('statechange', function(){
if (registration.installing.state == 'installed'){
console.info('show toast and upon click update...');
registration.installing.postMessage({ updateSw: true });
return;
}
});
}
// otherwise, listen for new installing workers arriving.
// If one arrives, track its progress.
// If it becomes "installed", update
registration.addEventListener('updatefound', function(){
let newServiceWorker = registration.installing;
newServiceWorker.addEventListener('statechange', function() {
if (newServiceWorker.state == 'installed') {
console.info('show toast and upon click update...');
newServiceWorker.postMessage({ updateSw: true });
}
});
});
})
.catch(function(error) {
console.info('ServiceWorker registration failed:', error);
});
navigator.serviceWorker.addEventListener('controllerchange', function() {
window.location.reload();
});
}
});
// sw script
self.addEventListener('message', function(e) {
if (e.data.updateSw){
self.skipWaiting();
}
});
Thanks to IO team .. we need to check if the current service-worker becomes redundant
// Check to see if the service worker controlling the page at initial load
// has become redundant, since this implies there's a new service worker with fresh content.
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.onstatechange = function(event) {
if (event.target.state === 'redundant') {
// Define a handler that will be used for the next io-toast tap, at which point it
// be automatically removed.
const tapHandler = function() {
window.location.reload();
};
if (IOWA.Elements && IOWA.Elements.Toast &&
IOWA.Elements.Toast.showMessage) {
IOWA.Elements.Toast.showMessage(
'A new version of this app is available.', tapHandler, 'Refresh',
null, 0); // duration 0 indications shows the toast indefinitely.
} else {
tapHandler(); // Force reload if user never was shown the toast.
}
}
};
}
While AppCache checks the files to be cached, it lists it to the cache manifest file right? Is there anyway to check if this process is finished, including adding all the files to be cached in the cache manifest file?
There is no status available to check whether the download completed or not. But you can reload the browser to confirm the download using script.
<script>
// Check if a new cache is available on page load.
window.addEventListener('load', function (e) {
window.applicationCache.addEventListener('updateready', function (e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
if (confirm('A new version of this site is available. Load it?')) {
var appCache = window.applicationCache;
appCache.swapCache();
location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
</script>
I have a strange issue with my jquery mobile application. Below screen shot from Chrome Developer Tools Snapshot.
Why does my Pages or Scripts are cached even thiugh Have added
$.ajaxSetup ({
cache: false
});
Also in every ajax call which loads my ul > li have set cache:false.
Kindly let me know how can I overcome this scenario coz of this my Mobile cache is growing on every single click driving me nuts.
Thanks
Update :
Every time I click to navigate to another page this scripts get executed :
$('body').on('click', '.menuClass', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var menuid = $(this).attr('id');
if (menuid == '100001') {
settings.get('setval', function(obj) {
if(obj.value.tableMode == "1"){
$.mobile.changePage('categories.html', {
transition : "slide"
});
return false;
}
else{
$.mobile.changePage('index.html', {
transition : "slide"
});
}
});
}
});
But for somereasons the URL for categories.html loads on every click changing the url to
below
http://localhost:8080/categories?_=1347279588477
http://localhost:8080/categories?_=1347279584203
http://localhost:8080/categories?_=1347279688227
I don't know why cache:false doesn't work but i'm adding a time created string to prevent caching of ajax pages.
Doing this by adding &ts="+ new Date().getTime() to end of url .
Here is my usage ;
$.ajax({
type: "GET",
url: "ajax.php?ajax_file=ajax_table_page&ts="+ new Date().getTime(),
success: function(data){
..................
}
});
I also use this to trace ajax errors (you may add after document is ready )
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});