Wednesday, August 22, 2018

Buat Aplikasi Progressive Website / Blog Dengan Manifest JSON (Tanpa App Maker)

Animasi Nizwar ID
Jaman Milenial yang ga lepas dari smartphone saat ini bisa jadi keuntungan banyak orang yang membuat aplikasi dan konten-konten yang berhubungan dengan gadget genggam ini, dan mungkin lo atau gue sebagai blogger juga pengen memanfaatkan keuntungan ini, ga hanya bagi kite, tapi juga bagi mereka ea ga?.

Nah disini gue mau bagiin tata-cara membuat Aplikasi Website tanpa App Maker kaya Android Studio, AppGeser, Tunkabel, dan sejenisnya, tapi dengan Script singkat yang dipasang ke Website atau Blog kite, lalu otomatis Appnya bisa jadi hanya dengan menekan sebuah menu pada aplikasi Chrome.

Untuk percobaan aka Demo, lo bisa praktek dan liat sendiri kaya animasi dibawah ini.
Animasi Menambahkan Progressive App pada Layar Utama (Homescreen) - Nizwar ID
Btw Screen Di rekam sama mantan, tq
Setelah coba dari situs gue, sekarang coba pake website atau blog lo, gunakan teknik yang sama dan liat hasilnya, hasilnya beda kan?. 🤭

Sebelum masuk ke tutor... Inget Aplikasi ini hanya berupa Progressive Web App, yang sebenernya ini bukanlah Aplikasi, tapi cuma sebatas Shortcut, fitur yang disediakan Google Chrome, dengan menggunakan cara ini, lo ga perlu Download dan Install Apk tapi dengan cara ini juga lo gabisa Pasang Admob atau Masukin ke Playstore, kalo pengen kaya gitu pake Jasa Blog to APK aja.

Sedikit Info tentang Progressive aplikasi Web Progressive adalah Aplikasi yang berguna untuk mempermudah visitor saat mengakses situs kita, aplikasi jenis ini bisa didapat tanpa Download dan Install Aplikasi karena pengembangannya bukan dari Build App, tapi mengembangkan dari Situs itu sendiri dengan memasukan Script Manifest JSON, ini lebih keren kalo dipasang di Wordpress (karna pake blogger gabisa 😅) karna lo bisa buat Website lo bisa dikunjungi pas lagi Offline, mungkin nanti gue bikin artikelnya, sekarang cekidot....

Cara Membuat Progressive Web App.

Cara-cara ini gue dapetin dari dokumentasi Google, ga terlalu sulit dan ya gitu deh 😅.

Siapkan Asset Website

Nah disini lo kudu kumpulin dulu sumber aset-aset websitenya, seperti Nama, Icon, Warna background, untuk Icon gw saranin pake 7 dimensi yang masing-masing 48px, 96px, 128px, 144px, 152px, 192px, 512px, inget yak rasionya 1:1, alias bentuknya Persegi Empat, dan karna web gue pake Blogger jadi gampang buat ginian 😂 ga repot resize-resize, caranya baca di : Manipulasi Gambar dengan URL pada Blogger, Rahasia URL Gambar Blogger 

Buat Script Manifest JSON

Buat sebuah file dengan Notepad atau aplikasi Koding lainnya, simpan dengan nama Manifest.json, Dari Manifest ini.. web kita dibaca dan ditentukan Sumbernya, pastikan semua asset yang tadi diatas diterapkan ke web, gitu juga 7 dimensi gambar itu juga diupload lalu ganti dan sesuaikan semua itu pada script gue dibawah ini.
Setelah itu Upload ke hosting Web yang lo pake, kalo pengguna blogger bisa upload di Myjson - A Simple JSON Storage and Hosting atau layanan hosting lain, ini buat diambil isi dan link manifest JSON yang mau kita terapin, Untuk penjelasan isi dari Script manifest.json ini, lo bisa kesini : Penjelasan Mudah Script Manifest JSON untuk Aplikasi Web Progressive

Pasang Tag diantara <head></head>

Kalo semuanya udah siap, pasang script berikut diantara tag <head></head>, alias Dibawah <Head> atau diatas </head>.
<link href='LINK MANIFEST.JSON' rel='manifest'/>
Nah selesai, web lo seharusnya udah bisa diakses dengan shortcut dan aset-aset yang ditentukan, kaya gini nih.
Animasi Membuka Aplikasi Web Progressive - Nizwar ID
Sama... Direkam dia juga 🙃.
Setelah itu tinggal lo bikin aja tombol atau Notif Popup tata-cara buat nambahin Website lo di Homescreen dia biar bisa diakses cepet. Oh iya.. blom gue bahas... Dengan menggunakan Progressive Web App, berikut fitur yang lo dapet

Untuk penjelasan tentang Script diatas, silahkan ke sini : Penjelasan Mudah Script Manifest JSON untuk Aplikasi Web Progressive

Fitur Menggunakan Progressive Web App

  • Progresif - Bekerja untuk setiap pengguna, apa pun pilihan browser mereka karena dibangun dengan peningkatan progresif sebagai konsep intinya.
  • Responsif - Cocok dengan setiap faktor bentuk: perangkat desktop, seluler, tablet, atau apa saja yang muncul berikutnya.
  • Konektivitas independen - Disempurnakan dengan service worker agar bisa bekerja offline atau pada jaringan berkualitas-rendah.
  • Seperti-Aplikasi - Terasa seperti sebuah aplikasi untuk pengguna dengan interaksi dan navigasi bergaya-aplikasi karena mereka dibangun di atas model shell aplikasi.
  • Segar - Selalu terkini berkat proses pembaruan service worker.
  • Aman - Disediakan melalui HTTPS untuk mencegah snooping dan memastikan materi belum dirusak.
  • Dapat ditemukan - Dapat diidentifikasi sebagai "aplikasi" berkat manifes W3C dan cakupan registrasi service worker, yang memungkinkan mesin telusur untuk menemukannya.
  • Bisa dilibatkan-kembali - Kemudahan untuk dilibatkan-kembali dengan fitur seperti pemberitahuan push.
  • Dapat dipasang - Memungkinkan pengguna untuk "menyimpan" aplikasi yang mereka anggap paling berguna di layar beranda tanpa kerumitan toko aplikasi.
  • Bisa ditautkan - Dapat dengan mudah dibagikan melalui URL, tidak memerlukan pemasangan yang rumit.
Nah seperti itulah cara Alternative buat Aplikasi Website tanpa App maker 😂, yang pasti ga perlu repot-repot bikin > build dan segala macem, tapi ya gitu... kerugiannya aplikasi ga bisa diupload atau disisipi iklan Admob, "Adsense yang ada di blog bisa ga?" "ya bisa lah.. kan ini ibarat Browser yang di edit-edit gitu"... kalo mau versi natifnya ya pake : JASA BLOG TO APK, ISTIMEWAKAN BLOGMU nah sekian dari Artikel gue paling kece ini... See Ya!.

Cari dengan kata-kunci :

  • Cara membuat Aplikasi Blog.

  • Cara membuat Aplikasi Website.

  • Manifest JSON.

  • Cara membuat Progressive Web App.

  • Progressive Web App Nizwar ID.

Bagikan Ke Temen-Temen mu!

Related

0Komentar