翻訳|既存のWebアプリケーションとElectronの統合「JavaScriptEverywhere」の第19章

翻訳|既存のWebアプリケーションとElectronの統合「JavaScriptEverywhere」の第19章

一番上に書く

みなさん、こんにちは。フロントエンド開発エンジニアのMaoXiaoyouです。英語の技術書が翻訳されています。

みんなの読書体験を向上させるために、文章の構造と内容がわずかに調整されました。この記事に欠陥を見つけた場合、またはコメントや提案がある場合は、コメント領域にメッセージを残すか、WeChat：code_maomaoを追加して、お互いにコミュニケーションを取り、学び合うことを歓迎します。

（σﾟ∀ﾟ）σ…：*☆ああ、いいね

第19章既存のWebアプリケーションとElectronの統合

子供のようにビーチで貝殻を集めるように、ブラウザのブックマークを集めるのが好きです。それらを収集する必要はありませんが、一日の終わりまでに、いくつかのブラウザウィンドウで多くのタブを開きました。私は自慢していませんが、それは私以上のものだと思います。そのため、最も一般的に使用されるWebアプリケーションのいくつかのデスクトップバージョンを使用しました。通常、これらのアプリケーションにはWebバージョンに勝る利点はありませんが、スタンドアロンアプリケーションの利便性により、1日を通して簡単にアクセス、検索、および切り替えることができます。

この章では、既存のWebアプリケーションを取得してにパッケージ化する方法を学習しElectron Shellます。続行する前に、サンプルAPIとWebアプリケーションのローカルコピーをインストールする必要があります。本全体を読んでいない場合は、付録Aと付録Bにアクセスして操作してください。

Webアプリケーションを統合する

前の章では、Electronアプリケーションロードindex.htmlファイルを設定しました。特定のものをロードすることもできますURL。この例では、ローカルで実行されているWebアプリケーションをロードすることから始めますURL。まず、WebアプリケーションがAPIローカルで実行されていることを確認します。次にsrc/index.js、最初BrowserWindowにnodeIntegrationセットでファイルを更新できますfalse。これにより、ローカルで実行されているノードアプリケーションが外部サイトにアクセスすることによるセキュリティリスクを回避できます。

webPreferences: {
    
     nodeIntegration: false
},

ここで、window.loadFile（ ' index.html'）;を次のように変更します。

window.loadURL('http://localhost:1234'); 

Webアプリケーションを実行します

Webローカルインスタンスあなたのアプリケーションがする必要があります1234実行していることにポート。この本を読んでいる場合Webは、アプリケーションディレクトリのルートから実行しnpm startて開発サーバーを起動してください。

これは、ファイルではなく、Electronロードを示しURLます。これで、を使用しnpm startてアプリケーションを実行すると、アプリケーションがElectronウィンドウにロードされたことがわかりますが、いくつかの警告があります。

警告とエラー

Electronブラウザ開発ツールと端末には、多くの警告とエラーが表示されます。それらのそれぞれを見てみましょう（写真を参照19-1）。

図19-1。アプリケーションは実行されていますが、多くのエラーと警告が表示されます。

まず第一に、私たちの端末はたくさん表示しますSyntaxError：Unexpected Token errors.さらに、私たちの開発者ツールは、それDevToolsが解析できないことを示すいくつかの対応する警告を表示しSourceMapます。これらの2つのエラーは、Parcel生成source mapおよびElectron読み取りのsource map方法に関連しています。残念ながら、私たちが使用しているテクノロジーと組み合わせると、この問題に対する合理的な解決策はないようです。最良のオプションは、JavaScriptソースマッピングを無効にすることです。アプリケーションウィンドウの開発者ツールで、[設定]をクリックし、[JavaScriptソースマッピングを有効にする]のチェックを外します（画像を参照19-2）。

図19-2。ソースマッピングを無効にすると、エラーと警告の数が減ります

これで、アプリケーションを終了して再起動すると、ソースマップに関連する問題は発生しなくなります。そうすることのコストは、Electronデバッグクライアント内JavaScriptでより難しいかもしれないということです、しかし良いニュースは、私たちがまだWebこの機能と私たちのアプリケーションブラウザにアクセスできるということです。

最後の2つの警告はElectron、セキュリティに関連しています。これらの問題は、本番アプリケーションをバンドルする前に修正しますが、これらの警告が何であるかを調べる価値があります。

• Electron Security Warning（Insecure Resources）電子安全警告（リソースは安全ではありません）

  この警告は、http接続を介してWebリソースをロードしていることを通知します。本番https環境では、プライバシーとセキュリティを確保するために、常にリソースをロードする必要があります。開発でhttpは、バンドルされたアプリケーションで使用されているホスティングWebサイトを参照するため、ローカルホストをロードしても問題はありませんhttps。

• Electron Security Warning（Insecure Content-Security-Policy）電子セキュリティ警告（安全でないコンテンツセキュリティポリシー）

  この警告は、コンテンツセキュリティポリシーをまだ設定していないことを通知しCSPます（）。CSPアプリケーションがリソースをロードできるドメインを指定できるため、クロスサイトスクリプティング（XSS）攻撃のリスクが大幅に軽減されます。繰り返しになりますが、これはローカル開発では問題になりませんが、本番環境では重要です。この章の後半で使用しCSPます。

エラーを解決した後、アプリケーション構成ファイルを設定できます。

構成

ローカルで開発する場合Webは、アプリケーションのローカルバージョンを実行できるようにしたいのですが、他の人が使用できるようにアプリケーションをバンドルする場合は、公開されているを参照する必要がありますURL。この問題を処理するための簡単な構成ファイルを設定できます。

