UpUp - Webのオフラインアクセス機能を簡単に実装する // MOONGIFT Archived

HTML5になって追加された機能の一つにオフラインアクセスがあります。しかし扱いが非常に難しく、あまり使われていません。しかしネットワークがない場所（飛行機など）で情報が確認できないのは非常にストレスでどうにか改善したいと考えている人も多いでしょう。
そこで使ってみたいのがUpUpです。オフラインアクセスを簡単に実装できるライブラリです。

UpUpの使い方

UpUpの適用です。UpUpというオブジェクトが鍵になります。これでオフライン時には別なHTMLが出せるようになります。


  
<meta charset="UTF-8">
  
<title>Lonely Globe Advisor</title>
  
  
  

# Top Hotels in Rome
  

  
1. Villa Domus - Via Piacenza 9, Rome, Italy
  
2. Hotel Trivelli - Piazza Barberini 11, Rome, Italy
  
  
<script src="/upup.min.js"></script>  
<script><br /> UpUp.start({<br /> 'content': '<html><body><h1>Top Hotels in Rome</h1><p>Villa Domus</p><p>Hotel Trivelli</p></body></html>'<br /> });<br /> </script>

もちろんこれでは使い勝手が悪いので、別途HTMLファイルを使うこともできます。さらにassetsを使ってスタイルシートや画像、JavaScriptファイルを定義できます。

<script><br /> UpUp.start({<br /> 'content-url': 'offline.html',<br /> 'assets': ['css/bootstrap.min.css', 'css/offline.css']<br /> });<br /></script>

最終的にこんな素敵なサイトすらオフラインで作れるようになります。

UpUpを使うことでオフラインアクセス時の面倒な定義を自動で行ってくれるようになります。開発者はオフライン用のコンテンツを定義、アセットを用意すればいいだけです。旅行系サイトなどオフライン時でも見たいと思われるようなサイトを作っている場合は要注目のソフトウェアでしょう。

UpUpはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

UpUp - The Offline First Library
TalAter/UpUp: Easily create sites that work offline as well as online