Tampilan seperti aplikasi native<\/li>\n<\/ul>\n\n\n\nCocok banget untuk kamu yang ingin membangun aplikasi sederhana tapi powerful, tanpa harus membuat dua versi (web dan mobile) secara terpisah.<\/p>\n\n\n\n
Ingin jadi ahli di bidang pengembangan web? Mengikuti Sertifikasi Web Developer<\/strong> adalah langkah tepat untuk memperkuat skill coding, memahami teknologi terbaru seperti PWA, SPA, hingga backend development, dan meningkatkan peluang karier di industri digital yang terus berkembang.<\/p>\n\n\n\n<\/span>Langkah Awal Belajar Membuat PWA<\/strong><\/span><\/h2>\n\n\n\nSebelum kita masuk ke tahap teknis, ada baiknya kamu memahami beberapa komponen dasar yang wajib dimiliki sebuah PWA. Dengan memahami ini, kamu bisa membangun fondasi yang kuat untuk proyek pertamamu.<\/p>\n\n\n\n
<\/span>1. Struktur HTML dan CSS yang Responsif<\/strong><\/span><\/h3>\n\n\n\nLangkah pertama tentu saja membangun website dasar menggunakan HTML dan CSS. Biar makin nyaman dilihat, pastikan desainnya bisa ngikutin semua ukuran layar\u2014mulai dari HP, tablet, sampai laptop!<\/p>\n\n\n\n
<\/span>2. Menambahkan File Manifest<\/strong><\/span><\/h3>\n\n\n\nFile ini berfungsi memberi tahu browser bahwa website kamu bisa dijadikan aplikasi. Di dalamnya kamu bisa atur nama aplikasi, ikon, orientasi layar, dan sebagainya. File ini biasanya diberi nama manifest.json<\/strong> dan diletakkan di folder utama (root) website.<\/p>\n\n\n\nContoh isi manifest:<\/p>\n\n\n\n
{<\/p>\n\n\n\n
“name”: “Aplikasi Belajar”,<\/p>\n\n\n\n
“short_name”: “BelajarPWA”,<\/p>\n\n\n\n
“start_url”: “\/index.html”,<\/p>\n\n\n\n
“display”: “standalone”,<\/p>\n\n\n\n
“background_color”: “#ffffff”,<\/p>\n\n\n\n
“theme_color”: “#0d47a1”,<\/p>\n\n\n\n
“icons”: [<\/p>\n\n\n\n
{<\/p>\n\n\n\n
“src”: “\/icon.png”,<\/p>\n\n\n\n
“sizes”: “192×192”,<\/p>\n\n\n\n
“type”: “image\/png”<\/p>\n\n\n\n
}<\/p>\n\n\n\n
]<\/p>\n\n\n\n
}<\/p>\n\n\n\n
<\/span>3. Mendaftarkan Service Worker<\/strong><\/span><\/h3>\n\n\n\nService Worker adalah script JavaScript yang berjalan di background. Ia memungkinkan PWA bisa bekerja secara offline, menerima push notification, dan caching data. Sebagai langkah awal, kamu bisa bikin file bernama service-worker.js, lalu daftarkan file itu dari file utama seperti index.js.<\/p>\n\n\n\n
Contoh kode dasar:<\/p>\n\n\n\n
if (‘serviceWorker’ in navigator) {<\/p>\n\n\n\n
navigator.serviceWorker.register(‘\/service-worker.js’)<\/p>\n\n\n\n
.then(() => console.log(‘Service Worker Registered’));<\/p>\n\n\n\n
}<\/p>\n\n\n\n
<\/span>4. Caching File Agar Bisa Diakses Offline<\/strong><\/span><\/h3>\n\n\n\nDalam file service-worker.js, kamu bisa menyimpan cache halaman penting agar tetap bisa dibuka meski tanpa koneksi internet.<\/p>\n\n\n\n
self.addEventListener(‘install’, function(event) {<\/p>\n\n\n\n
event.waitUntil(<\/p>\n\n\n\n
caches.open(‘v1’).then(function(cache) {<\/p>\n\n\n\n
return cache.addAll([<\/p>\n\n\n\n
‘\/’,<\/p>\n\n\n\n
‘\/index.html’,<\/p>\n\n\n\n
‘\/style.css’,<\/p>\n\n\n\n
‘\/app.js’<\/p>\n\n\n\n
]);<\/p>\n\n\n\n
})<\/p>\n\n\n\n
);<\/p>\n\n\n\n
});<\/p>\n\n\n\n
<\/span>5. Testing dan Deploy<\/strong><\/span><\/h3>\n\n\n\nSetelah semuanya selesai, kamu bisa uji hasil PWA kamu lewat fitur Lighthouse di Chrome DevTools. Jangan lupa upload ke hosting atau layanan seperti Netlify atau Vercel agar bisa diakses publik.<\/p>\n\n\n\n
<\/span>Kesimpulan<\/strong><\/span><\/h2>\n\n\n\nBelajar membuat PWA membuka peluang besar untuk menciptakan aplikasi ringan, cepat, dan mudah diakses oleh siapa saja. Dengan memahami dasar-dasar seperti manifest, service worker, dan caching, kamu bisa mulai membangun aplikasi web yang tidak kalah hebat dari aplikasi mobile. Semakin kamu bereksperimen dan praktik, semakin kamu akan mahir. Selamat mencoba dan semoga sukses!<\/p>\n","protected":false},"excerpt":{"rendered":"
Di era digital yang semakin mobile, pengguna menginginkan pengalaman aplikasi yang cepat, responsif, dan bisa diakses kapan saja tanpa harus bergantung pada koneksi internet. Di sinilah Progressive Web App (PWA)…<\/p>\n","protected":false},"author":1,"featured_media":1522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[202],"class_list":["post-1518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-belajar-membuat-pwa-progressive-web-app","article","has-background","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-post-media","thumbnail-"],"yoast_head":"\n
Belajar Membuat PWA (Progressive Web App) -<\/title>\n<meta name=\"description\" content=\"Yuk, mulai Belajar Membuat PWA (Progressive Web App) dan bikin aplikasi web yang cepat, bisa offline, dan mirip aplikasi mobile!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Membuat PWA (Progressive Web App) -\" \/>\n<meta property=\"og:description\" content=\"Yuk, mulai Belajar Membuat PWA (Progressive Web App) dan bikin aplikasi web yang cepat, bisa offline, dan mirip aplikasi mobile!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-22T04:25:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-22T04:25:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/\",\"url\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/\",\"name\":\"Belajar Membuat PWA (Progressive Web App) -\",\"isPartOf\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png\",\"datePublished\":\"2025-07-22T04:25:31+00:00\",\"dateModified\":\"2025-07-22T04:25:33+00:00\",\"author\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4\"},\"description\":\"Yuk, mulai Belajar Membuat PWA (Progressive Web App) dan bikin aplikasi web yang cepat, bisa offline, dan mirip aplikasi mobile!\",\"breadcrumb\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#primaryimage\",\"url\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png\",\"contentUrl\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png\",\"width\":600,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kompetendigital.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar Membuat PWA (Progressive Web App)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#website\",\"url\":\"https:\/\/kompetendigital.com\/blog\/\",\"name\":\"\",\"description\":\"Jadi Profesional Setinggi Langit\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kompetendigital.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/kompetendigital.com\"],\"url\":\"https:\/\/kompetendigital.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Membuat PWA (Progressive Web App) -","description":"Yuk, mulai Belajar Membuat PWA (Progressive Web App) dan bikin aplikasi web yang cepat, bisa offline, dan mirip aplikasi mobile!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Membuat PWA (Progressive Web App) -","og_description":"Yuk, mulai Belajar Membuat PWA (Progressive Web App) dan bikin aplikasi web yang cepat, bisa offline, dan mirip aplikasi mobile!","og_url":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/","article_published_time":"2025-07-22T04:25:31+00:00","article_modified_time":"2025-07-22T04:25:33+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/","url":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/","name":"Belajar Membuat PWA (Progressive Web App) -","isPartOf":{"@id":"https:\/\/kompetendigital.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#primaryimage"},"image":{"@id":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png","datePublished":"2025-07-22T04:25:31+00:00","dateModified":"2025-07-22T04:25:33+00:00","author":{"@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4"},"description":"Yuk, mulai Belajar Membuat PWA (Progressive Web App) dan bikin aplikasi web yang cepat, bisa offline, dan mirip aplikasi mobile!","breadcrumb":{"@id":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#primaryimage","url":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png","contentUrl":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-23-4.png","width":600,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/kompetendigital.com\/blog\/belajar-membuat-pwa-progressive-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kompetendigital.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar Membuat PWA (Progressive Web App)"}]},{"@type":"WebSite","@id":"https:\/\/kompetendigital.com\/blog\/#website","url":"https:\/\/kompetendigital.com\/blog\/","name":"","description":"Jadi Profesional Setinggi Langit","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kompetendigital.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/kompetendigital.com"],"url":"https:\/\/kompetendigital.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":1,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions"}],"predecessor-version":[{"id":1523,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions\/1523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/media\/1522"}],"wp:attachment":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/media?parent=1518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/categories?post=1518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/tags?post=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}