Introduction to Service Worker

オフラインファーストとは

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'
});
};

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;
});

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
});
});

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;
});
}
});
})
);

Introduction to Service Worker

More Related Content

What's hot

Viewers also liked

More from Shogo Sensui

Introduction to Service Worker