Monaca IDEがデスクトップPWAに対応しました！

PWA（Progressive Web App）は、主にスマートフォン向けのWebアプリをネイティブアプリ風にするためのテクニックとして注目されています。あまり知られていませんが、PWAはデスクトップのWebブラウザでも恩恵があり、キャッシュを使った高速化や、Webプッシュなどの機能が利用できます。さらにブラウザにGoogle Chromeを使うことで、PWAに対応したWebアプリをデスクトップアプリケーションのようにインストールすることができます。

今回、クラウド版のMonaca IDEもPWAに対応し、皆さんのローカルコンピュータ上に配置できるようになりました！

利用手順は、WindowsもmacOSも同じ操作になります。

Google Chromeの設定を変更する

執筆時点（2019年01月現在）ではデスクトップPWAに対応するためにGoogle Chromeの設定を変更しなければなりません。まず、chrome://flags にアクセスします。

そして「PWA」と検索して、以下の設定を有効（Enabled）にします。

Enable PWA full code cache
Desktop PWAs
Desktop PWAs Link Capturing

さらに「App」と検索して、以下の設定を有効（Enabled）にします。

App Banners

有効にしたらGoogle Chromeを再起動します。これで準備完了です。

Monaca IDEをインストールする

Google Chromeを再起動したら、Monaca にアクセスし、IDEを開きます。そして右上にあるメニュー（縦に並んだ三点リーダー）をクリックします。そうすると “「Monaca IDE」をインストールします...” というメニューが追加されています。

このメニューをクリックすると、Monaca IDEのインストールバナーが表示されますので、「インストール」をクリックします。

インストール後は後述するショートカットアイコンをクリックしてIDEを立ち上げます。

Windowsの場合

Windowsの場合、インストールを行うとデスクトップにショートカットアイコンが作成されます。

macOSの場合

macOSの場合、Google Chromeのアプリランチャー内にインストールされます。また、Launchpadから呼び出すこともできます。

PWAのメリット

PWAはService Workerによって表示の高速化を実現しています。これについてはWebブラウザ上でIDEを利用する場合も同様の恩恵が受けられます。

デスクトップにインストールすることによって、ショートカットから素早くIDE立ち上げられるのでより便利になります。また、ブラウザのアドレスバーやタブが表示されなくなりますので、ノートPCなどを利用していて、少しでも広い画面で作業したいといった場合に有用でしょう。

まとめ

PWA化によってMonaca IDEの表示速度が高速化しました。さらにデスクトップPWAによってIDEにアクセスしやすくなり、ローカルアプリケーションと同じ感覚で利用できます。普段クラウド上でMonaca IDEを使っている方は、ぜひデスクトップPWAを試してみてください。

関連