Off-line Chrome Packaged App: how to manage Prod and Dev modes - angularjs

Question

To switch between dev/stage/prod on the server, I set an ENV variable. This is pretty standard.
With an Off-line Chrome App, how do I switch between dev/stage/prod? Especially around REST API URL's?
During development my app is installed in chrome as an "unpacked" app.
SOLUTION:
I combined these answers. Here's what I did:
On install, if unpacked extension, I set a value in localStorage.
On app run, I set a variable to the localstorage value, or to production if undefined.
FWIW, here's the code:
background.js:
chrome.runtime.onInstalled.addListener(function () {
console.log('onInstalled');
// Note: this event is fired every time the "Reload" link is clicked in
// 'Chrome Apps & Extensions Developer Tool'. So only set if not set.
// If unpacked extension,
if(!chrome.runtime.getManifest().update_url) {
// Load existing value
chrome.storage.local.get('APIBaseURL', function(data) {
// Has value already been set?
if (!data.hasOwnProperty('APIBaseURL')) {
// set API server to localhost
chrome.storage.local.set({'APIBaseURL': DEV_APIBASEURL }, function() {
// Ok, notify the console.
console.log('Installed in dev mode: APIBaseURL = '+DEV_APIBASEURL);
} );
}
});
}
});
App.js (this is Angular, but you should see the pattern. Promises are ES6)
var PROD_APIBASEURL = 'https://production.com';
angular.module('wmw', ['wmw.routes'])
// Listen for online/offline events and set status in $rootScope
.run(['$rootScope', function($rootScope){
// Determine which server to run on
$rootScope.isDev = chrome.runtime.getManifest().hasOwnProperty('update_url');
// Async init code is in a Promise
$rootScope.promiseAppReady = new Promise(function(resolve, reject) {
// Get the Base URL
chrome.storage.local.get('APIBaseURL', function(data) {
// Apply it to our scope. If not set, use PROD.
$rootScope.$apply(function() {
if (data.hasOwnProperty('APIBaseURL')) {
$rootScope.APIBaseURL = data.APIBaseURL;
} else {
$rootScope.APIBaseURL = PROD_APIBASEURL;
}
resolve($rootScope.APIBaseURL);
});
});
});
}]);
$rootScope.promiseAppReady let's me know when the code is done and the app is ready.
$rootScope.$apply() bubbles changes up to other scopes. If you're not using Angular, you can remove this.
I also included this code with some debug tools:
var debugTools = {
setAPIBaseURL: function (url) {
chrome.storage.local.set({'APIBaseURL': url});
},
showAPIBaseURL: function() {
chrome.storage.local.get('APIBaseURL', function(data) {console.log(data)});
}
}
so it was easy to change in the console.

Answer 1

In the console chrome.runtime.getManifest().update_url will have a value if installed from the store. Undefined if not.
See How to distinguish between dev and production in a Firefox extension I'm building?
And Check if Chrome extension installed in unpacked mode

Answer 2

From your description, I don't think you want the Chrome App to only talk to the remote server when it's installed from the Chrome Web Store and only talk to the local server when it's installed unpacked. I would think that you'd want the option of talking to either server no matter how it's installed.
So, I'd program the app to choose its server based on a key in Local Storage. You can then easily set that key from the Developer Tools panel (the Resources) tab. If the key is undefined, it uses the remote server.