Media Pengembangan Web & App | by APPKEY

Pembuatan Aplikasi Cross-platform Contoh Situs yang Kompatibel dengan PWA! Apa Perbedaan dari...

Contoh Situs yang Kompatibel dengan PWA! Apa Perbedaan dari Aplikasi Mobile? (versi 2020)

-

Meskipun PWA menarik perhatian sebagai langkah untuk memberikan pengalaman web seluler baru, diharapkan jumlah situs yang memperkenalkan PWA akan terus meningkat pada tahun 2020.

Banyak artikel telah membahas PWA beberapa kali sejauh ini, tetapi kali ini artikel ini ingin memperkenalkan situs yang kompatibel dengan PWA yang belum tercakup sejauh contoh situs PWA 2020. Tidak hanya kasus terbaru, tetapi jika Anda mempertimbangkan untuk memperkenalkan PWA, disini tempatnya.

Apa itu PWA?

 

pwa-1

PWA adalah singkatan dari “Progressive Web Apps”, dan merupakan teknologi yang memungkinkan situs web untuk digunakan seolah-olah mereka adalah aplikasi asli. Dengan mendukung PWA, dimungkinkan untuk menyediakan pengguna dengan UX seperti aplikasi asli, meskipun itu adalah situs web.

Ini telah menarik perhatian sebagai ukuran untuk web seluler seperti smartphone. Tetapi baru-baru ini, layanan yang mendukung web PC juga meningkat. Apa itu PWA? Cara membuat situs web yang mirip sebuah aplikasi.  Sekarang, mari kita beralih ke situs-situs yang kompatibel dengan PWA.

Artikel Terkait  Dukungan Untuk iOS13 ke Atas yang Harus Didukung pada Tahun 2020 (WebView, Split View, dll.)

Contoh Situs Pengenalan PWA

 

pwa-2

Contoh Pengantar PWA OYO

Situs web rantai hotel OYO (Oyo) dari India secara aktif bekerja pada PWA, dan juga diambil sebagai contoh di KTT Chrome Dev 2019.

Fitur utama:

  • Ikon layar beranda
  • Memberikan pengalaman operasi yang lebih ramah pengguna dan UX yang lebih baik
  • Dukungan offline

