PWAの恩恵についての再考
WebサイトをPWAとして実装していくにあたって、いくつかの課題に直面し、得られる効果が限られてきてしまったためどのようなサイトでPWAの実現が難しいかをまとめる。
## サブドメインを利用するサービス
PWAの根幹となるService Workerでクリティカルな問題としてサブドメインがある。
Service Workerと同じ階層にあるディレクトリから配下をコントロールすることが可能だが、仮にリソースがサーバ上でホストドメイン・サブドメイン共に同じディレクトリ内にあったとしてもService Worker同士はやり取りを行うことができないため、ドメインにつき1つのService Workerが必要になる。
トップページから各記事へのドキュメントを取得し、キャッシュすることは可能だが実際に記事に訪れるとキャッシュではなくネットワークによってリソースを取得してしまう。これでは折角キャッシュしたリソースを最大限活用し、レスポンスの向上は難しい。
また多くのサイトにおいて、ドキュメントに比べて容量が大きい画像はWebサーバとは別のサーバとして用意されていることが多い。そのためサブドメインが使われ、Service Workerは画像をキャッシュすることが可能でない。
加えてドキュメントは通常キャッシュすることができないが、画像などの静的リソースはメモリキャッシュやディスクキャッシュで読み込み速度をすでに向上させているため、画像をService Workerでキャッシュするというのは恩恵がない。
PWAはスマートフォンアプリのようにサイトをホーム画面へ追加することを可能とし、ブラウザ特有のステータスバーの表示をさせないことができる。
しかし登録したドメイン以外のサイトに遷移すると、アドレスバーを表示してしまうためサブドメインを使ったサイトを頻繁に訪れる場合、見た目がブラウザと大差がなくなってしまう。
WebサイトをPWA化するにあたって、サイトがサブドメインを使っているかどうか、リソースは登録するディレクトリよりも配下にあるかというのはとても重要な問題である。
document.getElementById("mdrender").innerHTML = marked(document.getElementById("mdraw").innerHTML);
const tags = document.getElementById("mdrender").querySelectorAll("a");
for (let tag of tags) { tag.setAttribute("target", "_blank"); }
関連記事