Post on 18-Jul-2015
!
"# $
%&
オフラインファーストとは
' ( ) * +
#
, &
&&
-
- &
&&
var value = localStorage['key']; var json = JSON.parse(value); localStorage['key'] = JSON.stringify(json);
' ( ) * +
#
, -
--
--
- -
-
var db; var objectStore; var req = window.indexedDB.open('dbname', 3);
req.onsuccess = function(event) { db = event.target.result; };
req.onupgradeneeded = function(event) { db = event.target.result;
objectStore = db.createObjectStore('name', { keyPath: 'key' }); };
' ( ) * +
#
, -
--
--
- -
-
<html manifest=app.mf>
CACHE MANIFEST
# Resource to cache CACHE: index.html stylesheet.css image.png script.js
# Resource to bypass NETWORK: login.php /api/data
# Fallback URLs FALLBACK: / /offline.html
if (navigator.onLine) { $.ajax({ url: '/api/data', method: 'get' }).done(function (data) { render(data); }); } else { var cacheData = localStorage.getItem('key'); render(JSON.parse(cacheData)); }
var sw = navigator.serviceWorker; sw.register('sw.js').then(function (res) { console.log('sw.js is installed!'); }, function (error) { console.log('sw.js is not installed...'); });
self.addEventListener('fetch', function (e) { console.log('Request in Browser');
e.respondWith( new Response('Not Found', { status: 404 }) ); });
fetch('/url/json').then(function (res) { return res.json(); }).then(function (json) { console.log(json); });
caches.open('cache-key').then(function(cache) { return cache.addAll([ 'js/app.js', 'css/app.css', 'img/image.png' ]); });
caches.match(e.request).then(function (res) { return res; });
var sw = navigator.serviceWorker; sw.ready.then(function(reg) { reg.syncManager.register({ id: "periodicSync", minDelay: 60 * 60 * 1000, minPeriod: 12 * 60 * 60 * 1000, allowOnBattery: true idleRequired: false }).then(function() { // Success }); });
var sw = navigator.serviceWorker; sw.ready.then(function(reg) { reg.pushManager.subscribe().then( function(subscription) { // Success console.log(subscription.subscriptionId); console.log(subscription.endpoint); } }); });
' ( ) * +
#
,-
-
-
&&
&
-
e.respondWith( caches.open(CACHE_KEY).then(function (cache) { return cache.match(e.request) .then(function (response) { if (response) { return response; } else { return fetch(e.request.clone()) .then(function (res) { cache.put(e.request, res.clone()); return res; }); } }); }) );
.
!
/