(OYO: https://www.oyorooms.com/)

Efek Pengantar

Untuk situs seluler yang biasa hingga saat itu,

  • CV pengguna yang menambahkan ikon ke layar beranda melalui prompt instalasi (panduan untuk menambahkan ikon ke layar beranda) yang diinstal secara sewenang-wenang di situs meningkat 2,2 kali.
  • CV pengguna yang menambahkan ikon ke layar beranda melalui permintaan instalasi standar Chrome (tampilan pesan tambahan ikon di bagian bawah layar) adalah 4,4 kali.
  • 4 kali lebih banyak DAU dari tahun sebelumnya.
  • Pengurangan waktu hingga 79% untuk buka halaman.
  • Waktu yang diperlukan untuk transisi halaman berkurang hingga 76%.

(Sumber: https://developer.chrome.com/devsummit/sessions/pwa-and-the-installable-web/)

Penawaran di Play Store

Pada saat yang sama, OYO menawarkan PWA sebagai aplikasi web di Play store dengan menerapkan TWA (OYO lite). TWA adalah singkatan dari Trusted Web Activity atau Aktivitas Web Tepercaya. Sederhananya, ini adalah fungsi yang dapat menampilkan PWA sebagai konten dalam aplikasi. Kontennya adalah PWA, tetapi dengan mengimplementasikan TWA itu menjadi aplikasi asli secara teknis, sehingga dapat disediakan di Play store.

Efek dan keuntungan dari memperkenalkan TWA adalah sebagai berikut.

  • Ukuran aplikasi adalah 900KB atau kurang, yang secara signifikan lebih ringan dari aplikasi asli normal yang disediakan secara paralel.
  • Peringkat di toko adalah 4.1 (pada 14 Januari 4.2).
  • CV tiga kali lipat dibandingkan dengan PWA normal, mencapai CV setara dengan aplikasi asli normal.
  • Retensi pengguna empat kali lipat.
  • Fleksibilitas pembaruan (menyinkronkan dengan pembaruan PWA sangat mengurangi kompleksitas yang terkait dengan memperbarui aplikasi asli biasa).

(Sumber: https://developer.chrome.com/devsummit/sessions/pwa-and-the-installable-web/)

Komentar

Hal ini dapat dilihat dari efek pengantar bahwa UX telah sangat ditingkatkan karena operabilitas seperti aplikasi dan waktu pemuatan halaman / waktu transisi yang dipersingkat. Selain itu, ukuran kecil PWA dan versi yang diterapkan TWA mengurangi beban pada penyimpanan terminal pengguna. Salah satu keuntungan utama PWA adalah ‘ringan’, yang memungkinkan pengguna untuk menginstal dan menggunakan layanan untuk sementara waktu tanpa khawatir tentang penyimpanan perangkat.

Artikel Terkait  7 Aplikasi Pembuat Aplikasi Android Secara Offline

Contoh Pengantar PWA Spotify

 

app-3

Layanan streaming musik Spotify juga mendukung situs PWA. Fiturnya adalah pemutar streaming musik itu sendiri dikonversi ke PWA.

Fitur utama:

  • Ikon layar beranda
  • Bisa mengoperasikan like

(Spotify: https://open.spotify.com/)

Efek Pengantar

 

  • 54% peningkatan dalam tingkat penggunaan awal.
  • Retensi dalam 60 hari meningkat sebesar 14%.
  • Peningkatan 30% dalam tingkat login ulang untuk pengguna yang tidak aktif.
  • 30% pengguna web mengunduh aplikasi asli.

(Sumber: Dari pengumuman sesi di GDG DevFest Tokyo 2019)

Desktop PWA

Untuk Spotify, kami menggunakan PWA desktop dan juga seluler. Meskipun PWA pada awalnya adalah teknologi seluler, Chrome 73 mendukung PWA desktop, dan Anda dapat menggunakan PWA sebagai aplikasi asli di lingkungan desktop serta lingkungan seluler.

(Spotify: https://open.spotify.com/)

Komentar

Sampai sekarang, alat-alat seperti pemutar streaming musik memiliki kesan kuat bahwa mereka disediakan sebagai aplikasi asli. Tetapi dengan mengonversi ke PWA seperti Spotify, dimungkinkan untuk mengharapkan efek mendapatkan pengguna entri.

Juga, pedoman untuk unduhan aplikasi asli didefinisikan secara jelas dalam PWA, yang juga mempertimbangkan kemudahan peningkatan pengguna.

Contoh Pengantar PWA George.com

George, salah satu merek produk pakaian dan gaya hidup terkemuka di Inggris, adalah PWA yang siap dengan fokus pada desain, kecepatan, dan fungsionalitas untuk memberi pengguna pengalaman berbelanja yang lebih menarik di situs seluler mereka.

Fitur utama:

  • Ikon layar beranda
  • Pemberitahuan push
  • Dukungan offline

(George: https://direct.asda.com/george/clothing/10,default,sc.html)

Efek Pengantar

 

  • Memuat halaman rata-rata adalah 3,8 kali lebih cepat.
  • Membagi dua tingkat bouncing.
  • Tingkat CV meningkat sebesar 31%.
  • 20% lebih banyak PV per kunjungan pengguna.
  • 28% peningkatan rata-rata waktu yang dihabiskan di situs dengan mengunjungi pengguna dari ikon layar beranda.

(Sumber: https://developers.google.com/web/showcase/2018/asda-george)

Komentar

Ini adalah kasus di mana peningkatan / peningkatan UX melalui implementasi PWA memiliki efek langsung, yang mengarah ke hasil bisnis. Bukankah ini kasus yang dapat digunakan sebagai referensi untuk situs merek yang sedang mengembangkan e-commerce?

Artikel Terkait  Bagaimanakah Start Awal Belajar Bahasa Pemrograman Flutter dan Haruskah Belajar Flutter di Tahun 2020 Ini?

Contoh Pengantar PWA Telegram

Telegram adalah alat komunikasi yang khusus digunakan untuk melakukan obrolan. Telegram memiliki lebih dari 200 juta pengguna di seluruh dunia dan dapat membuat grup hingga 100.000. Oleh karena itu, ini juga digunakan sebagai platform pengumpulan informasi, dan secara khusus menarik perhatian sebagai alat pengumpulan informasi terkait cryptocurrency. Karena fitur-fitur ini, aplikasi asli untuk semua sistem operasi disediakan, dan versi WEB yang kompatibel dengan PWA (seluler dan desktop) juga disediakan.

Fitur utama:

  • Ikon layar beranda
  • Pemberitahuan push
  • Bisa mengoperasikan like

(Telegram: https://web.telegram.org/#/login)

Komentar

Seperti Spotify, alat komunikasi seperti fungsi obrolan tampaknya disediakan terutama oleh aplikasi asli, tetapi dalam kasus Telegram, ia disediakan sebagai aplikasi seluler, aplikasi desktop, aplikasi web, dan juga mencakup OS utama. . Selain itu, berkenaan dengan fungsi, pada dasarnya semuanya menyediakan fungsi yang sama dan operabilitas disatukan.

Dapat dibayangkan bahwa platform pengumpulan informasi adalah strategi omnidirectional yang tidak memilih perangkat pengguna atau spesifikasinya, yang dianggap sebagai salah satu faktor yang meningkatkan jumlah pengguna.

Contoh Pengantar PWA Forbes Jepang

Ini adalah situs berita yang menghadirkan berita bisnis dari seluruh dunia sebagai versi Jepang Forbes.

Fitur utama:

  • Ikon layar beranda
  • Pemberitahuan push

(Forbes JAPAN: https://forbesjapan.com/)

Komentar

Versi elektronik Nikkei terkenal di situs media berita Jepang yang mendukung PWA. Tetapi versi Jepang Forbes juga mendukung PWA. Versi elektronik Nikkei juga menyediakan aplikasi asli dengan konten yang sama,. Tetapi Forbes Jepang memberikan artikel berita hanya di situs web (PWA), dan aplikasi asli hanya menyediakan masalah punggung majalah. Bagian PWA dan aplikasi asli mengubah peran dan dukungan mereka dapat membantu dalam mempertimbangkan strategi internet.

Bagaimana? Dengan setiap kasus sebagai referensi, bandingkan dengan layanan Anda sendiri, dan kemudian pertimbangkan untuk memperkenalkan PWA, atau jika sudah diperkenalkan, perbaiki.


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

Subscribe Sekarang

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

Blog Post Ranking 10

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...

Proses Komunikasi: Encoding dan Decoding

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

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

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...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya