ネイティブのようなWebアプリを作る！ オフラインWEBアプリケーション作成
Webでもリッチなコンテンツが作れるようになってきている
✔︎ オフラインWebアプリ
✔︎ JSフレームワークの進化
✔︎ CSS3の進化
✔︎ WebSocketの進化
✔︎ http2
✔︎ Web Push
とかとか。
このあたりの要素とてもワクワクするので
そろそろ一つ作り上げてみたいのです。
オフラインWebアプリケーションを作成する
まずはオフライン化。ローカルにデータ持つだけなら
通信繋がっていなくてもWEBアプリ開けるなんて。
1.マニフェストファイルを作成する
document root配下に以下のファイルを設置
appcache.manifest
CACHE MANIFEST
index.html
img/sample.jpg
こちらに記載したファイルをローカルにキャッシュして、
２度目以降は通信しないで表示ができる
2.htmlでマニフェストファイルを読み込む
index.htmlのhtmlタグにmanifestファイルを指定
<html lang="ja" manifest="appcache.manifest">
3. .htaccessでヘッダ追加
manifestファイルはこちらのヘッダをつけると有効になるらしい
AddType text/cache-manifest .manifest
4. アクセスしてみる
index.htmlにアクセスしてみる
Document was loaded from Application Cache with manifest http://xxxxx/appcache.manifest
Application Cache Checking event
Application Cache NoUpdate event
マニフェストファイルにアクセスしてみるとレスポンスヘッダに
ちゃんとついている
これでキャッシュされたはず
5. オフラインでアクセスしてみる
無事表示されればOK.
そこまで難しくない。世の中素晴らしい。
