Cara Mengintegrasikan Tambahkan ke Layar Utama ke PWA Anda

Add to Home screen (singkatnya A2HS) merupakan hal mendasar bagi pengalaman Progressive Web Apps karena memungkinkan pengalaman aplikasi asli penuh, yang mencakup peluncuran aplikasi dari layar beranda pengguna.

 Bacaan yang disarankan: PWA vs Asli: Mana yang Lebih Cocok untuk Anda?

Menjadi fitur yang sangat penting untuk PWA Anda, tentunya Anda tidak dapat tidak memilikinya terintegrasi, itulah sebabnya hari ini dalam tutorial PWA SimiCart, kami akan membahas alasan mengapa A2HS diperlukan, bagaimana digunakan dan bagaimana membuat PWA A2HS-ready, baik di perangkat seluler maupun desktop.

Mendukung browser

A2HS sangat dekat untuk menjadi fitur universal antar browser. Saat ini, saat ini didukung oleh Mobile Chrome/Android Webview (dari versi 31 dan seterusnya), Opera untuk Android (dari versi 32 dan seterusnya) dan Firefox untuk Android (dari versi 58 dan seterusnya). Untuk tampilan yang lebih detail, lihat situs web CanIUse.

PWA Tambahkan ke layar Utama beraksi

Saat menemukan situs yang PWA Add to Home screen diaktifkan (A2HS-Enabled), spanduk yang memberitahukan bahwa situs tersebut dapat ditambahkan ke layar Beranda Anda dapat dilihat di bagian bawah antarmuka pengguna:

Ini adalah promosi pemasangan bawaan yang disediakan browser , yang terjadi bila kriteria tertentu yang dapat dipasang terpenuhi. Pemberitahuan itu sendiri akan ditampilkan saat pertama kali pengguna mengunjungi situs web Anda dan kemudian lagi setelah sekitar 90 hari.

Cara membuat aplikasi web Anda berkemampuan A2HS di ponsel

Kriteria yang dapat diinstal

Agar aplikasi web Anda dapat diinstal, aplikasi tersebut harus:

• belum dipasang
• memenuhi heuristik keterlibatan pengguna (pengguna harus berinteraksi dengan halaman setidaknya selama 30 detik)
• dilayani dari koneksi aman (HTTPS)
• memiliki pekerja layanan terdaftar
• memiliki file manifes yang dikonfigurasi dengan benar
• Dan yang terpenting, browser yang digunakan harus mendukung event beforeinstallprompt . Untuk daftar lengkap browser yang mendukung event beforeinstallprompt , lihat CanIUse.

Mulai

Untuk tujuan demonstrasi, dalam artikel ini kita akan menggunakan proyek create-react-app sebagai dasar untuk membuat PWA yang dapat diinstal. create-react-app adalah perintah React sederhana untuk membuat aplikasi satu halaman.

Catatan : create-react-app membutuhkan setidaknya node >= 10.16 dan npm >= 5.6

Buka Command Prompt Node.js Anda, jalankan perintah berikut:

 npx create-react-app pwa-a2hs
cd pwa-a2hs
benang mulai 

Buat file manifes

Biasanya terletak jauh di dalam folder akar aplikasi web, manifes web Anda adalah file yang berisi semua informasi yang diperlukan situs web Anda—seperti judul aplikasi, jalur ke berbagai ikon, warna latar belakang, dll—dalam format JSON. File manifes web sangat penting untuk aplikasi web fungsional karena memungkinkan penyajian aplikasi web Anda dengan benar di berbagai tahap pengalaman pengguna.

Sebaiknya gunakan Generator Manifes untuk membuat file secara otomatis, bersama dengan ikon ukuran yang dioptimalkan untuk aplikasi Anda.

Menggunakan generator manifes, Anda dapat memiliki file manifest.zip dengan konten seperti ini:

