DEV Community

loading...

PWA: Add to Homescreen

mzaini30 profile image Zen ・3 min read

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

Discussion (4)

pic
Editor guide
Collapse
fleshmecha profile image

Can you explain this?

Collapse
mzaini30 profile image
Zen Author

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 Author

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