---
title: "Service Workerとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AI生成サイトの共有後に「更新が反映されない」と言われて困っているWeb担当者向け。Service Workerがキャッシュする仕組みと共有時のバージョン更新方法、不要なService Workerを無効化する手順を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-service-worker-html-share"
markdown: "https://giga-site.com/articles/what-is-service-worker-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Service Workerとは？HTML共有・AI生成サイトでの意味をやさしく解説

AI生成のWebサイトをプレビュー共有したとき、最新版にアップロードし直したはずなのに受け取った相手が古いページを見てしまう、というトラブルが起きることがある。この「更新が反映されない」問題の多くはService Workerのキャッシュ制御に起因している。仕組みを知っておくとトラブルシュートが一気に楽になる。

> Source HTML: https://giga-site.com/articles/what-is-service-worker-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

Service Workerとは、Webページとは独立してバックグラウンドで動くJavaScriptのプロキシだ。ネットワークリクエストを横断して、ページのHTMLやCSS、JSファイルをブラウザのキャッシュに保存・管理する役割を持つ。この仕組みを使うことでオフライン動作や高速な再表示が実現される。

AI生成ツールがPWA対応のコードを出力した場合、自動でService Workerが登録されることがある。一度アクセスすると以降はキャッシュから返されるため、アップロードし直しても古いページが表示されるという現象が起きる。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

共有URLを受け取った相手が一度アクセスしてService Workerが登録されると、次回アクセス時はサーバーではなくキャッシュからページが返る。修正版をアップロードしても相手のブラウザには届かないため、「直しました」と伝えても古いバージョンのままになる。相手に強制リロード（Ctrl+Shift+R）を依頼するか、Service Workerのバージョン番号を更新する必要がある。

ギガサイト便でURLを再発行することで、新しいURLを共有して確実に最新版を見てもらう方法が最も簡単だ。URLが変わるため旧キャッシュの問題を完全に回避でき、旧URLへのアクセスを無効化することもできる。

## よくある誤解

「Service WorkerはSPAにしか使えない」という誤解がある。MPAの静的HTMLサイトにもService Workerを導入でき、Workboxなどのライブラリを使えば導入が容易だ。ただし静的サイトの一時共有には不要であることが多く、AI生成コードにWorkboxが含まれていたら共有用途なら無効化を検討する。

「Service Workerを登録したらずっとキャッシュされて更新できない」と思われがちだが、正確にはアップデートの仕組みが組み込まれている。新しいService Workerファイルをサーバーに置けばブラウザが差分を検出して更新される。ただし更新のタイミングはタブを閉じて再度開いたときが基本となる。

## 安全に使うための注意点

Service WorkerはHTTPS環境でのみ動作する（localhostを除く）。ギガサイト便のようなHTTPS配信サービスであれば問題ないが、HTTPのサーバーにアップロードした場合はService Workerが登録されずオフラインキャッシュ機能が使えないことに注意する。

Service Workerがキャッシュするリソースのリストをハードコードしている場合、そのリストに含まれないファイルはキャッシュされない。AI生成コードではキャッシュ対象のファイル名が固定されており、ビルドのたびにハッシュ付きファイル名が変わるとキャッシュが機能しなくなることがある。Viteのビルドなら`vite-plugin-pwa`を使うと自動でキャッシュリストが更新される。

## よくある質問

### 共有先のブラウザにキャッシュされたService Workerを今すぐ無効化する方法はありますか？

ChromeならDevTools > Application > Service Workers でUnregisterボタンを押すと即時解除できます。相手にこの手順を案内するか、新しいURLで再共有する方が現実的です。

### AI生成コードにService Workerが含まれているか確認するにはどうすればいいですか？

HTMLの`<script>`タグで`serviceWorker.register`を検索するか、`sw.js`や`service-worker.js`というファイルがフォルダに含まれているかを確認してください。next-pwawなどのプラグインが自動生成するケースもあります。

### プレビュー共有でService Workerは必要ですか？無効化しても問題ありませんか？

短期間のプレビュー共有であれば無効化して問題ありません。Service Workerを登録するscriptタグをコメントアウトするか削除するだけです。オフライン動作やプッシュ通知が不要なら共有版には含めない方がトラブルが少ないです。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Service Workerとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "AI生成サイトの共有後に「更新が反映されない」と言われて困っているWeb担当者向け。Service Workerがキャッシュする仕組みと共有時のバージョン更新方法、不要なService Workerを無効化する手順を解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-service-worker-html-share",
  "url": "https://giga-site.com/articles/what-is-service-worker-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "共有先のブラウザにキャッシュされたService Workerを今すぐ無効化する方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ChromeならDevTools > Application > Service Workers でUnregisterボタンを押すと即時解除できます。相手にこの手順を案内するか、新しいURLで再共有する方が現実的です。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成コードにService Workerが含まれているか確認するにはどうすればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLの`<script>`タグで`serviceWorker.register`を検索するか、`sw.js`や`service-worker.js`というファイルがフォルダに含まれているかを確認してください。next-pwawなどのプラグインが自動生成するケースもあります。"
      }
    },
    {
      "@type": "Question",
      "name": "プレビュー共有でService Workerは必要ですか？無効化しても問題ありませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "短期間のプレビュー共有であれば無効化して問題ありません。Service Workerを登録するscriptタグをコメントアウトするか削除するだけです。オフライン動作やプッシュ通知が不要なら共有版には含めない方がトラブルが少ないです。"
      }
    }
  ]
}
```