はてなブックマーク

重い腰を上げてServiceWorkerに触れました（Service Worker の紹介）。 こんなにも簡単にブラウザキャッシュできるのか！と感動し、「速い速いと言われるdev.toでも使っているんでしょう？」と見てみたら更なる感動があったので内容を書き残します。 何をやっていた？ 結論から dev.toにアクセスした時点で、記事ページのhtmlがキャッシュされる（上から6枚くらい） オフライン用のhtmlがキャッシュされていて、リクエストが失敗する（= キャッシュされていない）画面ではこれが返される スクロールする毎に記事ページのhtmlを取りに行き、次々にキャッシュする なので、dev.toにアクセスした後にオフラインになったとしても ファーストビューに出ている記事くらいは見ることが可能で それ以降の記事を踏まれたとしても「ネット回線切れているよー」というhtmlが表示されるため、殺

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

.squareBox { width: calc(100vmin - 60px); height: calc(100vmin - 60px); position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #解説 要素の縦横に　100vmin　を付与し、幅と高さの値の小さい方を指定します。 例えば、ウィンドウサイズが{ 幅:800px, 横:600px }であれば width、heightは600pxになります。 そこからcalc()を使用して　-60px　としています。 これは、左右、または上下に常に30pxの余白を取るためです。 position　から下は要素を中央に配置するための指定になります。 #参考 以下の資料を参考にさせていただきました。 HTML6 でも CSS4 でもない Web 技術のゆくえ