Cara Membangun Aplikasi Web Progresif

Sep 16, 2025
Bagaimana caranya

Mobile sekarang menyumbang lebih dari setengah lalu lintas web, dan aplikasi web memungkinkan pengguna untuk melakukan hal-hal di browser yang menyaingi aplikasi asli, tetapi ada masalah: kualitas koneksi dan perangkat bervariasi secara masif di seluruh dunia.

Katering untuk pengguna pada koneksi cepat-cepat di Seoul, dan pengguna di pedesaan India di telepon yang sudah ketinggalan zaman, adalah tantangan kegunaan terbaru, dan aplikasi web progresif adalah solusinya.

PWAS menggunakan peningkatan progresif untuk memuat konten paling penting terlebih dahulu, lalu tambahkan ekstra presentasi dan fungsional sesuai kebutuhan, artinya semua pengguna Anda mendapatkan pengalaman inti yang sama secepat mungkin. Jika Anda ingin mencapai audiens seluas mungkin, PWAS adalah cara untuk pergi.

  • 10 langkah untuk pengalaman pengguna yang menarik

Meskipun aplikasi web progresif membawa banyak manfaat dan fungsionalitas ke web, mereka tidak memerlukan penulisan ulang seluruh aplikasi Anda. Aplikasi apa pun dapat dikonversi ke PWA dengan menambahkan beberapa lapisan tambahan untuk itu.

Untuk hasil terbaik, Anda ingin memberikan penekanan kuat pada kinerja dari awal - tetapi itu berlaku untuk aplikasi web apa pun. Di sini, kami akan berjalan melalui langkah-langkah untuk membuat aplikasi Anda progresif.

Jika Anda ingin membangun situs yang berjalan mulus, pastikan Anda hosting web. tepat dan gunakan yang layak Pembangun Situs Web .

01. Melayani Https

Mari kita jujur: Anda harus melakukan ini. SSL menambahkan lapisan keamanan ekstra ke web, membantu pengguna Anda merasa aman dalam menggunakan situs Anda. Dengan PWAS, HTTPS sangat penting untuk menggunakan pekerja layanan dan memungkinkan instalasi layar beranda. Anda dapat membeli sertifikat SSL dari pendaftar domain Anda dengan sedikit biaya dan kemudian mengkonfigurasinya melalui layanan hosting Anda.

02. Buat shell aplikasi

Shell aplikasi Anda adalah hal pertama yang memuat - hal pertama yang dilihat pengguna. Itu harus ada sepenuhnya dalam dokumen HTML indeks Anda, dengan CSS inline, untuk memastikan itu muncul secepat mungkin dan pengguna Anda tidak menatap layar putih lebih lama dari yang diperlukan. Shell aplikasi membentuk bagian dari pola peningkatan progresif. Aplikasi Anda harus memberikan konten pengguna sesegera mungkin, dan kemudian secara progresif meningkatkannya sebagai lebih banyak data (kemungkinan JavaScript) memuat.

Contoh di bawah ini diambil dari aplikasi REACT.JS. Pengguna disajikan dengan garis besar aplikasi dan indikator pemuatan di index.html. Kemudian, setelah beban JavaScript dan bereaksi boot, aplikasi lengkap diberikan dalam shell. 

 & lt;! - index.html - & gt;
& lt; tubuh & gt;
& lt; div id = "root" & gt;
  & lt; div id = "wadah" & gt;
  & lt; div class = "wadah dalam" & gt;
  & lt; div id = "header" & gt;
  & lt; img src = "/ aset / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; obrolan & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "loading-wadah" & gt;
  & lt; img src = "/ aset / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js.
Reaktom.render (
& lt; app / & gt;,
dokumen.getelementbyid ('root')
);

03. Daftarkan Pekerja Layanan

Untuk memanfaatkan spektrum penuh PWA Goodies (Pemberitahuan Push, Caching, Install Prompts) Anda akan memerlukan pekerja layanan.

Untungnya, mereka cukup mudah untuk diatur. Di bawah, kami pertama kali memeriksa apakah browser pengguna mendukung pekerja layanan. Kemudian, jika demikian, kita dapat maju dengan mendaftarkan file peker layanan, di sini disebut Layanan-pekerja.js. . Perhatikan bahwa Anda tidak memerlukan sesuatu yang istimewa di dalam file itu pada titik ini - itu bisa kosong.

Namun, dalam contoh di bawah ini, kami menunjukkan cara memanfaatkan tiga peristiwa siklus hidup pekerja utama. Ini adalah 'instal', ketika pengguna pertama kali mengunjungi halaman Anda; 'Aktifkan', tepat sebelum pendaftaran selesai; dan 'fetch', ketika aplikasi membuat permintaan jaringan. Yang terakhir relevan untuk kemampuan caching dan offline. 

& lt; script & gt;
  Jika ('ServiceWorker' di Navigator) {
  window.addeventlistener ('muat', fungsi () {
  navigator.serviceworker.register ('service-worker.js'). Kemudian (fungsi (pendaftaran) {
  // pendaftaran berhasil
  konsol.log ('terdaftar!');
  }, fungsi (err) {
  // registrasi gagal :(
  konsol.log ('pendaftaran pekerja servis gagal:', err);
  }). menangkap (fungsi (err) {
  konsol.log (err);
  });
  });
  } lain {
  konsol.log ('pekerja layanan tidak didukung');
  }
  & lt; / skrip & gt;
