How to detect when an Ionic App is running on device with livereload
(Last Updated On: December 17, 2020)Ionic livereloadoption is great but there are special situations when you need to detect when an Ionic App is running on device with the livereload flag.
For example when you need to fetch data from a REST API and you have to use a PROXY so you do not get any Access-Control-Allow-Origin error livereload you have to edit some code so it will work with livereload but it could break your production build.
Since we are in an app with a browser environment we can just take a look to the “URL” used. Live reload uses HTTP as protocol but an APP without live reload uses the native File System (For example file:// in Android).
Check If we are in Android with livereload in Ionic 2/3:
if ((window as any).location.href.indexOf('file://') !== -1 ) {
console.warn("we are on device WITHOUT livereload ");
} else {
console.warn("We are on device with livereload");
}
Now you can make different actions if you need when using livereload
Update: Check if you are in livereload in Ionic 4
The previous way didn’t worked for Ionic 4. I created a feature request to the Ionic Team so they can implement a correct way to set this flag : https://github.com/ionic-team/ionic/issues/19297
In the mean time I have done a new workaround. You need to put this script in src/index.html at the beginning of the <head> tag (you can also put in an javascript file an load it). After that you will find a boolean in window.SSD.isLiveReload
<script>
// Proxy the WebSocket
const WebSocketProxy = new Proxy(window.WebSocket, {
construct: function (target, args) {
// create the regular WebSocket instance
const instance = new target(...args);
// Mark it as live reload when a new connection is openned.
const openHandler = (event) => {
console.log('[SSD] Setting isLiveReload as true');
if (window.SSD) {
window.SSD.isLiveReload = true;
} else {
window.SSD = {
isLiveReload: true
};
}
// We just need the first open connection.
instance.removeEventListener('open', openHandler);
};
// register the listener
instance.addEventListener('open', openHandler);
// return the previously created WebSocket instance
return instance;
}
});
// replace the native WebSocket with our proxy
window.WebSocket = WebSocketProxy;
</script>What is that doing?
Live reload uses a WebSocket to be able to refresh the page automatically. What we are doing is creating a proxy in the WebSocket class and adding the isLiveReload boolean into the Ionic object the first time a WebSocket Connection is made.
Take into consideration that if you are using WebSockets in your app, you should probably filter the messages to distinct them from the one that come from WebPack/Ionic Server
