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

2021年7月1日木曜日

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

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

動機

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

ソース

	<html>
	<title>PWA</title>
	<body>ok?</body>
	<script>
	onload = ()=>{
	document.body.innerText = 'あいうえお'
	}
	</script>
	</html>

view raw index.html hosted with ❤ by GitHub

	import { listenAndServe } from "https://deno.land/std/http/server.ts";

	const server = listenAndServe({port:8080}, httpリクエスト処理)

	async function httpリクエスト処理(リクエスト:any){
	console.log(リクエスト.url) const file = await Deno.open('./index.html')
	リクエスト.respond({
	status : 200,
	headers : new Headers({'content-type' : 'text/html'}),
	body : file
	})
	}

view raw pwa.ts hosted with ❤ by GitHub

実行

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

PWAとしてインストール

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

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

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

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

アンインストール

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

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

既知の問題

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

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)