ブラウザからServiceWorkerを削除する方法

ServiceWorkerの削除

ServiceWorkerは、WEBサイトをネイティブアプリのように使えるPWA(Progressive Web Apps)を実装する仕組み。

ブラウザ内でキャッシュをコントロールすることで、ある程度はオフラインでWEBサイトを閲覧できるようにするとか、アプリのように通知を受けれるようにするとかの機能が実装できる。

最近、自分のWEBサイトでServiceWorkerを中途半端に入れてしまったので、色んな人から「新しい情報が表示できない」(キャッシュのコントロールがおかしい)と言われまして、削除する方法を探しておりました。
※ワードプレスのテンプレートの機能で「PWA」というボタンがあったので、「へー、PWAに対応しているのか」と気軽にポチッと押してしまったのが良くなかった・・・

以下、ServiceWorkerはユーザーのブラウザ側に入っているので、これを削除する方法について。

Chrome

Chrome(PC)からServiceWorkerを削除する場合、以下の手順。
Chromに入っている開発者ツール(デベロッパーツール)から削除できる。

ServiceWorkerの削除(Chrome)
ServiceWorkerの削除(Chrome)
  1. Chromeで「F12」キーを押すか、メニュー「その他のツール」→「デベロッパーツール」から、デベロッパーツールを起動する
  2. 上部タブで「Application」を選択
  3. 左部メニューで「Service Workers」を選択
  4. 右部コンテンツの下にある「Service workers from other origins」をクリックすると、Chromeにインストールされている全てのServiceWorkerが表示される
  5. ServiceWorkerを削除したいWEBサイトを探し、「Unregister」をクリック

上記のサンプルでは「ameblo.jp」になってますが、例えばこのブログの場合では「https://www.bousaid.com」を探して、「Unregister」(登録解除)してください。

FireFox

FireFox(PC)からServiceWorkerを削除する場合、以下の手順。

ServiceWorkerの削除(FireFox)
ServiceWorkerの削除(FireFox)
  1. FireFoxのURLバーに「about:debugging#/runtime/this-firefox」と入力して設定ページを開く
  2. 「Service Woker」の欄を開く
  3. 削除したいWEBサイトのURLを探し、「解除」を押す

URLのバーに以下を入力するところからスタートです。

about:debugging#/runtime/this-firefox

上記のサンプルでは「icotto.jp」になってますが、例えばこのブログの場合では「https://www.bousaid.com」を探して、「解除」してください。

Edge

Edge(PC)からServiceWorkerを削除する場合、以下の手順。

ServiceWorkerの削除(Edge)
ServiceWorkerの削除(Edge)
  1. Edgeで「F12」キーを押すか、メニュー「その他のツール」→「開発者ツール」から、開発者ツールを起動
  2. 上部タグから「Service Wokers」を選択
  3. 左部メニューから、削除したいWEBサイトのURLを選択
  4. 右部コンテンツで「登録解除」をクリック

上記のサンプルでは「icotto.jp」になってますが、例えばこのブログの場合では「https://www.bousaid.com」を探して、「登録解除」してください。

iPhone・iPad

iPhone・iPadのSafariブラウザについては、多分以下の手順でいけるかな?と思います。確信はないです。

  1. iPhone・iPadの「設定」を開く
  2. ブラウザ「Safari」を選択
  3. 一番下の「詳細」を開く
  4. 「Webサイトデータ」を選択
  5. 削除したいWEBサイトのURLを検索
  6. 「削除」を押す

URLについては、一部の文字列でOK。
例えばこのブログの場合では「bousaid」と入力する。

Android

AndroidのChromeについては、自分が使ってないこともあり、よく分からない。
以下のページなど参照。

Chromeを使うなら、必ずServiceWorkersを無効化しよう

オフラインデータが削除できそうな手順としては、以下。

  1. Chomeメニュー「設定」を開く
  2. 「サイトの設定」を選択
  3. 「すべてのサイト」を選択
  4. 削除したいWEBサイトのURLを入力して検索
  5. 「データを削除してリセット」を押す

URLについては、一部の文字列でOK。
例えばこのブログの場合では「bousaid」と入力する。

ほい。
そんな感じ。

この記事を書いた人 Wrote this article

tonogata
TOP