ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
WMCache
WMCache.js は、ブラウザ上で、大容量かつ高速に動作するクライアントサイドストレージ機能を提供します。 これは現時点で提供できる、もっとも理想的なクライアントキャッシュの姿です。 クライアントストレージの歴史 も参照してください。 特徴 iOS 8 Mobile Safari, Chrome for Android をサポートしています Android Browser はサポート対象外です。ChromeTrigger.js を使い、Chrome for Android にユーザを誘導してください 大容量のストレージを提供します 端末の空きストレージの10%を利用できます ユーザにストレージの使用許可を求めるダイアログを表示しません 容量不足になると自動的にGCが実行されます ユーザがコントロール可能なブラウザキャッシュとして、またユーザデータの保存先(大容量のLocalStorag
RequireJSを活用したキャッシュ防止、A/Bテスト、画像事前読込など - Kengo's blog
[for English user] This article is a simple introduction about my project for Japanese developer. You do not have to read this, reading this project directly would be enough. RequireJSの応用方法について調べた内容をGitHubでまとめています。実装詳細はGitHubをご覧いただくとして、このエントリではそれぞれの応用について簡単な紹介をしたいと思います。 キャッシュ防止 JavaScriptファイルがブラウザにキャッシュされてしまうために、スーパーリロードなりキャッシュのクリアなりをしないと変更後のファイルが試せないことがあります。 キャッシュを防ぐ方法としてクエリパラメータの利用が知られていますが、Requ
ブラウザの戻るでJavaScriptの効果が残っている時の対処法｜web bibo
JavaScriptで効果を与えたとき、別ページに飛んだあとブラウザの戻るボタンで、その効果が残っている時の対処法です。 例えば、画像にマウスオーバー処理を与えます。その画像をクリックし、別ページに飛んだあとブラウザの戻るボタンで戻るとマウスオーバー時の画像がそのまま残ってしまいます（Firefox、Safariのみ。IEは大丈夫。）これをどうやって解決するかというと window.onunloadを使ってキャッシュを無効に 上記の様な現象が起こるのはブラウザのキャッシュのせいで、これを無効にすればいいのです。 FirefoxやSafariはonunloadイベントがあるとキャッシュしないみたいなので window.onunload=function(){} と書けばOK。 試してみたい方はこのコードを使ってみてください。 <body onload="alert('test');"> と書
戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します（Back Forward Cacheと呼ばれます）。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
