さらば、古き良き遺産：HTML `manifest` 属性の現在地と「正しい」お別れの仕方
フロントエンドの技術進化は速い。昨日まで「ベストプラクティス」と呼ばれていたものが、今日には「レガシーの墓場」へと追いやられる。そんな世界で生き抜く我々にとって、技術の「引き際」を知ることは、新しい技術を覚えることと同じくらい重要だ。
今回は、HTMLのルートタグである `` にかつて君臨していた `manifest` 属性について、改めて整理しておこう。「昔のコードで見かけたけれど、これって何なの？」という疑問を抱えている中級エンジニア諸君のために、その正体と、なぜ今すぐ捨て去るべきなのかを解説する。
—
1. `manifest` 属性とは何だったのか
かつて、HTML5の黎明期に「Offline Web Applications」を実現するための唯一の手段として登場したのが、この `manifest` 属性だ。
…
この属性は、ブラウザに対して「このテキストファイル（`.appcache`）に書かれたリストにあるファイルを、全部ローカルにキャッシュしておけ」という命令を下すためのものだった。
ブラウザの裏側で起きていたこと
ブラウザは `manifest` 属性を見つけると、裏側で以下のような挙動をとっていた。
1. マニフェストファイルの取得: 指定された `.appcache` ファイルを読み込む。
2. キャッシュの構築: リストされたリソースをダウンロードし、ブラウザの専用ストレージに格納する。
3. オフライン対応: 次回以降、ネットワークが遮断されていても、そのキャッシュからリソースを読み込み、ページをレンダリングする。
一見便利そうだが、現場では「一度キャッシュされると、サーバー側のファイルを更新してもキャッシュが消えない」「更新の判定がシビアすぎて、ユーザーが古いコンテンツを見続けてしまう」という、エンジニア泣かせの代物だった。
—
2. なぜ私たちはこれを捨てるべきなのか
結論から言えば、`manifest` 属性は「非推奨」どころか、主要ブラウザで完全にサポートが終了している。
最大の理由は、Service Worker という強力な後継者が現れたからだ。`AppCache` は仕様自体が複雑でバグの温床になりやすく、制御が極めて困難だった。対して Service Worker は、JavaScript を介してリクエストのインターセプトを詳細に制御でき、キャッシュの更新戦略も柔軟に設計できる。
今、`manifest` 属性を使い続けることは、沈みゆく船に乗り続けるようなものだ。SEO的にも、ブラウザのセキュリティ要件的にも、百害あって一利なしである。
—
3. 実践：Service Worker への移行（サンプルコード）
「じゃあ、オフラインキャッシュはどうすればいいんだ？」と焦る必要はない。現代の標準である Service Worker を使えば、もっとスマートに実装できる。
以下に、現場でそのまま使えるクオリティの「基本の Service Worker」テンプレートを用意した。まずはこれをエディタに貼り付けて、動きの概念を掴んでほしい。
// sw.js (Service Worker本体)
const CACHE_NAME = ‘v1-cache-app’;
const ASSETS_TO_CACHE = [
‘/’,
‘/index.html’,
‘/css/style.css’,
‘/js/main.js’,
‘/images/logo.png’
];
// 1. インストール時にキャッシュを生成
self.addEventListener(‘install’, (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log(‘キャッシュを生成中…’);
return cache.addAll(ASSETS_TO_CACHE);
})
);
});
// 2. フェッチ時にキャッシュを返す（ネットワークファーストならここを調整）
self.addEventListener(‘fetch’, (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
// キャッシュがあればそれを返し、なければネットワークへ
return response || fetch(event.request);
})
);
});
// 3. 古いキャッシュを削除（バージョン管理）
self.addEventListener(‘activate’, (event) => {
event.waitUntil(
caches.keys().then((keys) => Promise.all(
keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))
))
);
});
メインの JS ファイルで以下のように登録する。
// main.js
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, () => {
navigator.serviceWorker.register(‘/sw.js’)
.then(reg => console.log(‘SW 登録成功:’, reg.scope))
.catch(err => console.error(‘SW 登録失敗:’, err));
});
}
—
最後に：技術の引き際を見極める力
エンジニアとしてのスキルアップとは、単に新しいフレームワークを覚えることではない。「何が使えなくなったのか」「なぜそれが廃れたのか」を知り、古いコードを勇気を持ってリプレイスする経験こそが、君を真のシニアエンジニアへと引き上げる。
もし君のプロジェクトのどこかに `manifest` 属性が残っていたら、それは「改善のチャンス」だ。技術負債を整理し、Service Worker というモダンな武器に置き換える。その地道な作業こそが、プロダクトの品質を支えるのだ。
さあ、コードを綺麗にする準備はできたかな？不明点があればいつでも聞いてくれ。現場からは以上だ。
コメント