PWA: Add to Homescreen
Published: 2020-04-11 23:03:06

---
title: "PWA: Add to Homescreen"
published: true
description: 
tags: 
---

# Rule

Your site must runs over HTTPS

index.pug:

```slim
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:

```javascript
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:

```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:

```javascript
!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)
                }
                )))
            }
            )))
        }
        ))
    }
});
```