// Layanan-pekerja.js
self.addeventlistener ('instal', fungsi () {
  konsol.log ('instal!');
});
self.addeventlistener ("aktifkan", acara = & gt; {
  konsol.log ('aktifkan!');
});
self.addeventlistener ('fetch', fungsi (acara) {
  konsol.log ('fetch!', event.request);
});

04. Tambahkan pemberitahuan push

Pekerja layanan memungkinkan pengguna Anda menerima pemberitahuan push melalui API push web. Untuk mengaksesnya, Anda dapat memanfaatkan self.registration.pushmanager. dari dalam file pekerja layanan Anda. Karena pengiriman pemberitahuan push sangat bergantung pada pengaturan backend Anda, kami tidak akan menyelam ke sini.

Jika Anda memulai aplikasi dari awal, layanan Firebase Google dilengkapi dengan Firebase Cloud Messaging untuk pemberitahuan push yang relatif tidak menyakitkan (ingat: Pastikan Anda menyimpan file desain Anda penyimpanan awan) . Kode di bawah ini menunjukkan cara mendaftar untuk pemberitahuan push melalui API push. 

 navigator.serviceworker.ready.then (Fungsi (Registrasi) {
  Jika (! Pendaftaran.PushManager) {
    peringatan ('tidak ada dukungan pemberitahuan push.');
    kembali salah;
  }
  // untuk berlangganan `Push Notification` dari Push Manager
  registrasi.pushmanager.subscribe ({
  uservisableonly: true // selalu tunjukkan pemberitahuan saat diterima
  })
  . Kemudian (fungsi (berlangganan) {
  konsol.log ('berlangganan.');
  })
  .catch (fungsi (kesalahan) {
  konsol.log ('kesalahan berlangganan:', kesalahan);
  });
})

05. Tambahkan manifes aplikasi Web

Untuk membuat aplikasi Anda menginstal, Anda perlu memasukkan manifest.json. di direktori root aplikasi. Anda dapat menganggap ini sebagai deskripsi aplikasi Anda, mirip dengan apa yang dapat Anda kirimkan ke App Store. Ini termasuk ikon, layar splash, nama dan deskripsi.

