Cara menggunakan php worker example

Question

Perkembangan dunia IT akhir-akhir ini berkembang sangat pesat, begitu juga dengan tingkat kebutuhan perusahaan. Namun, meskipun tingkat kebutuhan perusahaan meningkat, perusahaan tentu juga menginginkan sesuatu yang dapat dikerjakan dengan efesien dan efektif.

Table of Contents Show

Setup Aplikasi

Contohnya saja ketika kamu akan membuat sebuah aplikasi, tentu saja kamu akan memikirkan proses pembuatan aplikasi versi web, versi android, bahkan tidak tertutup kemungkinan juga untuk versi IOS. Tentu kamu akan mengeluarkan waktu yang lama untuk proses pembuatan dan juga biaya yang banyak untuk membuat semua aplikasi tersebut.

Nah, PWA merupakan solusi dari permasalahan diatas. Dimana kamu dapat membuat semua aplikasi tersebut sekaligus. Dapat dijalankan pada perangkat desktop, dapat diinstal pada android, begitu juga dengan perangkat IOS. Singkatnya, ketika user mangakses halaman web PWA menggunakan browser, user akan menemukan tombol "Install Apps" yang kemudian apabila diklik, sistem akan secara langsung menginstal aplikasi tersebut kedalam perangkat user dan menghasilkan sebuah shortcut. Ketika shortcut tersebut diklik, aplikasi web kamu akan terbuka pada layar user layaknya aplikasi native pada umumnya.

PWA merupakan singkatan dari Progressive Web Apps. PWA bisa juga diartikan sebagai gabungan antara aplikasi desktop dan mobile. Ada banyak framework yang dapat membawamu ke PWA, salah satu contohnya Angular Framework. Namun pada artikel kali ini, kamu akan mempelajari bagaimana cara membuat aplikasi PWA sederhana dari nol.

Contoh

Sudah begitu banyak website modern yang menerapkan konsep PWA ini, di lini streaming video kamu dapat menemuinya pada Youtube dan Viu. Sementara untuk website lainnya kamu juga dapat menjumpai di Petani Kode, CodePolitan, dan juga Dazelpro tentunya

Persiapan

Sabar, ada beberapa hal yang perlu kamu siapkan dulu sebelum mulai ngoding. Pastikan dulu semuanya sudah kamu siapkan.

Browser Chrome
Visual Studio Code
Plugin Live Server VS Code

Jangan remehkan dulu, disini kamu akan saya rekomendasikan untuk menggunakan browser Google Chrome. Bukan tanpa alasan, karena memang ada beberapa browser yang belum support untuk PWA. Meskipun rata-rata sudah support semua, namun untuk kemudahan dalam tahap pengerjaan, kamu direkomendasikan menggunakan Chrome versi terbaru.

Kemudian kamu juga direkomendasikan menggunakan Visual Studio Code agar dapat menginstal plugin live server. Ini bertujuan untuk melihat hasil dari aplikasi yang sudah kamu buat nanti. Namun jika kamu ingin menggunakan tools lain, silahkan saja selama kamu tahu cara menggunakannya.

Setup Aplikasi

Sekarang kita masuk ke tahap setup aplikasi. Untuk menghasilkan aplikasi PWA kamu harus memperhatikan betul susunan dari aplikasi yang akan dibuat nanti. Salah sedikit saja aplikasi kamu tidak akan berjalan sesuai dengan yang diinginkan.

Pertama, buatlah sebuah folder dengan nama simple-pwa. Kemudian buat susunan setup aplikasi PWA seperti susunan berikut:

Seperti yang kamu lihat diatas, di dalam folder simple-pwa yang kamu buat tadi terdapat folder assets. Di dalam folder assets tersebut terdapat 3 subfolder lagi yaitu css, img, dan js.

Silahkan buat file dengan nama dan ekstensi seperti format diatas. Khusus untuk file icon.png digunakan sebagai icon shortcut aplikasi kamu nantinya. Jadi bebas kamu ingin menggunakan icon apapun. Sebagai contoh kamu juga bisa menggunakan icon dazelpro berikut:

Icon diatas memiliki resolusi 192x192 pixel. Silahkan menggunakan icon manapun dengan syarat kamu harus mengetahui resolusi dari icon tersebut. Kenapa harus seperti itu? Karena resolusi dari icon ini akan kita masukan kedalam konfigurasi manifest nantinya. Sehingga apabila kamu salah dalam memberikan informasi resolusi icon tersebut maka aplikasi PWA kamu tidak akan bisa diinstal oleh user.

Ngoding

Buka file index.html kemudian salin kode berikut:




    
    
    Simple PWA
    
    
    
    


    
        
Selamat Datang
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        About

Selanjutnya buka file about.html dan salin kode berikut:




    
    
    Simple PWA
    
    
    


    
        
About
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Kembali

Untuk mempercantik tampilan, tambahkan kode berikut pada file style.css:

