ANSWER SONG アンサーソング。 | 答えを謳うブログ。

【ブログ】PWAはキャッシュが邪魔!初心者は手を出すな

前回AMPを軽くDISった(【初心者目線】ブログのAMP化は不要!5Gで陳腐化します)んですが、今回はPWAをDISります

じつは当ブログではAMP化と同時並行でPWAにも取り組んでいました。

そして両方有効化したあと一瞬で両方無効化するはめになったので、両方DISることにしたわけです。

なお、AMPやDISやPWAについて、略されすぎてよくわからないという方は、


AMP
AMPについては前回の記事で軽くDISる前に軽く説明しているので、そちらをご参照ください。
Google
DISについてはググってください。
PWA
PWAについてはこれからご説明いたします。

PWAの簡単な概要

PWAとは、Progressive Web Appsのイニシャルを取った略称です。

PWAの読み方は「ピーダブリューエー」です。

そしてPWAの機能ですが、文字通り、


AMAZING!
WebサイトをAppsのようにProgressiveさせます!

というわけですが、わかりにくいですよね。

PWAのイニシャルごとに解説すると(文法上の都合で順番は入れ替えますが)、

  1. Webサイトはいまご覧になっているようなインターネット上に存在する場
  2. AppはApplication softwareの略で、appsはその複数形、いわゆるアプリ
  3. Progressiveは革新とか進化とかなんかそんな感じの意味を持った英単語

です。

つまりPWA機能を当ブログに当てはめるなら、


PWA通信
アンサーソング。がアプリになって新登場! いつでもお手持ちの端末に入れて表示可能! そう、スマホアプリのようにホーム画面に追加できちゃうんです! ワーオ、なんて革新的な技術なの!? ブログがアプリに進化しちゃったわ!!

まあこんな感じです。

なおPWAは、Googleが主導するプロジェクトです。

そしてPWAの導入方法ですが、WordPressならプラグイン「Super Progressive Web Apps」などをインストールして設定するか、使用しているWordPressテーマがPWA機能に対応していれば、そちらで設定して有効化するだけです。

たとえば当ブログの使用テーマ「THE THOR」の場合は、標準でAMP化に対応しているため、専用のアイコン画像を用意して有効化するだけで済みます。

PWAのメリット

で、当ブログでPWA機能を有効化した場合、スマホなどで当ブログを閲覧したユーザーに、


アンサーソング。
ホーム画面に アンサーソング。 を追加 [×]

みたいな案内を表示させ、お人好しなユーザーが許諾したとき、

  • ユーザーのスマホに侵入
  • 更新情報をプッシュ通知
  • アイコンからの起動促進
  • キャッシュから高速表示
  • オフラインでも閲覧可能

といったお節介を焼いてくれるって寸法です。

PWAのデメリット

まったく、ウザいことこの上ないですよね。

なにがウザいかって、別にこんなブログ、アプリにしてまで見たくねえよっていう、その一言に尽きますよね。

これってユーザー目線でも自虐路線でもなんでもなく、逆にユーザーのことなんか完璧に無視した私の自己中心的な本心ですからね。

理由は三つ。

  1. 私のスマホのホーム画面を汚すな
  2. オフラインでの閲覧はデメリット
  3. そもそもキャッシュ機能がウザい

ひとつずつ説明します。

私のスマホのホーム画面を汚すな

まずスマホのホーム画面について。

そもそも私はPCでもスマホでも、デスクトップ画面やホーム画面にアイコンがいっぱいあるのが嫌いで、PCならデスクトップ画面には「ごみ箱」しかないし、スマホのホーム画面はさすがにそういうわけにはいきませんが、スッキリ最小限に整理整頓しています。

なのに、そのスッキリホーム画面に、自分のブログ一個のためにアイコン一個追加……?


安田尊@答えを謳うブログ
するわけないじゃんバーカ!!
安田尊@価値を謳うブログ
スペースと価値が釣り合ってねえんだよ!!
安田尊@継続を謳うブログ
最低でも毎日更新を一年継続してから出直してこいカス。

もっとも、そんなに頻繁に更新されたら通知がウザすぎて通知オフにするしそしたらPWAのメリット半分ぐらい死ぬけどな!!

オフラインでの閲覧はデメリット

次に「PWAのメリット」のほうでも紹介しましたが、オフラインでの閲覧について。

おさらいをしておくと、PWA機能でスマホに取り込んだサイトは、あらかじめ保存しておいたキャッシュを利用し、オフラインでのWebサイト閲覧を可能にします。

