例えば、Service Worker をやめる

当ブログから Service Worker を削除しました。(削除してないけど)

最速ブログシステムであるところの gatsby-starter-blog からブログを作ると、gatsby-plugin-offline というプラグインがインストールされた状態となり、見事に Service Worker (以下 SW と呼ぶ)が動作し、オフライン機能が動作するようになります。

オフライン機能とはなんでしょうか。例えば https://www.gatsbyjs.org/blog/ を開いた後、インターネット回線を全部オフにしてリロードしてみてください。なんと問題なくブログが読めてしまいます。 アドレスバーを見るとインターネットを開いてるとしか思えないのに、なんと回線がなくても開けてしまうのです。この機能により、インストールするアプリと同じように Web アプリを利用したり、 そもそもページをインターネットに取りに行く必要がないということで、2 度目のアクセスが超絶速い Web サイトを作ることができます。

これこそが最先端の Web 技術を使っていく GatsbyJS のすごいところであり、メリットであるのですが、当ブログではこの機能を切る事にしました。デメリットがきつすぎる。

  • そもそもブログにオフライン機能いるか?
  • バグが多い(Twitter 公式アプリ等から開くと 404 に移動してしまう場合があった)
  • ブログを書いているとき、わざわざ SW を解除しないと全く更新されなくなることが度々あった

    • 今見てる状態が最新なのか常にわからない不安
  • 記事を追加してデプロイしても、SW のデータをまず見に行くため、過去にアクセスしたことのあるブラウザは少し待たないとトップページの記事一覧が更新されない
  • ページを開いた時、コンテンツが遅れて描画される動きをすることがあった(今は直ってる)
  • Chrome でソースを見た時にコンテンツが含まれてなくて不安になる(SEO 対策できてない気がしてしまう)

    • この挙動びっくりする。 https://www.gatsbyjs.org/blog/ を curl で取得したときと Chrome の view-source: 見比べてみてください。

など、いろいろありました。特に、Google Analytics を見ていると 404 ページへのアクセスがかなり多いように見えたのがきつかった。※1 静的なファイルとしてブログを吐き出せるだけでめちゃくちゃ速いのに、それ以上やってもろくなことがないのでは…。 SW を切ってからは基本的にただの HTML になります ※2 ので、問題が起ころうはずもなく、安心して生活を送れるようになりました。

オフライン機能が必要な Web サイトって、めちゃくちゃ限られるよな…。

gatsby-plugin-offline の消し方

ただ yarn remove gatsby-plugin-offline しただけではブラウザにインストール済みの SW が消えません。 たしかに sw.js は消えますが、オフラインになっても読み込むという動作をするのが SW ですので、ファイルが消えたからといってブラウザ上からなくなることはありません。 そのため、gatsby-plugin-offline を remove してからさらに、gatsby-plugin-remove-serviceworker を入れます。 このプラグインは、Service Worker が登録されていたら Service Worker を解除するという Service Worker を登録します。


  1. GatsbyJS v2 にした時以降直ってたかも。すぐ SW 切ったからよくわからない。

  2. ページ遷移は部分書き換えなのでめちゃくちゃ速い


2019年01月13日

買ってよかったもの 2019

今年もすでに 2 週間が経過しようとしているところ、2019 年いきなり速を出しすぎたようで、すでに買って良かったものをまとめたくなったので、はじめます。 (2018 年に注文しててやっと開封したやつとかも含んでます) 去年の記事はこちら https://blog.kksg…

2018年12月31日

買ってよかったもの 2018

毎年やりたいと思いつつもやったことがなかったこのシリーズ。2018 年に買って良かった物をまとめてみます。 ワークス SD…

2018年12月30日

当ブログを GatsbyJS v2 にアップグレードした

このブログを Gatsby JS に変えて 半年が経ち、さらに Announcing Gatsby 2.0.0 🎉🎉🎉 から 3 ヶ月、重い腰を上げてこのブログも最新の GatsbyJS v2 系にアップグレードしました。 見た目の変化はほぼないですが、PC…

2018年12月27日

洗濯乾燥機の検討

縦型洗濯乾燥機(201…

2018年11月16日

エディ太郎のアイコンを変えた

前回の記事 でアイコンを変えたい、なぜなら元のアイコンは改名前のアプリ名「dddraft」を模したものだから。 という話を書きました通り、さっそくアイコンを差し替えた「エディ太郎 1.3.…