Panduan Cara Mengonversi Situs Web ke Progressive Web App (PWA)

Diterbitkan: 2018-07-02

Dalam rentang waktu yang sangat singkat, PWA telah membuat tanda yang sangat menonjol di industri aplikasi seluler.

Konsep, yang ingin Anda ketahui dari Google , adalah jeda bagi industri yang terus menerus membuat keluhan yang sama berulang kali –

Sehubungan dengan Situs Web: Kecepatan pemuatan lambat dan Tingkat Resonansi Rendah

Sehubungan dengan Aplikasi Seluler: Aplikasi yang menghabiskan banyak ruang memori, Tergantung pada koneksi jaringan, dan Langkah-langkah panjang yang harus diambil pengguna dari menemukan aplikasi hingga mulai menggunakannya.

Karena Progressive Web Apps (PWA) diunduh langsung dari situs web dan juga berjalan sebagai situs web, pengguna mendapatkan manfaat dalam tiga cara –

  • Mereka dapat menghemat waktu untuk pertama kali menemukan aplikasi di toko, menginstalnya, dan kemudian memasukkan informasi untuk memulai
  • Karena Progressive Web Apps berfungsi sebagai situs web, mereka menggunakan ruang penyimpanan perangkat minimal, dan
  • Karena mereka bekerja terutama sebagai situs web, konsep cache berlaku, yang memungkinkan aplikasi untuk berjalan bahkan saat tidak ada koneksi jaringan.
Temukan Disini

Alasan untuk Mengonversi Situs Web Anda yang Ada ke PWA

Manfaat PWA

Selain memberikan manfaat nyata ini kepada pengguna, Progressive Web Apps – kombinasi ideal situs web dan aplikasi seluler – telah muncul sebagai formula kesuksesan bisnis yang hemat biaya juga. Inilah sebabnya mengapa orang menantikan untuk mengonversi halaman web menjadi aplikasi.

Temukan Disini

Manfaat yang dibawa PWA ke bisnis dengan mudah ditemukan, dengan menggunakan lebih sedikit ruang memori, dengan biaya pengembangan yang rendah , dan terakhir dengan menjalankan offline dengan kecepatan tinggi dapat diukur dengan melihat perubahan jumlah pertumbuhan merek-merek terkenal ini –

Manfaat-yang-Progresif-Web-App-membawa-ke-bisnis

Kisah sukses seperti ini dan banyak dari mereka di industri sudah cukup untuk membuat setiap bisnis seluler modern mencari perusahaan pengembangan aplikasi web progresif terbaik dan mencari cara tentang cara mengonversi situs web ke PWA.

Jika Anda juga berencana untuk mengonversi situs web menjadi aplikasi web progresif dan memanfaatkan semua manfaat biaya investasi rendah yang ditawarkan konsep tersebut, Anda berada di tempat yang tepat.

Berikut adalah langkah-langkah yang tepat untuk Cara mengonversi situs web PHP ke PWA atau cara membuat situs web menjadi aplikasi , seperti yang dibagikan oleh Google kepada Tim Pengembang Aplikasi Web Progresif kami (salah satu keuntungan menjadi salah satu Agen Pengembang Google resmi) .

Tapi hal pertama yang pertama. Ketahui elemen yang Anda perlukan untuk membuat PWA dari situs web atau jika Anda ingin mengubah halaman web menjadi aplikasi.

Cara Mengubah Situs Web menjadi PWA

Untuk mengonversi situs web menjadi PWA , berikut adalah tiga hal yang diperlukan –

  1. Perangkat Android terpasang yang menjalankan Chrome 52 atau lebih tinggi,
  2. Pemahaman dasar tentang Git dan Chrome DevTools,
  3. Kode sampel, dan
  4. Editor Teks

Setelah Anda siap, bersiaplah untuk mengonversi web ke PWA atau mengonversi situs web ke aplikasi web.

Langkah 1: Muat URL

Langkah pertama dalam memigrasikan situs web Anda ke PWA adalah mengkloning repositori GitHub dari baris perintah: 

 $ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Melakukan hal ini akan membantu mengembangkan direktori Migrate to PWA dengan kode lengkap untuk setiap langkah. Untuk codelab khusus ini, unggah file kerja , lalu buat perubahan di sana.

Setelah kode Anda diperiksa, gunakan 'Aplikasi Server HTTP Sederhana' untuk menyajikan file kerja pada port 8887.

Setelah ini, Anda akan dapat memuat URL untuk mengonversi situs ke PWA.

Langkah 2: Lihat Situs di Ponsel Anda

Ini adalah langkah kedua untuk mengubah situs web menjadi aplikasi web progresif. Jika Anda memiliki perangkat Android yang terhubung dengan desktop Anda, ketik ini di URL Anda – chrome://inspect. Ini akan memungkinkan Anda mengatur port forward dengan bantuan port yang Anda tulis sebelumnya ke port yang sama pada perangkat.

Tekan Enter untuk menyimpannya.

Sekarang Anda akan dapat mengakses versi dasar situs web Anda di – http://localhost:8887/ di ponsel Android yang terhubung.

Langkah 3: Tambahkan Tag Kepala Modern

