Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingIngin Coba Buat Progressive Web App? Ikuti 8 Langkah...

Ingin Coba Buat Progressive Web App? Ikuti 8 Langkah Mudah Ini

-

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.

Cara membuat Progressive Web App dengan Mudah

progressive-web-app

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:

Artikel Terkait  Wix adalah : Aplikasi Web Development Kekinian
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).

Artikel Terkait  Mengenal Quill JS, Text Editor Modern Berbasis JavaScript

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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya