denoでPWAをサポートする、最もシンプルなサンプル

PWAを利用するためにはhttpsが必須だと思っていましたが、localhostの場合はhttpでもokでした。
denoを使ってPWAを使うための最もシンプルなサンプルを作成しました。

動機

• denoを使ってGUIアプリを作成したい。
• ブラウザの中のタブの一つとしてではなく、独立したウィンドウで表示したい。
• 任意のデザインのアイコンから起動できるようにしたい。
• この際、目的が達成できればPWAの本来の目的・用法は無視しても良い気がしてきた。

ソース

実行

edgeで「http://localhost:8080/」を表示すると以下のようになります。

PWAとしてインストール

edgeの「…」からメニューを開いて「アプリ」→「このサイトをアプリとしてインストール」をクリックします。

どのような名前でインストールするか聞かれます。
変える必要が無ければ、そのまま「インストール」をクリックします。

PWA画面に切り替わります。

スタートメニューにも追加されます。

アンインストール

PWA画面の「…」からメニューを開き「(アプリ名)のアンインストール」をクリックします。

「削除」をクリックすると、PWA画面が閉じてスタートメニューからもアイコンが削除されます。

既知の問題

• 可能な限りシンプルなソースにするためにService Workerも無しにしているのでキャッシュからの起動に対応していません。
• キャッシュからの起動に対応する（サーバが停止している状態でもアプリが使えるようにする）ためにはService Workerを使うためのファイルを追加する必要があります。