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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

More from Shogo Sensui

More from Shogo Sensui (13)

Introduction to Service Worker