KANSOCK.INDUSTRIES をデスクトップ PWA 化してみる

デスクトップ PWA というものがあります。PWA は Progressive Web Apps の略で、スマートフォンなどで、Web サイトをインストール可能にする技術です。インストールされた Web サイトは、ホーム画面に配置され、起動するとブラウザウインドウなしで Web サイトを使うことが出来ます。単にホーム画面から Web サイトをアプリのように起動できるたけでなく、Push 通知やオフラインでの利用などいろいろなメリットがあります。

デスクトップ PWA は、そのデスクトップ版とも言えるもので、PC にて同様にインストール可能な Web サイトを提供するという技術です。Google Developers のサイトには以下のように、Chrome 73 では、Chrome OS、Linux、Mac、Windows で対応されている旨が記載されています。

• Desktop Progressive Web Apps  |  Web  |  Google Developers

Starting in Chrome 73, Desktop Progressive Web Apps are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.

ただし、Chrome 73 にて対応されたのは Mac で、Windows と Linux については、Chrome 70 にて対応が済んでいます。

• New in Chrome 70  |  Web  |  Google Developers

この技術は、まだまだ発展途上だと思いますが、興味があり、このサイトにも導入してみました。PWA にすることで、デスクトップ PWA にもなるという感じです。

もともと、デスクトップアプリケーションを Web 技術を使って作るということに以前から興味があり、自分でも descjop というオープンソースプロジェクトを立ち上げています。ちょっと更新をしてませんが、スター数は 369 と、自分のオープンソースプロダクトとしては一番ヒットしたプロダクトです。こちらは、Electron というデスクトップアプリケーションのフレームワークを ClojureScript で書けるようにするためのスターターキットとなっています。

• karad/lein_template_descjop: A Leiningen template(Clojure/ClojureScript Project) for Web based desktop application with Electron (atom-shell).
• descjop | A Leiningen template for Web based desktop application.

さて、Chrome にてデスクトップ PWA を使えるようにするには、以前は下記のような手順がありました。

1. chrome://flags をアドレスバーに入力
2. Search Flags に PWA と入力し、いくつかの機能を Enabled にする
3. Search Flags に App Banners と入力し、Enabled にする
4. Chrome を再起動する

現状の最新の Chrome (73) は設定しなくても Default の状態で使えるようです。
ブラウザで KANSOCK.INDUSTRIES を開くと、以下のような表示がメニューにて確認できます。

インストールしてみましょう

Finder にアプリケーションアイコンが表示されました

起動すると、ブラウザのアドレスバーなどがないアプリケーションぽい UI で Web サイトが起動します。

デスクトップ PWA には可能性を感じており、引き続き研究を続けていきます。