参考

UpUp - Webのオフラインアクセス機能を簡単に実装する MOONGIFT
Service Worker の紹介 | Web | Google Developers
- localhost 以外で動かす場合は、 https が必要。

準備

https://github.com/TalAter/UpUp/releases から
https://github.com/TalAter/UpUp/archive/v0.3.0.zip
をダウンロード。

UpUp-0.3.0/demo/ 内から以下を取得

upup.min.js
upup.min.js.map
upup.sw.min.js
upup.sw.min.js.map

サンプル

1.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="/upup.min.js"></script>
<script>
    UpUp.start({'content-url': 'offline.html'});
</script>
</head>
<body>
通常のページ
</body>
</html>

offline.html

<head>
<meta charset="utf-8">
</head>
<body>
<pre>
インターネットに接続できていない可能性があります。

次の内容を確認してください。

* ケーブルがしっかり接続されていること

* ブロードバンドルーターの電源をOFF/ONして1分ほど経ってから
  再度ページを開き直してください。

</pre>
</body>
</html>

表示例

オンライン時

オフライン時