で、このオフラインでWebサイトを閲覧する機能って、「PWAのメリット」として周知されているので、当記事上部でも躊躇なくメリットとして紹介したんですが、個人的にはデメリットでしかないです。

だって修正できないじゃん

オフラインで閲覧ってことは、じゃあその状態で自分のブログを見て、


安田尊@過去ログを謳うブログ
やっべ、昔の私が致命的なミスをやらかしている……!

って修正したい箇所が見つかったとき、でも自分の環境はオフラインだから、ネット上にあるページには手が出せないわけじゃん?

ってことは自分の環境がオンラインになるまで、ずっともやもやするじゃん!!

自分のミスが全世界に公開されたまま、それを知っていながらただ指をくわえて眺めていることしかできない……。


安田尊@もやもやを謳うブログ
もやもやもやもやもやもやもやもや……
安田尊@気持ちを謳うブログ
この落ち着かない気持ちはどうしたらいいの?
安田尊@継続を謳うブログ
どうにもならないよ!!
服の色が変わっているのは、一日じゃWi-Fi見つけられなくてオフライン生活二日目に突入して着替えたからだよ!!
オンラインになるまで、どうにもならないよ!!
 

ってことは予防するしかなくて、予防するにはオフラインで自分のサイトなんか見ないに尽きる。

オフラインで自分のサイト見てるやつアホ

あとオフラインで自分のサイト以外を見てるやつもアホ。

だってオンライン同士だったら運営者がサイトを修正したとき、ユーザー側の閲覧環境にも順次反映されるけど、オフラインで閲覧しているユーザーがいたらそのユーザーには反映されない。

ユーザーが過去に保存されたキャッシュを読み込んでいる限り、そのユーザーはずっと過去の情報しか読み込めない。

しかも次の項目でDISるけど、オンラインでも反映されない!!

そもそもキャッシュ機能がウザい

これは私がPWA機能を有効化して最初に記事を投稿したときの話です。

この記事なんですが↓

【見殺し】トロッコ問題は「何もしない」が正解の理由を解説

上記のトロッコ問題をテーマにした記事を投稿したあと、私は一応PCでブログのトップページにアクセスしました。

使用ブラウザはGoogle Chromeで、最新記事がちゃんと投稿されているかどうかをチェックするためです。

結果、トロッコ問題の記事は投稿されていませんでした。

私は、


安田尊@ラグを謳うブログ
まあ反映まで多少のラグが生じることもあるよね

と思い、少し経ってからブログに再アクセスしました。

結果、トロッコ問題の記事は投稿されていませんでした。

私はブラウザの更新ボタンをクリックしてトップページを更新しました。

結果、トロッコ問題の記事が見当たりません。


安田尊@違和感を謳うブログ
おかしい……
@ans_song
私は当ブログのTwitterアカウントを確認しました。
Tweet@BOT
このTwitterアカウントは当ブログと連動しており、当ブログに記事が投稿されると自動でお知らせしてくれる優れものです。

結果、当ブログのTwitterアカウントはトロッコ問題の記事を呟いていました。

私はその呟きからトロッコ問題の記事にアクセスしてみました。

結果、トロッコ問題の記事は存在していました。

しかし、改めてブログのトップページにアクセスすると、トロッコ問題の記事は投稿されていません。


安田尊@ラグを謳うブログ
私は次に、スマホで自分のブログにアクセスしてみました。

ちなみにスマホのほうも使用ブラウザはGoogle Chromeです。

結果、スマホ画面に表示させたブログのトップページでは、トロッコ問題の記事が投稿されていました。

が、PC画面に戻ってブログのトップページを再表示させると、トロッコ問題の記事は投稿されていません。


安田尊@違和感を謳うブログ
ふむ……
安田尊@皿洗いを謳うブログ
私は台所に立ち、食器を洗い始めました。
安田尊@名推理を謳うブログ
とりあえず……スマホから見ればブログのトップページにトロッコ問題の記事は反映されていた……ということは、バグっているのはブログではなく、私のPC環境だろう……まあそれなら別に、放置でいいか……そのうち勝手に直るだろう……時間が解決してくれることもある……

そして食器洗いを終えた私は、ブログのプロフィール欄を弄り始めました。

当時私のブログは、AMP化やPWA化、記事に挿入したイラストの修正、タグ付けなどを施している最中であり、プロフィール欄には、


