参考
- 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>
表示例
オンライン時
オフライン時