./srcカタログに、config.jsアプリケーション固有のストアに関連付けることができるファイルを追加します。構成テンプレートを含めました。これを使用して、端末から簡単にコピーできます。

cp src/config.example.js src/config.js

これで、アプリケーションのプロパティを入力できます。

const config = {
    
    
  LOCAL_WEB_URL: 'http://localhost:1234/',
  PRODUCTION_WEB_URL: 'https://YOUR_DEPLOYED_WEB_APP_URL',
  PRODUCTION_API_URL: 'https://YOUR_DEPLOYED_API_URL'
};

module.exports = config;​ 

.envを使用してみませんか？

以前の環境では、env.filesを使用して環境固有の設定を管理していました。この場合、Electronアプリケーションが依存関係をバンドルする方法のため、JavaScript構成ファイルを使用します。

これでElectron、アプリケーションのメインプロセスで、構成ファイルを使用して、開発および本番環境でロードするものを指定できますURL。次にsrc/index.js、最初にconfig.jsファイルをインポートします。

const config = require('./config');

これで、loadURL関数を更新して、環境ごとに異なる負荷をかけることができますURL。

// load the URL
 if (is.development) {
    
    
   window.loadURL(config.LOCAL_WEB_URL);
 } else {
    
    
   window.loadURL(config.PRODUCTION_WEB_URL);
 } 

​

構成ファイルを使用することでElectron、環境固有の設定を簡単に提供できます。

コンテンツセキュリティポリシー

この章で前述したようにCSP、アプリケーションがリソースのドメイン名をロードする権限を持っているかどうかを制限できます。これにより、潜在的なXSSデータインジェクション攻撃を制限できます。ではElectron、CSPアプリケーションのセキュリティを向上させるための設定を指定できます。電子機器とWebアプリケーションの詳細についてCSPは、このテーマMDNに関する記事をお勧めします。

ElectronのCSP組み込みを提供しますAPIが、electronic-utilライブラリはより単純で簡潔な構文を提供します。src/index.jsトップ我々、更新electronic-util含まれるようにimport文をsetContentSecurityPolicy：

const {
    
     is, setContentSecurityPolicy } = require('electron-util'); 

これで、アプリケーションの製品版をセットアップできますCSP。

// set the CSP in production mode
 if (!is.development) {
    
    
   setContentSecurityPolicy(`
   default-src 'none';
   script-src 'self';
   img-src 'self' https://www.gravatar.com;
   style-src 'self' 'unsafe-inline';
   font-src 'self';
   connect-src 'self' ${
      
      config.PRODUCTION_API_URL};
   base-uri 'none';
   form-action 'none';
   frame-ancestors 'none';
 `);
 } 

​

を書くCSPことで、CSP評価プログラムツールを使ってエラーをチェックすることができます。他のURLリソースを介してリソースにアクセスする場合は、それらをCSPルールセットに追加できます。

最終src/index.jsファイルの内容は次のとおりです。

const {
    
     app, BrowserWindow } = require('electron');
const {
    
     is, setContentSecurityPolicy } = require('electron-util');
const config = require('./config');

// to avoid garbage collection, declare the window as a variable
let window;

// specify the details of the browser window
function createWindow() {
    
    
  window = new BrowserWindow({
    
    
    width: 800,
    height: 600,
    webPreferences: {
    
    
      nodeIntegration: false
    }
  });

  // load the URL
  if (is.development) {
    
    
    window.loadURL(config.LOCAL_WEB_URL);
  } else {
    
    
    window.loadURL(config.PRODUCTION_WEB_URL);
  }

  // if in development mode, open the browser dev tools
  if (is.development) {
    
    
    window.webContents.openDevTools();
  }

  // set the CSP in production mode
  if (!is.development) {
    
    
    setContentSecurityPolicy(` default-src 'none';
    script-src 'self';
    img-src 'self' https://www.gravatar.com;
    style-src 'self' 'unsafe-inline';
    font-src 'self';
    connect-src 'self' ${
     
     config.PRODUCTION_API_URL};
    base-uri 'none';
    form-action 'none';
    frame-ancestors 'none'; `);
  }

  // when the window is closed, dereference the window object
  window.on('closed', () => {
    
    
    window = null;
  });
}

// when electron is ready, create the application window
app.on('ready', createWindow);

// quit when all windows are closed.
app.on('window-all-closed', () => {
    
    
  // On macOS only quit when a user explicitly quits the application
  if (process.platform !== 'darwin') {
    
    
    app.quit();
  }
});

app.on('activate', () => {
    
    
  // on macOS, re-create the window when the icon is clicked in the dock
  if (window === null) {
    
    
    createWindow();
  }
}); 

このようにして、（図のように）でアプリケーションをElectron Shell実行できます。Web19-3

図19-3。Electronアプリでshell実行するWebアプリ

結論として

この章では、既存のWebアプリケーションをElectronデスクトップアプリケーションに統合します。これにより、デスクトップアプリケーションを迅速に市場に投入できます。このアプローチはデスクトップ固有の利点を提供しInternet、アプリケーションの全機能にアクセスするための接続を必要とするため、トレードオフが必要であることに注意してください。デスクトップアプリケーションを市場に投入したい私たちにとって、これらの欠点は価値があるかもしれません。次の章では、Electronアプリケーションを構築して配布する方法を学習します。

理解が不十分な場合は訂正してください。大丈夫だと思ったら、もっと多くの人を助けたいと思って、集めたり共有したりしてください。

​