安田尊@工事中を謳うブログ
現在工事中につき、タグ等不完全です。

と記載されていました。

その工事も終わったので、「工事中」の文言は削除し、新たに、


安田尊@目標を謳うブログ
2019年目標:3~9月74記事+10月6記事+11月10記事+12月10記事=100記事でいきます。

と、従来から掲げていた目標(年内100記事)と、月ごとの具体的な数字目標も掲げました。

で、トップページを確認しました。

結果、反映されていません。

うん、まあPCはね、まだバグってるからね、と思いながら私はスマホでも確認しました。

反映されていません。


安田尊@異常を謳うブログ
……なんかおかしくない?

私はここにきてようやく、「違和感」を「異常事態」に昇格させました。

とりあえずこうして更新が反映されないときに一番疑わしいのはキャッシュなので、まずPCでブログのトップページをスーパーリロード(キャッシュを忘却の彼方に追いやり一から読み込み直す更新)を行なったところ、なんとトロッコ問題の記事も投稿されているし、プロフィール欄も更新されているではありませんか!


安田尊@答えを謳うブログ
な~んだ、やっぱキャッシュか

と私は一瞬で問題を解決し、自分で最新のプロフィール欄を読み返すとちょっと不自然な箇所があったので加筆修正を施しました。

で、ブログのトップページを更新して確認しました。

結果、トロッコ問題の記事が消え、プロフィール欄には「工事中」の文言が記載されていました。


安田尊@異常を謳うブログ
…………

私はふたたびスーパーリロードを行いました。

するとばっちり、投稿記事もプロフィール欄も「最新の状態」が反映されます。

が、そこから普通に更新し直すと、「二個前の状態」が映しだされます。

最新の状態が表示されるはずなのに、一度目のスーパーリロードで確認した更新さえも消し飛ばして、なぜかその前、「二個前」に逆行している……。

私はなんかよくわからないけど、漫画「ジョジョの奇妙な冒険」にでてくるボスキャラのスタンド能力並みにややこしいことになっている……と直感しました。

しかしこうした異常事態に直面したとき、疑うべきは、


安田尊@答えを謳うブログ
最後に「異常なし」と認識していたときから「異常あり」と認識するまでの間にやったこと

です。

そして当ブログの場合は、「異常なし」から「異常あり」の間に、工事を実施していました。

ということは、工事内容のうち、画像の軽量化やタグ付けなんかでこんなことにはならないはずなので、

  1. AMP
  2. PWA

どちらかが確実に怪しく、しかもこのとき、AMPはゴミだったので停止していました。

ということは……?

私はPWAを停止しました

そしてブログのトップページにアクセスし直しました。

最新の状態が反映されています。

普通に更新しても最新の状態です。

二個前に戻ったりしません。


安田尊@事件解決を謳うブログ
ケースクローズドです。

そのあと同様の症状について調べた結果、これはPWAのキャッシュ機能に粘着されていたようです。

PWAは、キャッシュによってページの高速表示、オフラインでの閲覧、そうした機能を提示する代わりに、ブラウザでもある時点でのキャッシュを強固に保持しすぎてしまう

それゆえ、リロードしてもだいしゅきホールドされたキャッシュが手放されることはなく、古いデータのほうが優先表示されてしまう。

私はPWAの専門家ではないので、この説明は技術的に正確ではないかもしれませんが、感覚的な表現としてはそんなところです。

さて、では長々と経験談を書き綴ってしまいましたが、結論です。


安田尊@答えを謳うブログ
PWAはゴミ

まとめ

というわけで、ブログ初心者がPWAに手を出した結果、時間の無駄だった話でしたが、まとめます。

前提として環境次第ではありますが、サイト運営者は、

  1. PWAのキャッシュ機能は粘着質
  2. そのせいで更新が反映されない
  3. そもそもスマホに入れても邪魔

上記の理由により、PWAには手を出さないほうが無難です。

ただし、キャッシュを調整して丁度良い感じにできる方であれば、問題の九割は解決されます。

が、それでも私は、ブログをスマホのホーム画面に追加したり、オフラインでも閲覧を迫られたりするのはウザったいので、導入は見送ります。

まあ導入しても、自分のスマホで許諾しなければいいだけの話なんですが。

それでもとにかく、(私以外のだれかが)キャッシュ機能をなんとかし(てくれ)ない限りPWAはゴミです。

導入に値しません。

以上。

DIS IS THE ANSWER.

>answersong.com

answersong.com