HTML5アプリケーションキャッシュAPIは、廃止されましたが、Webアプリケーションがキャッシュリソースによってオフラインで動作できるようにするために使用されました。これがあなたがそれを使用した方法です:
マニフェストファイル: .appcache
拡張機能を備えたマニフェストファイルを作成します。このファイルには、ブラウザがキャッシュする必要があるリソースがリストされています。マニフェストファイルの形式は次のとおりです。
<code>CACHE MANIFEST # v1 CACHE: /index.html /styles.css /script.js NETWORK: * FALLBACK: / /offline.html</code>
HTMLリファレンス: タグに
manifest
属性を含めることにより、HTMLファイルのマニフェストファイルを参照してください。
<code class="html"></code>
CACHE
セクションにリストされているリソースのキャッシュを開始します。NETWORK
セクションにリストされているリソースは、キャッシュされることはありません。つまり、常にネットワークからフェッチされます。 FALLBACK
セクションでは、ユーザーがオフラインになったときに提供するフォールバックページを指定します。重要な注意:これらの手順は、アプリケーションキャッシュAPIの仕組みを詳述していますが、新しいプロジェクトに使用されるべきではありません。代わりに、開発者はオフライン機能を管理するためにサービスワーカーに移行する必要があります。
アプリケーションキャッシュAPIからサービスワーカーへの移行には、スムーズな移行を確保するためのいくつかのステップが含まれます。
manifest
属性を削除し、 .appcache
マニフェストファイルを削除します。サービスワーカーの実装:メインのJavaScriptファイルにサービスワーカーを登録してください:
<code class="javascript">if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); }); }); }</code>
サービスワーカーを書き込む: service-worker.js
ファイルを作成して、キャッシュロジックを処理します。リソースを保存するためにCache API
を使用してください。
<code class="javascript">self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js' ]); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });</code>
アプリケーションキャッシュAPIからサービスワーカーに移行した後、Webアプリケーションがオフライン対応のままであることを確認するには、以下を検討してください。
包括的なキャッシング:アプリケーションがオフラインで機能するために必要なすべての重要なリソースがキャッシュされていることを確認してください。これには、HTML、CSS、JavaScript、画像、およびその他の資産が含まれます。サービスワーカー内のCache API
を使用して、これを処理します。
<code class="javascript">self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js', '/offline.html' ]); }) ); });</code>
ネットワークリクエストの処理: fetch
イベントを使用して、すべてのネットワークリクエストをインターセプトして処理します。キャッシュにリソースが見つからない場合は、ネットワークからフェッチしてから応答をキャッシュしようとします。
<code class="javascript">self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request).then(function(response) { return caches.open('my-cache').then(function(cache) { cache.put(event.request, response.clone()); return response; }); }); }) ); });</code>
オフラインフォールバック:オフラインフォールバック戦略を実装します。リクエストが失敗した場合、キャッシュからフォールバックページを提供できます。
<code class="javascript">self.addEventListener('fetch', function(event) { event.respondWith( fetch(event.request).catch(function() { return caches.match('/offline.html'); }) ); });</code>
戦略の更新:サービスワーカーがそれ自体とキャッシュを更新できるようにします。バージョン化とactivate
イベントを使用して、更新を管理します。
<code class="javascript">self.addEventListener('activate', function(event) { var cacheWhitelist = ['my-cache-v2']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });</code>
アプリケーションキャッシュAPIからサービスワーカーに移行する場合、次の重要な違いを理解することが重要です。
柔軟性と制御:
範囲と機能:
更新メカニズム:
activate
イベントを通じて管理されます。キャッシュがいつ、どのように更新されるかを明示的に定義し、より予測可能で制御された更新を提供することができます。パフォーマンスと効率:
ブラウザのサポートと非難:
これらの違いを理解することで、アプリケーションをサービスワーカーに効果的に移行し、スムーズな移行とオフラインの機能が強化されます。
以上がHTML5アプリケーションキャッシュAPIを使用するにはどうすればよいですか(代わりにサービスワーカーを使用します)?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。