banner
DIYgod

Hi, DIYgod

写代码是热爱,写到世界充满爱!
github
twitter
bilibili
telegram
email
steam
playstation
nintendo switch

Service Workersは、ウェブサイトの高速化とオフラインキャッシュを実現します。

最近、Service Workers というものを見つけました。これはユーザーの設定に基づいてウェブサイトの静的および動的なリソースをキャッシュすることができます。ユーザーのすべてのネットワークリクエストをキャプチャし、キャッシュの設定に基づいてリソースをキャッシュまたはネットワークから取得するかを決定するため、ウェブページの読み込み速度を大幅に向上させることができます。利点は高いカスタマイズ性、サーバーサイドのサポートが不要、効果が顕著です。

最終的な効果は、私のウェブサイトに 2 回目にアクセスすると、広告を除いて約 80k のリソースがロードされることです。これにはすべての画像とオーディオビデオが含まれており、この 80k は主に HTML と私が使用しているDPlayerの API です。

sw4

ネットワークが切断されている場合でもアクセスできます(ネットワークケーブルを切断して試してみてください):

sw2

もちろん、制約もあります:

HTTPS のみをサポートしています。ユーザーのネットワークリクエストをキャプチャするため、安全な環境が必要です。

互換性があまり良くありません。互換性レポートを確認すると、現在は Chrome、Firefox、Opera、および一部の Android ブラウザのみがサポートしています。

sw3

使用方法については、多くのチュートリアルがオンラインで利用可能ですので、ここでは省略します。以下の記事をおすすめします:

使用 service worker+sw-precache 实现网站加速

使用 Service worker 实现加速 / 离线访问静态 blog 网站

Service Workers 与离线缓存

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。