Mengenal PWA (Progressive Web Apps), Keunggulan, dan Cara Membuatnya di Android Studio

Share:
Mengenal PWA (Progressive Web Apps), Keunggulan, Kelemahan dan Cara Membuatnya di Android Studio. Assalamualaikum, halo semuanya. Kembali lagi di sahretech. Kali ini saya akan menulis artikel khusus untuk membahas PWA, apa itu PWA ?, apa saja keunggulannya dan kelemahannya ?, dan bagaimana cara membautnya di Andorid Studio





Apa itu PWA ?

PWA (Progressive Web Apps) adalah jenis perangkat lunak aplikasi yang dijalankan di peramban web, tapi memiliki tampilan dan fungsi yang sama layaknya mobile apps pada umumnya. PWA biasa dibangun menggunakan teknologi-teknologi web seperti HTML, CSS, php, dan Javascript atau istilah lainnya adalah website yang dibuat menjadi aplikasi mobile.

PWA - sahretech
A progressive web application is a web application

PWA lebih ringan dari aplikasi mobile pada umumnya, kenapa ? karena source code PWA tidak diinstal pada perangkat yang digunakan, mekanisme penggunaanya persis seperti website, kita hanya perlu merequest halaman yang akan ditampilkan saja. Meski berjalan di peramban web, aplikasi PWA tidak menampilkan navigator browser. Sehingga hal ini benar-benar memberikan pengalaman yang sama saat menggunakan aplikasi native (aplikasi mobile) dan PWA.

PWA dapat dijalankan di browser apapun. Publikasi web progresif seperti web pada umumnya. Saat ada pembaharuan sistem maka developer hanya perlu memperbaiki websitenya saja, dan PWA yang terinstall akan otomatis mendapatkan pembaharuan. Hal ini sangat memudahkan developer karena pengembangan aplikasi dapat dibuat sekali saja.


Keunggulan PWA

  • 1. Fast : konsep ini memungkinkan aplikasi untuk mempersingkat loading time pada tiap halaman aplikasi. Kalo aplikasi native ukurannya bisa puluhan bahkan ratusan mega, untuk PWA hanya beberapa mega saja, kenapa ? karena source code tidak diinstall di PWA, tapi tetap di dalam server. Layaknya website, PWA hanya merequest halaman yang dibutuhkan user saja, sehingga PWA dapat menghemat data dan ruang penyimpanan. 
  • 3. Less Cost : Dengan PWA, perusahaan bisa lebih berhemat karena website yang sudah ada dapat diotimalkan menjadi aplikasi mobile. Sehingga anggaran perusahaan dapat dialokasikan ke hal lain yang lebih penting.
  • 4. Fast-Development : Pengembangan PWA lebih cepat kenapa ? karena developer dapat menggunakan website yang sudah ada. Developer atau programmer tidak perlu membuat project aplikasi yang berbeda dengan bahasa pemrograman dan teknologi yang berbeda pula, dengan hanya memahami bagaimana website tersebut ditranslate ke PWA developer dan programmer tidak perlu waktu lama untuk membuat aplikasi PWA yang cantik dan professional

Selain itu saya juga menambahkan beberapa catatan tambahan dianataranya, tampilan yang menyesuaikan dengan semua ukuran perangkat, dapat berjalan di semua browser dan hanya perlu 1x instalasi pada perangkat yang digunakan, karena pembaharuan dilakukan di sisi server. Berikut saya gambarkan dengan info grafik manfaat pengembangan PWA.

Benefits of PWA - sahretech
Benefits of Progressive Web  Apps


Apakah kalian sekarang tertarik dengan PWA ?

Native apps, Mobile web, dan Progressive web apps memiliki kekurangannya masing-masing. Tapi jika kalian punya basic pemrograman web seperti javascript dan php dan enggan untuk mempelajari bahasa permorgraman lain seperti java, maka PWA bisa menjadi solusi yang tepat. Jadi nggak sia-sia kalian belajar pemrograman web.

Kalian juga bisa membuat PWA terlihat professional layaknya native apps dengan menggunakan teknologi web responsif, dan saya yakin orang akan sulit membedakan mana native apps dan mana PWA.

Cara Membuat PWA yang Menarik di Android Studio

Untuk bagian ini, saya berharap kalian sudah memiliki website atau minimal contoh website dan sudah menginstall Android Studio di kompi kalian masing-masing. Pada bagian ini saya hanya menjelaskan secara ringasnya saja bagaimana membuat PWA di android studio. Atau kalian bisa membuka tautan berikut ini untuk mendapatkan pembahasan yang lebih jelas
  • 1. Siapkan website kalian, kalo belum punya cari website yang menurut kalian bagus
  • 2. Buka android studio, buat project baru dengan nama bebas dan pilih empty activity
create new project - sahretech
Create new project

  • 3. Masuk ke activity_main.xml dan ubahlah kodingannya seperti di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

  • 4. Lalu buka file MainActivity.java tambahkan script di bawah ini di bawah script public class MainActivity extends AppCompatActivity {
WebView mWebView;

    String URL = "http://www.detik.com/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        mWebView = (WebView) findViewById(R.id.webView);

        //menghidupkan javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(URL);
        mWebView.setWebViewClient(new MyWebViewClient());
    }

    //method ini perlu ditambahkan agar saat halaman web diload tetap diload di aplikasi, tidak diload di webbrowseer
    private class MyWebViewClient extends WebViewClient {


        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);
            return true;
        }
    }

    //tambahkan method ini agar saat tombol back ditekan, tidak keluar dari aplikasi tapi kembali ke halaman sebelumnya
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
  • 5. Tambahkan internet permission, buka app > manifest > AndroidManifest.xml lalu tambahkan script di bawah ini di atas tag <application>
<uses-permission android:name="android.permission.INTERNET" />
  • 6. Siapkan emulator kalian dan jalankan aplikasi, maka hasilnya akan tampak seperti gambar di bawah ini
Tampilan project


Ok, sekian artikel tentang Mengenal PWA (Progressive Web Apps), Keunggulan, dan Cara Membuatnya di Android Studio. Lebih dan kurangnya saya mohon maaf, dan bagi kalian yang punya pertanyaan, kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding :)


No comments