• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Membuat File manifest.json untuk PWA

Kepala Suku

Web & Mobile Developer
Staff member
#1
Contoh isi File manifest.json untuk PWA adalah sebagai berikut:
JSON:
{
    "name": "DBengkel",
    "short_name": "DBengkel",
    "description": "Koleksi Data Bengkel Baik",
    "icons": [
        {
            "src": "https://data.bengkelbaik.net/icon.png",
            "sizes": "192x192",
            "type": "image\/png"
        },
        {
            "src": "https://data.bengkelbaik.net/icon.png",
            "sizes": "512x512",
            "type": "image\/png"
        }
    ],
    "background_color": "#D5E0EB",
    "theme_color": "#D5E0EB",
    "display": "standalone",
    "orientation": "portrait",
    "start_url": "https://data.bengkelbaik.net/",
    "scope": "https://data.bengkelbaik.net/",
    "gcm_sender_id": "482941778795",
    "gcm_sender_id_comment": "Do not change the GCM Sender ID"
}
Kode untuk ditaruh didalam <head>:
HTML:
<link rel="shortcut icon" href="{{url('/icon.png')}}" type="image/x-icon"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="{{url('/icon.png')}}"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#00a65a"/>
<link rel="manifest" href="/manifest.json"/>
<meta name="Description" content="Aplikasi untuk koleksi data Bengkel Baik">
 
Last edited:

Kepala Suku

Web & Mobile Developer
Staff member
#2
Kode service-worker.js

JavaScript:
var cacheName = 'nusa-pwa';
var filesToCache = [
    '/',
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll(filesToCache);
        })
    );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
    e.respondWith(
        caches.match(e.request).then(function(response) {
            return response || fetch(e.request);
        })
    );
});