Memahami caching PWA

Dengan melakukan caching pada PWA, maka kita masih dapat mengakses aplikasi kita pada waktu offline atau pada waktu jaringan internet mati.

Prinsip caching pada PWA adalah

Install service worker
Caching file yang diperlukan
Service worker aktif
Mencoba akses saat offline

Baiklah kita mencoba satu per satu

Install service worker pada /app04.js:

if ('serviceWorker' in navigator)
{
    navigator.serviceWorker.register('/sw04.js')
    .then(function(registration)
    {
        console.log("Berhasil registrasi service worker dengan scope:",registration.scope);
    })
    .catch(function(err)
    {
        console.log('registrasi gagal');
    });
}

Caching file yang diperlukan pada /sw04.js:

var nama_cache = "cacheku";
var daftar_file = 
[
    '/104-file-1.html',
    '/104-file-2.html',
    '/img/logo-100.jpg',
    '/offline.txt',
];
self.addEventListener('install', function(event)
{
    console.log('instal ya');
    event.waitUntil(
        caches.open(nama_cache)
        .then(function(cache)
        {
            console.log('melakukan caching');
            return cache.addAll(daftar_file);
        })
    );
});

self.addEventListener('fetch',function(event)
{
    console.log("masuk ke fetch listener");
    event.respondWith(
        caches.match(event.request)
        .then( (response)=>
        {
            if (response)
            {
                return response;
            }
                    
            return fetch(event.request).catch(function()
            {
                return caches.match('/offline.txt');
            });
        })
    )
});

Pada source code di atas kita akan melakukan caching pada file 104-file-1.html, 104-file-2.html, /img/logo-100.jpg dan offline.txt

Mengaktifkan service worker dengan menjalankan https://pwa.aris.proweb.asia/104-file-1.html pada browser Google Chrome:
Source code dari 104-file-1.html adalah seperti berikut ini

<html>

<head></head>

<body>

<a href=”104-file-2.html”>File 2</a>

<script src=”/app04.js”>

</script>

</body>

</html>

Pada saat kita menjalankan 104-file-1.html dan melihat pada More Tools – Developer Tools – Application bagian Cache – Cache Storage maka akan terlihat seperti gambar berikut ini:
Pada gambar di atas terlihat bahwa 104-file-1.html, 104-file-2.html dan logo-100.jpg sudah masuk cache sehingga bisa diakses tanpa jaringan internet.
Mengakses file secara offline:
Silahkan matikan jaringan internet anda dan coba akses ke https://pwa.aris.proweb.asia/104-file-2.html maka akan muncul seperti gambar di bawah ini

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Memahami caching PWA

PT Proweb Indonesia

One thought on “Memahami caching PWA”

Halo!