オフラインでも基本の枠だけは表示されるサイトの作り方

Question

Twitterを使っていると、パソコンがインターネットに繋がっていない状態であってもtwitter.comを開いたときに基本の枠組みだけは表示され、ツイートが表示される枠内に「接続が失われました。確認してからやりなおしてください。」と表示されます。
私も自分のホームページをそういうふうにしたいのですが、どうすればオフラインでも表示できるのでしょうか。

Comments

[yuuyu]

少なくとも自分のPC及びスマホでは、インターネットに繋がっていない状態は枠組みすら表示されません（iPhoneがインターネットに接続されていないため、ページをSafariで開くことができません）が
「インターネットに繋がっていない状態」というのが、wi-fiを切った状態もしくは機内モードなどの完全に接続されていない状態という認識で合っているのでしょうか？

[退会済みユーザー]

webブラウザにキャッシュが残るようにすればいい、って話なのか、何かwebアプリとかSPAの話なのか、よくわからないなぁ。

[m.ts10806]

「一度アクセスした前程」があるかないかで違います。後者（一度もアクセスしたことない）では無理です。

Answer 1

スマホからなので簡単に。

https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API
https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja
serviceworker使って制御していると思います。

「接続が失われました。確認してからやりなおしてください。」

twitterにアクセス後機内モードにすると質問者の言う動きして、以下でtwitter関係のserviceworkerを消していくと動きが変わりました。
chrome://serviceworker-internals/

Comments

[otftrough]

ありがとうございます。これです。
SSL入れてないと動かせないんですね。

[oikashinoa]

httpsである必要性はgoogleの記事の方がわかりやすいと思うので、回答本文に追記しておきました。