Dan manifest.webmanifest Anda akan terlihat seperti ini:

 {
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "tampilan": "mandiri",
    "lingkup": "/",
    "start_url": ".",
    "nama": "PWA-A2HS",
    "short_name": "PWA",
    "description": "Demo PWA untuk fitur A2HS",
    "ikon": [
        {
            "src": "/icon-192x192.png",
            "ukuran": "192x192",
            "ketik": "gambar/png"
        },
        {
            "src": "/icon-256x256.png",
            "ukuran": "256x256",
            "ketik": "gambar/png"
        },
        {
            "src": "/icon-384x384.png",
            "ukuran": "384x384",
            "ketik": "gambar/png"
        },
        {
            "src": "/icon-512x512.png",
            "ukuran": "512x512",
            "ketik": "gambar/png"
        }
    ]
}

Sekarang salin konten file manifes yang Anda buat ke folder /public/ , hapus file manifest.json default di folder ini, dan lanjutkan ke langkah berikutnya.

Tautkan HTML ke manifes

Setelah selesai mengonfigurasi file manifes, simpan di direktori root situs web Anda sehingga dapat dipanggil nanti dengan jalur relatif, yaitu /manifest.webmanifest .Untuk menyelesaikan penyiapan file manifes, rujuk ke header HTML Anda ( \pwa-a2hs\public\index.html ), seperti ini:

 <kepala>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      nama = "deskripsi"
      content="Situs web dibuat menggunakan create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </head>

Atur alur instalasi

Manifes aplikasi web tidak cukup untuk membuat aplikasi web Anda dapat diinstal. Ada beberapa konfigurasi tambahan yang harus Anda buat untuk membuat aplikasi web Anda dapat diinstal dan dengan demikian, membuatnya selangkah lebih dekat ke PWA.

Buat pekerja layanan

Pekerja layanan mencegat permintaan jaringan Anda dan mengaktifkan berbagai fitur seperti aplikasi yang terkenal dengan PWA. Buat file service-worker.js di pwa-a2hs\public dan isi dengan konten berikut:

 self.addEventListener('mengambil', fungsi(acara) {
  acara.responsDengan(
      caches.match(event.request).lalu(fungsi(respon){
          balas tanggapan || ambil(acara.permintaan);
      })
  );
});

Di sini kita perlu mendengarkan acara fetch karena sangat penting untuk pengalaman menambahkan ke layar beranda Anda, tanpanya aplikasi React Anda tidak akan dapat memenuhi persyaratan kemampuan instal.

Daftarkan pekerja layanan Anda

Dan agar service-worker.js kita berfungsi, kita harus mendaftarkannya dengan memasukkan kode ini di akhir <body> index.html kita :

 //index.html
<skrip>
    if ('serviceWorker' di navigator) {
      // Daftarkan service worker yang di-host di root
      // situs menggunakan cakupan default.
      navigator.serviceWorker.register('/service-worker.js').lalu(fungsi(registrasi) {
        console.log('Pendaftaran pekerja layanan berhasil:', pendaftaran);
      }, /*catch*/ function(error) {
        console.log('Pendaftaran pekerja layanan gagal:', kesalahan);
      });
    } kalau tidak {
      console.log('Pekerja layanan tidak didukung.');
    }
  </skrip>

Saatnya untuk mengujinya!

PWA Anda sekarang harus dapat diinstal. Segarkan frontend Anda dan Anda akan melihat tombol instal di bilah tugas (desktop) atau spanduk pemberitahuan kecil (seluler).

Mengklik Instal akan menghasilkan pintasan PWA seperti di desktop/layar beranda Anda:

Ada lebih banyak pengalaman A2HS

Hal di atas hanyalah tambahan dasar untuk pengalaman layar beranda menggunakan promosi pemasangan yang disediakan browser. Untuk meningkatkannya, Anda juga dapat menyimpan event beforeinstallprompt untuk secara manual memicu alur penginstalan dengan berbagai pola untuk mempromosikan penginstalan PWA.

Dengan tombol instal khusus, Anda dapat menghindari mengganggu perjalanan pengguna dengan menargetkan pengguna tertentu yang akan mendapat manfaat dari penginstalan aplikasi. Dan dengan mempertimbangkan di mana dan di mana menempatkan UI promosi, PWA Anda kemungkinan akan bekerja lebih baik daripada pesaing Anda dan sebagai hasilnya, akan mendapatkan rasio konversi aplikasi yang jauh lebih baik.