오프라인 Chrome 패키지 애플리케이션 : Prod 및 Dev 모드를 관리하는 방법

Question

서버에서 dev/stage/prod를 전환하려면 ENV 변수를 설정합니다. 이것은 꽤 표준입니다.

오프라인 Chrome 앱을 사용하면 dev/stage/prod간에 전환하려면 어떻게해야하나요? 특히 REST API URL이 주위에 있습니까?

개발하는 동안 내 앱이 "풀린"앱으로 Chrome에 설치됩니다.

해결 방법 :

나는이 대답을 결합했다. 다음은 내가 한 일입니다.

1. 설치시 압축 해제 확장 프로그램을 사용하면 localStorage에 값을 설정합니다.

2. 실행시 변수를 localstorage 값으로 설정하거나 정의되지 않은 경우 프로덕션으로 설정합니다.

   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 (.이 각도이지만,이 패턴을 볼 약속이 ES6 있습니다)

FWIW, 여기에 코드입니다

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 코드가 완료되고 앱이 준비되면 알려주세요. $rootScope.$apply() 거품이 다른 범위까지 바뀝니다. Angular를 사용하지 않는 경우 제거 할 수 있습니다.

var debugTools = { 
    setAPIBaseURL: function (url) { 
    chrome.storage.local.set({'APIBaseURL': url}); 
    }, 
    showAPIBaseURL: function() { 
    chrome.storage.local.get('APIBaseURL', function(data) {console.log(data)}); 
    } 

} 

은 그래서 콘솔에서 변경 쉬웠다 :

는 또한 일부 디버그 툴이 코드를 포함.

Answer 1

를 참조하십시오, 나는 당신이 크롬 앱이이 크롬 웹 스토어에서 설치되어 경우에만 원격 서버와 통신 및 로컬 서버 때 얘기하고 싶지 생각하지 않는다 포장이 풀린 상태로 설치되었습니다. 설치 방법에 관계없이 어느 서버와 통화 할지를 선택하는 것이 좋을 것 같습니다.

그래서 로컬 스토리지의 키를 기반으로 서버를 선택하도록 앱을 프로그래밍 할 수 있습니다. 그런 다음 개발자 도구 패널 (자원) 탭에서 해당 키를 쉽게 설정할 수 있습니다. 키가 정의되지 않은 경우 키는 원격 서버를 사용합니다.

Answer 2

콘솔에서 chrome.runtime.getManifest().update_url은 상점에서 설치 한 경우 값을 갖습니다. 그렇지 않은 경우에는 정의되지 않습니다.

이 How to distinguish between dev and production in a Firefox extension I'm building? 그리고 당신의 설명에서 Check if Chrome extension installed in unpacked mode