Ada juga beberapa konfigurasi untuk bagaimana aplikasi Anda muncul ketika diluncurkan dari layar beranda pengguna: Apakah Anda ingin menampilkan bilah alamat di browser atau tidak? Apa warna Anda ingin bilah status? Dan seterusnya. Perhatikan bahwa yang tepat manifest.json. harus mencakup spektrum penuh ukuran ikon untuk berbagai perangkat. Kode di bawah ini adalah pratinjau dari beberapa properti yang dapat dimaksud dengan manifes Anda. 

 {
  "Short_name": "Obrolan",
  "Nama": "Obrolan",
  "Ikon": [
  {
  "src": "/ aset / icon.png",
  "Ukuran": "192x192",
  "Ketik": "Gambar / PNG"
  }
  ,
  "start_url": "/? utm_source = homescreen",
  "Latar belakang_color": "# E05A47",
  "Theme_color": "# E05A47",
  "Tampilan": "Standalone"
}

06. Mengkonfigurasi prompt instalasi

Ketika pengguna mengunjungi PWA dengan seorang pekerja layanan dan manifes, Chrome akan secara otomatis meminta mereka untuk menginstalnya ke homescreen mereka, mengingat hal-hal berikut: Pengguna harus mengunjungi situs dua kali, dengan lima menit antara kunjungan.

Idenya di sini adalah menunggu sampai pengguna menunjukkan minat pada aplikasi Anda, dan kemudian meminta mereka untuk membuatnya fixture dari perangkat mereka (ini sangat kontras dengan pendekatan aplikasi asli, yang meminta investasi itu di muka).

Tetapi mungkin ada kasus di mana Anda ingin menunjukkan prompt instalasi dalam situasi yang berbeda, seperti setelah pengguna mengambil tindakan yang bermanfaat tertentu. Untuk melakukannya, kami mencegat sebelumnyaInstallPrompt. Acara dan simpan untuk nanti, lalu gunakan prompt ketika kita melihat pas. 

 window.addeventlistener ('sebelum installpromprompt', e = & gt; {
  console.log ('sebelum menginstallprompromprompt bewaris');
  E.PreventDefault ();
  // Simpan acara sehingga dapat dipicu nanti.
  ini.deferredprompt = e;
  kembali salah;
  });
// Ketika Anda ingin memicu prompt:
ini.deferredpromp.prompt ();
  ini.deferredprompromp.userchoice.then (Pilihan = & gt; {
  konsol.log (pilihan);
  });
ini.deferredprompromp = null;

07. Menganalisis kinerja aplikasi Anda

Kinerja adalah jantung dan jiwa PWAS. Aplikasi Anda harus cepat untuk pengguna pada semua kondisi jaringan. Kemampuan caching dan offline banyak membantu, tetapi pada akhir hari, aplikasi Anda harus cepat bahkan jika pengguna tidak memiliki browser untuk mendukung teknologi pekerja layanan. Ini adalah definisi peningkatan progresif - memberikan pengalaman hebat bagi semua orang, terlepas dari perangkat modernitas atau kondisi jaringan.

Untuk melakukannya, satu set metrik yang berguna adalah sistem kereta api. Rail adalah apa yang disebut Google sebagai 'model kinerja centric pengguna' - satu set pedoman untuk mengukur kinerja aplikasi kami.

Akronim ini menanggapi respons (berapa lama untuk aplikasi Anda merespons tindakan pengguna), animasi (menjaga kecepatan animasi pada 60fps), idle (menggunakan waktu ketika aplikasi Anda tidak melakukan hal lain untuk memuat dan men-cache aset tambahan) dan Memuat (memuat aplikasi Anda dalam satu detik atau kurang).

Berikut ini adalah tabel tolok ukur yang bermakna untuk pemuatan aplikasi, sebagaimana disediakan oleh Meggin Kearney, penulis teknologi di Fundamental Web Google. .

delay and user reaction

Klik ikon di kanan atas untuk memperbesar gambar

08. Audit Aplikasi Anda dengan Mercusuar

Google adalah juara terbesar yang mendorong aplikasi web progresif sebagai masa depan web. Dengan demikian, ia telah menyediakan alat yang berguna untuk memandu pengembangan PWA Anda.

Sebelumnya disebut mercusuar dan dipasok sebagai ekstensi krom, pada Chrome 60 itu adalah bagian dari Chrome DevTools, di bawah tab 'Audit'. Lighthouse apa yang menjalankan aplikasi Anda dalam kondisi yang berbeda dan mengukur respons dan kesuksesannya sesuai dengan Pedoman PWA. Itu kemudian memberi Anda skor dari 100. Ini juga dapat mencetak aplikasi Anda pada praktik terbaik web secara bersamaan.

Teks berikut adalah daftar nilai mercusuar yang diukur. Digunakan juga menunjukkan deskripsi.

  • Mendaftarkan seorang pekerja layanan
  • Merespons dengan 200 saat offline
  • Berisi beberapa konten ketika JavaScript tidak tersedia
  • Menggunakan HTTPS.
  • Redirects lalu lintas HTTP ke HTTPS
  • Beban halaman cukup cepat pada 3G
  • Pengguna dapat diminta untuk menginstal aplikasi web
  • Dikonfigurasi untuk layar splash khusus
  • Alamat bar cocok dengan warna merek
  • Mempunyai sebuah & lt; meta name = "viewport" & gt; Tag dengan lebar atau skala awal
  • Konten berukuran benar untuk viewport

Artikel ini awalnya muncul di perancang web; berlangganan di sini .

Artikel terkait:

  • PWAS: Selamat datang di revolusi seluler
  • Cara menggunakan animasi di aplikasi seluler
  • 9 Rahasia PWA yang luar biasa

Bagaimana caranya - Artikel Terpopuler

Persiapan dengan Flame Painter

Bagaimana caranya Sep 16, 2025

Flame Painter adalah paket cat dan efek partikel mandiri yang memungkinkan Anda untuk dengan cepat dan mudah membuat lukisan asli, efek cahaya, desain tidak konvensional atau latar belakang f..

Gunakan Adobe XD untuk membuat interaksi mikro

Bagaimana caranya Sep 16, 2025

(Kredit Gambar: Adobe) Adobe XD dapat membantu dengan prototyping - salah satu proses paling penting dalam siklus hid..

Cara mematikan pemberitahuan web untuk Windows, MacOS dan Android

Bagaimana caranya Sep 16, 2025

(Kredit Gambar: Masa Depan) Jika Anda pengguna web biasa, Anda pasti akan melihat pemberitahuan dari situs web yang A..

mulai dengan express.js

Bagaimana caranya Sep 16, 2025

Membuat aplikasi yang menghadap browser dengan node.js menjadi membosankan. Express.js. adalah Kerangka Ja..

Cara menggunakan font web

Bagaimana caranya Sep 16, 2025

Berikut ini adalah kutipan yang diambil dari Buku Pegangan Webfont Bram Stein. Beli di sini ..

Buat set ikon produk di Illustrator

Bagaimana caranya Sep 16, 2025

Klik ikon di kanan atas untuk memperbesar ikon Ikon ilustrasi dapat menjadi tambahan sup..

4 Tips Optimasi Gambar Penting

Bagaimana caranya Sep 16, 2025

Beberapa pengembang yang beruntung dan penulis ini memiliki kesempatan untuk mengedit Edit Edit Optimasi Gambar Baru Osmani, ..

Buat karakter dengan pose yang kuat di Photoshop

Bagaimana caranya Sep 16, 2025

Menciptakan karakter laki-laki yang berlebihan adalah tentang berlebihan, mendorong bentuk, kesenangan, gerak dan sudut kamera ke..

Kategori