body {
    text-align: center;
    padding-right: 10%;
    padding-left: 10%;
    background-color: rgb(236, 236, 236);
}
h1 {
    font-size: 3em;
}
p, 
a {
    font-size: 18px;
}
p {
    text-align: justify;
}

Sekarang saatnya kamu melakukan pengujian pertama menggunakan plugin Live Server dari Visual Studio Code.

Caranya cukup gampang, kamu tinggal buka file index.html di VSCode. Kemudian klik kanan di area code. Pilih Open with Live Server.

Secara otomatis, browser Chrome akan terbuka dengan sendirinya dan mengarahkan kamu ke url http://127.0.0.1:5500/index.html atau ke http://localhost:5500/index.html.

Berikut tampilan aplikasi website yang baru kamu buat:

Untuk tampilan kamu sudah dapatkan seperti gambar diatas, kamu bebas bila ingin berimprovisasi terhadap tampilan.

Sekarang kita lanjut ke tahap pembuatan PWA-nya. Buka file web.webmanifest yang ada di folder js. Kemudian salin kode berikut:

{
    "name": "Testing PWA",
    "short_name": "PWA",
    "description": "Membuat Aplikasi PWA Pertama",
    "icons": [
        {
            "src": "../img/icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "fullscreen",
    "theme_color": "#0d0072",
    "background_color": "#0d0072"
}

Pada file inilah kamu akan melakukan konfigurasi terhadap PWA. Mulai dari menentukan nama aplikasi, logo icon yang tampil beserta resolusinya, sampai kepada configurasi warna tema ketika aplikasi ini diinstal.

Selanjutnya buka file register.js yang berada di folder js. Lalu salin kode berikut:

document.addEventListener('DOMContentLoaded', init, false);

function init() {
    if ('serviceWorker' in navigator && navigator.onLine) {
        navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
            console.log('Registrasi service worker Berhasil', reg);
        }, (err) => {
            console.error('Registrasi service worker Gagal', err);
        });
    }
}

Kode ini akan langsung dieksekusi ketika website diakses, lalu akan mendaftarkan service worker yang berada didalam folder root (simple-pwa).

Service worker merupakan sebuah script website yang dijalankan terpisah dari halaman website. Sehingga dengan service worker kamu dapat melakukan banyak hal seperti push notifikasi, add to home screen, bahkan menjalankan aplikasi pada saat kondisi offline. Untuk lebih lanjut kamu bisa baca disini.

Buka file service-worker.js dan salin kode berikut:

const CACHE_NAME = 'SW-001';
const toCache = [
    '/',
    'assets/js/web.webmanifest',
    'assets/js/register.js',
    'assets/img/icon.png',
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            return cache.addAll(toCache)
        })
        .then(self.skipWaiting())
    )
})

self.addEventListener('fetch', function(event) {
    event.respondWith(
        fetch(event.request)
        .catch(() => {
            return caches.open(CACHE_NAME)
            .then((cache) => {
                return cache.match(event.request)
            })
        })
    )
})

self.addEventListener('activate', function(event) {
    event.waitUntil(
        caches.keys()
        .then((keyList) => {
            return Promise.all(keyList.map((key) => {
            if (key !== CACHE_NAME) {
                console.log('[ServiceWorker] Hapus cache lama', key)
                return caches.delete(key)
            }
            }))
        })
        .then(() => self.clients.claim())
    )
})

Pada kode diatas kamu melihat tulisan SW-001 yang merupakan nama dari cache yang kita buat. Jadi cara kerjanya, service worker akan men-cache semua file yang telah kamu tentukan didalam variabel toCache. Sehingga website dapat dipanggil atau dijalankan dari luar browser.

Hal terpending yang perlu kamu ingat adalah, ketika merubah file yang di cache diatas, kamu harus merubah nama dari cache tersebut agar browser tidak membaca cache yang lama.

Uji Coba

Terakhir, silahkan uji coba menggunakan Live Server kembali dengan cara yang sama seperti diatas. Pada area code index.html, klik kanan dan pilih Open with Liver Server. Pada browser kamu akan mendapatkan tampilan seperti berikut:

Jika kamu mendapatkan icon plus pada samping kanan url, itu artinya aplikasi PWA-mu berjalan dengan lancar. Apabila tombol install diklik, secara otomatis icon aplikasi kamu akan ditambahkan ke desktop.

Berikut adalah tampilan ketika aplikasi PWA dijalankan melalui shortcut diatas (diluar browser).

Kesimpulan

Sampai disini kamu telah belajar membuat dan menjalankan aplikasi PWA. Kamu juga sudah mempelajari bagaimana cara kerja dari aplikasi PWA. Link source code full pada artikel ini dapat kamu download pada halaman github saya. Terus support penulis dengan membagikan artikel ini dimedia sosial kamu atau trakteer penulis di trakteer.id

kode php