Untuk mengonversi situs web menjadi aplikasi seluler, hal pertama yang harus Anda lakukan adalah membuat situs web ramah seluler dan kedua Anda harus menambahkan Manifes Aplikasi Web. Manifes akan menjelaskan informasi meta situs dengan cara yang akan muncul di layar beranda pengguna.

Jika Anda tidak memiliki sistem templating, tambahkan baris ini – 

 <kepala>

<meta name= “viewport” content="width=device-width, user-scalable=no" />

<link rel= “manifest” href= “manifest.json” />

</head>
  • Viewport – Baris pertama terdiri dari meta tag yang menentukan viewport. Elemen ini akan membantu Anda dengan daya tanggap. Setelah menulis baris kode setelah Anda memuat ulang situs, Anda akan menemukan situs yang pas dengan perangkat Anda.
  • Manifest – Di baris kedua kode Anda, Anda telah mereferensikan file – gerakan yang diperlukan untuk mengontrol bagaimana situs ditambahkan ke layar beranda.

Setelah selesai, buka editor teks. Saatnya menulis JSON. Di bagian short_name, tentukan apa yang akan ditampilkan di layar beranda dan coba pertahankan dalam 15 karakter .

Selanjutnya, simpan file Anda sebagai nomenklatur manifest.json dan muat ulang halaman di perangkat Android dan buka menu kanan atas dan pilih ' Add to Home Screen '. Sekarang Anda akan dapat melihat ikon Anda di layar beranda!

Langkah 4: Tambahkan Service Worker

Service Worker adalah skrip latar belakang yang dapat dijalankan browser saat pengguna tidak berada di halaman. Ini adalah elemen yang memberikan dukungan offline dan aktif saat notifikasi didorong.

Buat Pekerja Layanan

Salin kode ini di file baru lalu simpan sebagai sw.js. 

 /** Pekerja layanan kosong! */

self.addEventListener ('ambil', fungsi (acara)

{

/** Handler pengambilan kosong! */

});

Dan itu saja.

Daftarkan Service Worker

Anda harus mendaftarkan kode dalam kode situs web Anda untuk mengubah halaman web menjadi aplikasi, untuk itu, buka file site.js Anda dan rekatkan ini – 

 navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('Luar biasa, terdaftar dengan cakupan: ', registrasi.scope);});

Sekarang, kode akan dieksekusi pada setiap pemuatan halaman. Periksa apakah itu berfungsi dengan baik dengan memuat ulang halaman dan kemudian memeriksa – chrome://serviceworker-internals/

Sekarang situs web Anda akan dapat meminta pengguna untuk menginstalnya di layar beranda mereka dan kedua, Anda akan dapat membuat situs Anda dapat mendukung pemberitahuan push dan bahkan bekerja secara offline.

Langkah 5: Jadikan Situs Bekerja Offline

Langkah pertama adalah membuka skrip sw.js dan mendapatkan objek cache. Setelah Anda memilikinya, perbarui kode dan aplikasikan seluruh situs web ke cache.

Coba cara kerjanya sekarang. Copot pemasangan aplikasi saat ini dan muat di Chrome. Selanjutnya, refresh halaman dan pilih ' Add to Home Screen ' di menu pojok kanan.

Untuk mematuhi aturan bahwa ketika Service Worker berubah, halaman harus dimuat ulang dan diinstal ulang, Anda hanya perlu menambahkan komponen yang memiliki 'versi' service worker. Ketika itu berubah, gerakan instal terjadi lagi, men-cache sumber daya yang akan berubah.

Selamat, Anda sekarang tahu cara mengonversi aplikasi Web ke PWA dan jika Anda mengikuti langkah-langkahnya secara berdampingan, Anda sekarang bahkan telah memigrasikan situs web Anda ke dalam Aplikasi Web Progresif!

Read more

*Penafian*: Langkah-langkah ini akan memberi Anda, pengembang, gagasan yang tepat tentang bagaimana Anda harus mengisi bagian yang kosong dan berpindah dari Titik A dalam proses ke Titik C. Jika Anda membaca ini sebagai wirausahawan antusias yang ingin mengonversi wordpress ke aplikasi web progresif atau ingin membuat aplikasi dari situs web, menurut saya, jangan lakukan tanpa dukungan dari penyedia layanan pengembangan aplikasi progresif yang berpengalaman.

Meskipun langkah-langkah ini menjelaskan cara membuat situs web menjadi aplikasi atau mengonversi aplikasi web menjadi aplikasi web progresif, ada sejumlah elemen yang muncul sebagai bagian dari proses ketika Anda duduk dengan proses pengembangan yang sebenarnya . Jadi, daripada mencoba tangan Anda dengan langkah-langkah untuk membuat aplikasi dari situs web dan menemukan hasil yang berbeda karena Anda tidak yakin dengan elemen-elemen yang ada, berikan pekerjaan itu kepada perusahaan pengembang PWA yang memiliki spesialisasi dalam domain tersebut. Para ahli akan menjawab semua pertanyaan terkait cara mengubah situs web menjadi aplikasi, cara membuat situs web menjadi aplikasi.