DEV Community

Zen
Zen

Posted on

PWA: Add to Homescreen

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')
Enter fullscreen mode Exit fullscreen mode

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);
    });
  });
}
Enter fullscreen mode Exit fullscreen mode

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"
    }]
}
Enter fullscreen mode Exit fullscreen mode

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)
                }
                )))
            }
            )))
        }
        ))
    }
});
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
fleshmecha profile image

Can you explain this?

Collapse
 
mzaini30 profile image
Zen

Try to open murajaah.js.org for example

Collapse
 
fleshmecha profile image
• Edited

What's the point of writing an article then? You could have just linked to the website if that was your goal

Thread Thread
 
mzaini30 profile image
Zen

They're the code for show dialog "add to homescreen"