Chrome の Desktop PWAs で無意味に Electron なアプリをまとめよう

TL;DR : Electron である意味がないアプリでは Chrome の Desktop PWAs を使うといいよ

HTML5 を筆頭とする Web 技術の進歩により、なんでも Web で実現できるようになると共に、Web技術ベースでクロスプラットフォームなデスクトップアプリケーションが作れる Electron が凄まじい勢いで流行ってきました。

Electron は Google Chrome のベースであるオープンソース Web ブラウザ Chromium で作られたクロスプラットフォームなアプリケーション開発環境で、 Windows, Linux, macOS など様々な OS で動くアプリケーションを Web 技術ベースで開発することができます。 GitHub (現 Microsoft) により提供されています。

以下のアプリケーションはすべて Electron をベースに作成されています。

• Microsoft Visual Studio Code (テキストエディタ)
• GitHub Atom (テキストエディタ)
• Adobe Brackets (テキストエディタ)
• Atlassian Trello (カード型タスク管理)
• Facebook Messenger for Desktop (チャット)
• Facebook Workplace Chat (企業向けチャット)
• Microsoft Skype (チャット)
• Slack (グループチャット)
• Discord (ゲーマー向けグループチャット)

Electron で作成されたアプリケーションの一覧は Electron のサイトで閲覧することが出来ます。

Electron の問題

Electron はクロスプラットフォームなアプリケーションを構築するための優れたツールです。

しかし欠点もあります。ベースとする Chromium が多機能になるにつれ、 Electron 自体のリソース消費も馬鹿にならないレベルで肥大化しています。

次のスクリーンショットを見てください。

〜 Helper という名前のプロセスが大量に実行されていることがわかります。それぞれのプロセスが 100 MB 近いメモリを消費し、常に数 % の CPU リソースを消費しているのです*1。

これではリソースがいくらあっても足りません。ノート PC を使っている場合にはバッテリ消費も馬鹿になりません。

Electron が必要な状況とは

ものすごくリソースを喰う Electron ですが、そもそもこれらのアプリケーションは本当に Electron を必要としているのでしょうか。

実を言うと、本当に Electron である意味があるのはローカルファイルにアクセスするテキストエディタ系(VSCode, Atom, Brackets)くらいです。

Slack, Trello などはフル機能を Web 版でも利用することができます。 Discord に関してもプッシュ・トゥ・トーク機能など一部の機能以外は Web 版で利用できます。

例えば、 Electron をやめる

上記の通り、 Web 上で利用できるものは Chrome で利用することにしました。これでリソースを大食らいするのは 1 つのアプリケーションのみです。

相変わらず Chrome はリソースをバカ食いしていますが、 Chrome っぽい何かが大量に立ち上がるよりは相当マシです。

ウィンドウ管理の問題

リソース消費の問題はなんとかなりましたが、次はウィンドウ管理につらみを感じるようになりました。

というのも、すべてが Chrome の上で動くようになったせいで Dock 上でのアイコンが分離されず、 Slack が開きたいときにも Chrome がアクティブになってしまうのです。

Desktop PWAs

Google Chrome では 67 以降から Desktop PWAs が試験的に実装されるようになりました。

PWA というのは Progressive Web Apps の略で、 Web 技術を用いてネイティブライクなアプリケーションをモバイル向けに実現するための Google が提唱する規格です。

身近な例では Twitter Lite が PWA を用いており、 Android では Web 技術ベースでありながらネイティブアプリケーションのようなルックアンドフィールを実現しています。

Desktop PWAs はその名の通り PWA をデスクトップ OS 環境にも拡張する試みです。これにより Web 技術を用いたネイティブライクなアプリケーションが Windows, Linux, macOS など各デスクトップ OS で実現できるようになります。

Web 技術を用いたデスクトップアプリケーション、どこかで聞いたような話です。お察しの通り、 Desktop PWAs が実現しようとしているものは Electron とある程度競合するものです。

Slack を Desktop PWA 化しよう

手始めに Slack を Desktop PWAs 環境で動くようにしたいと思います。

前述の通り、 Desktop PWAs は未だ試験実装の段階です。利用するためには chrome://flags にていくつかの設定項目を有効 (Enabled) に設定する必要があります。

• chrome://flags/#enable-pwa-full-code-cache
• chrome://flags/#enable-app-banners
• chrome://flags/#enable-desktop-pwas
• chrome://flags/#enable-desktop-pwas-link-capturing

有効化し Chrome を再起動したら、 Desktop PWA 化したい Slack のグループを開きます。そしてメニューから ショートカットを作成... を選びます。

ショートカットが作成されたら Chrome のアプリドロワーを開きます。先程ショートカット化した Slack のグループを右クリックし、ウィンドウとして開く を選択してください。

後はアプリドロワーから作成したショートカットをクリックして実行します。ネイティブアプリのように Slack が開き、 Dock にも Chrome とは別扱いで表示されています。

思わぬ副作用

これで Electron 製のアプリケーションがリソースを大量に消費する問題を解決できました。 Visual Studio Code などのテキストエディタについては Chrome に統合することは出来ませんが、 Slack や Discord のように常時実行するタイプのアプリケーションではないので問題ありません。

アプリケーションをDesktop PWA 化したことで、 Chrome の拡張機能が各アプリケーションにも適用されるという思わぬ副作用が発生します。

この副作用の良い点は Tampermonkey や Stylus といったユーザースクリプト・スタイルシートをアプリケーションに対して適用することができるという部分で、悪い点は悪意のある拡張機能がよりユーザーの情報を抜き出しやすくなるという部分です。

Web ブラウザはもはや OS である

Google が Chrome OS をリリースした時には Web で出来ることは限られており、Web ブラウザを主とする Chrome OS は G Suite を使う業務などの特定用途でしか使い物にならないと言われ続けていました。現に自分もその一人でした。

しかし、 Web 技術が進歩するにつれ Web ブラウザで多くのことをこなすことが出来るようになりました。オフラインでの実行やローカルストレージへのアクセス、更には OpenGL や Bluetooth, USB へのアクセスなど、もはや出来ないことを探すほうが難しいほどです。

考え方によっては、 Web ブラウザはもはや 1 つの OS です。そのような状況下での Electron とは 1 つのアプリケーションを実行するために仮想マシンを立ち上げるようなものであり、リソースを大量消費するのも無理はありません。

Web 技術は今もなお拡張されています。 Visual Studio Code などのエディタアプリケーションもブラウザ上で動く日もそう遠くないでしょう。 Web ブラウザはコンピュータを用いる上での一級市民になろうとしています。

この勢いには、かつてセキュリティに大きな問題を抱えたまま急速に成長を遂げた Windows と類似するものがあるように思えます。

Web で出来ることが増えるにつれ、更にセキュリティ上の問題やプライバシー上の懸念が出てくることでしょう。それでもなお人々が Web へ情熱を注ぐのは、あの勢い任せなかつての時代を追体験したいからなのかもしれません。

---

単純に Electron クソ重いからなんとかしたかったというだけの記事なのに気がついたらよくわからないポエムになっていた

*1:Google Drive File Stream は厳密には Chromium Embedded