Rule
Your site must runs over HTTPS
index.pug:
link(rel='manifest' href='/manifest.json')
link(rel='apple-touch-icon' href='/icon/72.png')
link(rel='apple-touch-icon' href='/icon/96.png')
link(rel='apple-touch-icon' href='/icon/128.png')
link(rel='apple-touch-icon' href='/icon/144.png')
link(rel='apple-touch-icon' href='/icon/152.png')
link(rel='apple-touch-icon' href='/icon/192.png')
link(rel='apple-touch-icon' href='/icon/384.png')
link(rel='apple-touch-icon' href='/icon/512.png')
meta(name='apple-mobile-web-app-status-bar' content='#db4938')
meta(name='theme-color' content='#db4938')
index.js:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js', {
scope: '.' // <--- THIS BIT IS REQUIRED
}).then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
manifest.json:
{
"name": "Bercerita",
"short_name": "Bercerita",
"start_url": "/",
"display": "standalone",
"background_color": "#fdfdfd",
"theme_color": "#db4938",
"orientation": "portrait-primary",
"icons": [
{
"src": "/icon/72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/icon/96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/icon/128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/icon/144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/icon/152.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/icon/192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/icon/384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/icon/512.png",
"type": "image/png",
"sizes": "512x512"
}]
}
service-worker.js:
!function(e) {
var n = {};
function t(r) {
if (n[r])
return n[r].exports;
var o = n[r] = {
i: r,
l: !1,
exports: {}
};
return e[r].call(o.exports, o, o.exports, t),
o.l = !0,
o.exports
}
t.m = e,
t.c = n,
t.d = function(e, n, r) {
t.o(e, n) || Object.defineProperty(e, n, {
enumerable: !0,
get: r
})
}
,
t.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}),
Object.defineProperty(e, "__esModule", {
value: !0
})
}
,
t.t = function(e, n) {
if (1 & n && (e = t(e)),
8 & n)
return e;
if (4 & n && "object" == typeof e && e && e.__esModule)
return e;
var r = Object.create(null);
if (t.r(r),
Object.defineProperty(r, "default", {
enumerable: !0,
value: e
}),
2 & n && "string" != typeof e)
for (var o in e)
t.d(r, o, function(n) {
return e[n]
}
.bind(null, o));
return r
}
,
t.n = function(e) {
var n = e && e.__esModule ? function() {
return e.default
}
: function() {
return e
}
;
return t.d(n, "a", n),
n
}
,
t.o = function(e, n) {
return Object.prototype.hasOwnProperty.call(e, n)
}
,
t.p = "",
t(t.s = 340)
}({
340: function(e, n) {
var t = [
"/kelinci.gif",
"/",
"/index.html",
"/vendor/bootstrap/css/bootstrap.min.css",
"/vendor/jquery.min.js",
"/vendor/bootstrap/js/bootstrap.min.js",
"/vendor/olahJson.min.js",
"/manifest.json",
"/icon/72.png",
"/icon/96.png",
"/icon/128.png",
"/icon/144.png",
"/icon/152.png",
"/icon/192.png",
"/icon/384.png",
"/icon/512.png"
];
self.addEventListener("install", (function(e) {
e.waitUntil(caches.open("bercerita").then((function(e) {
return e.addAll(t)
}
)))
}
)),
self.addEventListener("fetch", (function(e) {
e.respondWith(caches.match(e.request, {
cacheName: "bercerita"
}).then((function(n) {
return n ? (console.log("ServiceWorker: Gunakan aset dari cache: ", n.url),
n) : (console.log("ServiceWorker: Memuat aset dari server: ", e.request.url),
fetch(e.request))
}
)))
}
)),
self.addEventListener("activate", (function(e) {
e.waitUntil(caches.keys().then((function(e) {
return Promise.all(e.map((function(e) {
if ("bercerita" != e)
return console.log("ServiceWorker: cache " + e + " dihapus"),
caches.delete(e)
}
)))
}
)))
}
))
}
});
Can you explain this?