Last Updated on January 24, 2022 by
Progressive Web App (PWA) adalah aplikasi web yang menggunakan service workers, manifes, dan fitur platform web lainnya dalam kombinasi dengan peningkatan progresif untuk memberi pengguna pengalaman yang setara dengan aplikasi asli.
PWA memberikan sejumlah keuntungan bagi pengguna termasuk dapat diinstal, ditingkatkan secara progresif, dirancang secara responsif, dapat digunakan kembali, dapat ditautkan, dapat ditemukan, independen jaringan, dan lebih aman dibanding aplikasi pada biasanya.
Aplikasi web progresif memungkinkan situs web berfungsi lebih seperti aplikasi seluler asli dengan imbalan beberapa fleksibilitas. Anda mendapatkan fungsionalitas aplikasi seluler. Pengguna dapat menginstal aplikasi web progresif ke layar beranda dan meluncurkannya seperti aplikasi asli.
Namun, aplikasi berjalan dalam bingkai aplikasi semu dengan beberapa batasan dan hanya dapat mengakses halaman yang merupakan sub-jalur dari jalur peluncuran aplikasi web progresif. Mereka juga harus dilayani melalui HTTPS.
Pada artikel ini, kita akan membahas tentang cara membuat Progressive Web App berdasarkan website yang sudah ada. Jika Anda ingin tahu bagaimana cara membuat PWA berdasarkan website yang sudah Anda miliki, simak terus langkah-langkah membuat aplikasi web progresif.
Table of Contents
Cara membuat Progressive Web App dengan Mudah
Berikut ini adalah langkah mudah membuat progressive web app.
1. Buat Manifes Aplikasi
Pertama-tama, buat manifes yaitu sebuah file JSON yang berisi informasi berikut:
- Nama kanonik situs web
- Nama pendek dan singkat untuk ikon
- Tema warna untuk situs web yang integrasi OS
- Warna latar belakang situs web untuk integrasi OS
- Cakupan URL yang dibatasi oleh progressive web app
- URL sumber untuk memuat secara implisit dalam instance baru dari Progressive Web Apps.
- Deskripsi yang dapat dibaca manusia
- Pembatasan orientasi (tidak bijaksana untuk mengubah ini dari “apa saja” tanpa batasan teknis yang keras)
- Ikon apa pun untuk situs web Anda yang akan digunakan di layar beranda (lihat generator manifes di atas untuk ikon pembuatan otomatis)
Informasi ini akan digunakan sebagai metadata tingkat OS untuk aplikasi web progresif Anda saat diinstal.
{
"name": "Murni Oktaviani",
"short_name": "Okta",
"theme_color": "#faf7ad",
"background_color": "#f5f2b0",
"display": "standalone",
"scope": "/",
"start_url": " https://appkey.id/",
"description": "Media Pengembangan Web & App",
"orientation": "tech",
"icons": [
{
"src": " https://appkey.id/wp-content/uploads/2020/10/webapp-logo.png",
"sizes": "490x90"
}
]
}
2. Tambahkan Manifest ke Template Dasar HTML Anda
Saat membuat Progressive Web App untuk menambahkan tautan HTML untuk manifes ke template HTML tingkat terendah dari aplikasi Anda, atau, dalam kasus aplikasi web sisi klien murni, file index.html utamanya, karena harus terlihat oleh browser klien mencoba menginstal aplikasi.
Menambahkan manifest ini cukup sederhana. Dengan asumsi Anda menghosting manifes ini di jalur /static/manifest.json, cukup tambahkan ke bagian <head>:
<link rel="manifest" href="/static/manifest.json">
3. Buat offline.html sebagai nama lain untuk index.html
Secara default, kode service worker di bawah ini akan merender /offline.html dibandingkan sumber daya apa pun yang tidak dapat diambil saat offline. Buat file di <your-scope>/offline.html untuk memberikan pesan kesalahan yang lebih bermanfaat kepada pengguna Anda, menjelaskan bahwa data ini tidak di-cache dan pengguna sedang offline.
Jika Anda mengadaptasi aplikasi web satu halaman, Anda mungkin ingin membuat offline.html tautan simbolis ke file index.html Anda dan menangani 404 offline di dalamnya. Jika pengguna tidak dapat keluar dari halaman offline, ini berpotensi membingungkan atau membuat pengguna terdampar di layar “offline” yang tidak berguna.
Ini meniadakan banyak poin dari aplikasi web progresif di tempat pertama. Pastikan untuk memiliki semacam tombol “kembali” di semua halaman kesalahan.
Di macOS dan Linux, Anda dapat menautkan offline.html ke index.html secara simbolis seperti ini:
$ ln -s index.html offline.html
4. Buat Worker Service
Saat service worker digunakan dengan fetch event, Anda dapat menyiapkan cache aset dan halaman saat pengguna menjelajah. Ini membuat konten tersedia secara offline dan memuatnya lebih cepat secara signifikan. Kami hanya akan fokus pada fitur caching offline service worker hari ini daripada sinkronisasi latar belakang otomatis, karena iOS belum mendukung sinkronisasi latar belakang (walaupun semuanya bergerak ke arah yang baik).
Anda bsa pikirkan tentang sumber daya dan halaman di mana pengguna situs selalu memiliki akses ke banyak salinan pada tingkat tinggi, bahkan jika mereka tidak mutakhir. Halaman-halaman ini juga akan di-cache untuk setiap pengguna situs web tersebut dengan browser yang mendukung service worker. Anda lebih disarankan untuk melakukan caching secara implisit setidaknya yang berikut:
- File CSS, JavaScript, atau gambar apa pun yang menjadi inti operasi situs web Anda yang tidak dimuat oleh rute awal Anda.
- Informasi kontak untuk orang, perusahaan, atau layanan yang menjalankan progressive web app.
- Informasi atau halaman lain yang bisa jadi berguna bagi pengguna website yang Anda miliki.
Sebagai contoh, Anda mungkin memiliki pra-cache ketika membuat blog portofolio Anda sendiri:
- Beranda (secara implisit menyertakan semua CSS di situs) /
- Indeks blog /blog/
- Informasi kontak / kontak
- Resume / resume
- Halaman informasi offline /offline.html
Ini diterjemahkan ke dalam kode service worker berikut:
self.addEventListener("install", function(event) {
event.waitUntil(preLoad());
});
var preLoad = function(){
console.log("Instal web app");
return caches.open("offline").then(function(cache) {
console.log("caching index dan rute penting");
return cache.addAll(["/blog/", "/blog", "/", "/kontak", "/resume", "/offline.html"]);
});
};
self.addEventListener("fetch", function(event) {
event.respondWith(checkResponse(event.request).catch(function() {
return returnFromCache(event.request);
}));
event.waitUntil(addToCache(event.request));
});
var checkResponse = function(request){
return new Promise(function(fulfill, reject) {
fetch(request).then(function(response){
if(response.status !== 404) {
fulfill(response);
} else {
reject();
}
}, reject);
});
};
var addToCache = function(request){
return caches.open("offline").then(function (cache) {
return fetch(request).then(function (response) {
console.log(response.url + " was cached");
return cache.put(request, response);
});
});
};
var returnFromCache = function(request){
return caches.open("offline").then(function (cache) {
return cache.match(request).then(function (matching) {
if(!matching || matching.status == 404) {
return cache.match("offline.html");
} else {
return matching;
}
});
});
};
Anda meng-host di atas di <your-scope>/sw.js. File ini harus disajikan dari tingkat yang sama dengan ruang lingkup. Tidak ada jalan lain untuk ini, sayangnya.
5. Muat Service worker pada Progressive Web App Anda
Untuk memuat service worker, kami hanya menambahkan yang berikut ini ke template HTML dasar Anda di akhir tag <body> Anda:
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register("/sw.js").then(function(reg) {
console.log("Service worker telah terdaftar untuk cakupan: " + reg.scope);
});
}
</script>
Dan kemudian terapkan perubahan ini Anda akan melihat service worker Anda memposting log di konsol browser Anda. Jika Anda menguji ini dari ponsel, lihat petunjuk khusus platform di sini untuk iOS+Safari dan di sini untuk Chrome+Android.
6. Terapkan Aplikasi Web Progresif Anda
Menyebarkan aplikasi web Anda akan spesifik untuk bagaimana aplikasi Anda dikembangkan. Jika Anda belum memiliki tempat untuk meletakkannya, Heroku menawarkan cara yang bagus dan sederhana untuk meng-host aplikasi web progresif. Menggunakan static buildpack adalah cara tercepat untuk men-deploy aplikasi statis (yaitu yang hanya HTML, JavaScript, dan CSS).
7. Gunakan Progressive Web App Anda
Untuk Safari iOS, buka halaman web yang ingin Anda tambahkan sebagai aplikasi, lalu klik tombol bagikan. Ketuk tombol “Tambahkan ke Layar Beranda” pada lembar bagikan. Dialog berikutnya akan memungkinkan Anda memberi nama dan mengubah halaman awal URL dari aplikasi web progresif sebelum ditambahkan ke layar beranda. Anda kemudian dapat meluncurkan, mengelola, dan menghapusnya seperti aplikasi lainnya.
Untuk Android dengan Chrome, ketuk menu hamburger di sudut kanan atas jendela browser, lalu ketuk “Tambahkan ke layar Utama”. Ini mungkin meminta Anda untuk konfirmasi, kemudian itu akan menempatkan ikon di layar beranda Anda dan Anda dapat meluncurkan, melakukan banyak tugas atau menghapusnya seperti aplikasi lain.Tidak seperti iOS, Anda tidak dapat mengedit URL awal atau nama aplikasi web progresif dengan Android.
Setelah semua langkah ini, Anda akan memiliki aplikasi web progresif. Halaman atau aset apa pun yang dimuat pengguna akan di-cache dengan mulus untuk akses offline di masa mendatang. Akan menarik untuk melihat bagaimana service worker berkembang di masa depan.
Demikianlah penjelasan tentang cara membuat Progressive Web App dengan mudah. Anda bisa mempraktekan langkah-langkah ini, tentunya dengan kreasi Anda sendiri. Jika Anda ingin tahu lebih banyak informasi seputar aplikasi web progresif, kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
