Tutorial Aplikasi Web Progresif: Buat PWA Pertama Anda

Dibuat oleh Google sendiri dan saat ini sedang didorong ke platform populer seperti Windows 10, PWA dapat melakukan banyak hal yang sebelumnya eksklusif untuk aplikasi asli, termasuk fitur seperti pemberitahuan push, antarmuka aplikasi yang menarik, kemampuan offline, pemasangan aplikasi… sebut saja .

Dan inilah mengapa kemunculan PWA tidak lagi bersifat sesaat, karena sekarang merupakan gerakan skala besar yang secara fundamental dapat mengubah Web seperti yang kita kenal. Bagi pendatang baru, belum terlambat untuk mengenal teknologi yang sedang berkembang ini karena proses membangun PWA kini dibuat jauh lebih sederhana dari sebelumnya, cocok untuk orang awam yang tertarik seperti Anda.

Untuk tujuan pembelajaran terbaik Anda, hari ini kita akan membuat PWA yang berfungsi penuh menggunakan React, Node.js, dan Firebase.

Prasyarat

• Versi Node.js >= 8.10
• versi npm >= 5.6

Catatan : versi npm seharusnya tidak menjadi masalah karena instalasi Node.js Anda selalu dilengkapi dengan versi terbaru dari manajer paket npm .

1. Buat SPA dengan create-react-app

Pertama, kita membutuhkan sesuatu yang solid untuk dikerjakan, dan create-react-app adalah alat yang sempurna untuk tujuan ini.

 npx create-react-app my-PWA
cd my-pwa
npm mulai

Perintah di atas akan membantu menciptakan pembelajaran, lingkungan berbasis React untuk Anda gunakan.

Sajikan melalui HTTPS

HTTPS adalah standar baru untuk web dan dengan kedatangan PWA, itu hanya menjadi lebih utama. Biasanya, PWA harus dilayani melalui HTTPS karena pekerja layanan itu sendiri tidak dapat bekerja tanpanya; tetapi karena kami bekerja di lingkungan localhost, itu tidak perlu.

2. Jadikan ini berfungsi secara offline

Secara default, service worker dari create-react-app harus dipra-konfigurasi untuk menangani cache offline dan pemuatan konten saat pengguna tidak memiliki koneksi atau pada kunjungan berikutnya.

Pekerja layanan, sederhananya, adalah skrip JavaScript yang berjalan pada utas terpisah dari halaman, dan karena itu, ia tidak memiliki akses ke struktur DOM. Pendekatan baru ini memunculkan fitur peningkatan kinerja yang lebih progresif karena pekerja layanan sekarang tidak hanya menangani semua fitur khas PWA (kemampuan offline, pemberitahuan push, dll), tetapi mereka juga memainkan peran besar dalam meringankan perhitungan berat. situs web Anda di utas terpisah.

Untuk menginstal service worker di PWA Anda, Anda dapat melihat /src/index.js .

Di index.js , cari baris ini

 serviceWorker.unregister()

Ubah unregister() menjadi register() dan service worker Anda akan otomatis terdaftar saat Anda menjalankan my-pwa dalam mode produksi . Tidak disarankan untuk mengaktifkan service worker dalam mode pengembangan karena dapat menyebabkan kasus di mana PWA hanya memuat aset yang di-cache dan tidak menyertakan perubahan lokal terbaru.

Untuk menjalankan my-pwa Anda dalam mode produksi:

 npm menjalankan build
npx melayani build 

Setelah ini, buka Chrome dan buka localhost:5000 , periksa dan sekarang Anda akan melihat pekerja layanan berjalan dengan benar di tab Aplikasi .

Dan di bawah kategori Penyimpanan Cache adalah tempat Anda ingin memeriksa apakah konten offline situs Anda di-cache dengan benar.

Catatan : Ada solusi untuk mendaftarkan pekerja layanan Anda dalam mode non-produksi. Ini dicapai dengan menghapus baris process.env.NODE_ENV === 'production' dari src/serviceWorker.js .

Jika Anda ingin menggali lebih dalam tentang ini dan membuat pekerja layanan Anda sendiri dari awal dan tidak bergantung pada konfigurasi pra-konfigurasi React, kami siap membantu Anda. Dalam tutorial ini, kami menunjukkan cara membuat Aplikasi Web Progresif offline pertama dari aplikasi web sederhana.

3. Siapkan tambahkan ke layar beranda

Jika semuanya telah dilakukan dengan benar sejauh ini, Anda akan melihat ikon instal kecil (+) saat meluncurkan build produksi my-pwa Anda.

Karena semuanya dilakukan secara otomatis untuk Anda, Anda mungkin bertanya-tanya bagaimana semua ini bisa terjadi. Jangan khawatir, itu sebabnya kami di sini.

Untuk menyiapkan PWA A2HS (Tambahkan ke Layar Utama), kami memerlukan manifest.json . manifest.json yang disertakan dengan create-react-app Anda adalah file JSON yang sangat mendasar yang menentukan bagaimana ikon aplikasi Anda muncul kepada pengguna dan menentukan tampilan layar splash-nya. Untuk menyesuaikan ini, ubah file yang ada di /public/manifest.json .

 {
  "short_name": "PWA Pertama Saya",
  "name": "Buat PWA sederhana",
  "ikon": [
    {
      "src": "favicon.ico",
      "ukuran": "64x64 32x32 24x24 16x16",
      "type": "gambar/ikon-x"
    },
    {
      "src": "logo192.png",
      "ketik": "gambar/png",
      "ukuran": "192x192"
    },
    {
      "src": "logo512.png",
      "ketik": "gambar/png",
      "ukuran": "512x512"
    }
  ],
  "start_url": ".",
  "tampilan": "mandiri",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Sebagian besar hal di sini cukup jelas, tetapi jika Anda ingin menggali lebih dalam manifest.json dan peristiwa yang mengarah ke pemasangan PWA, kami telah menulis artikel tentang ini. Jangan lupa untuk memeriksanya.

Catatan : Agar manifest.json berfungsi, Anda harus memasukkannya ke dalam index.html . Secara default, create-react-app seharusnya sudah melakukan ini untuk Anda.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Ketika PWA Anda terdaftar dengan service worker dan manifest.json yang tepat, beforeinstallpromt akan diaktifkan setelah pengguna meluncurkan aplikasi Anda, meminta izin mereka untuk menginstal PWA Anda ke layar beranda pengguna.

Namun Anda harus dicatat bahwa kami hanya menggores permukaan proses A2HS (Tambahkan ke Layar Utama), dan masih banyak lagi yang harus dipelajari. Cara terbaik, menurut kami, bahwa Anda dapat mempelajari apa pun adalah dengan membangunnya dari bawah ke atas, itulah sebabnya kami telah menyiapkan untuk Anda panduan singkat tentang fitur khusus PWA ini. Panduan ini akan memandu Anda melalui beberapa bagian penting dalam acara pemasangan PWA.

Atau, jika Anda merasa malas dan tidak termotivasi, kami juga siap membantu Anda. Manifest Generator kami dibuat untuk mengotomatisasi seluruh proses ini untuk Anda.

4. Atur pemberitahuan push

Peramban telah datang jauh dalam mendukung pemberitahuan push. Baru-baru ini, Chrome bahkan memperkenalkan Pemicu Pemberitahuan untuk mengaktifkan tampilan pemberitahuan dalam mode pesawat. Itu langkah maju yang besar untuk pemberitahuan push.

Dan sekarang, Anda pasti bertanya-tanya di mana bagian yang menggunakan Firebase dalam tutorial ini. Nah, ini dia. Di bagian ini, Anda akan belajar tentang proses integrasi Push Notifications ke dalam PWA menggunakan Firebase, khususnya fitur Cloud Messaging di dalamnya yang memungkinkan pengiriman pesan menggunakan permintaan HTTPS.

Tetapi karena keseluruhan prosesnya agak lama, dan juga untuk membantu Anda melacak semuanya dengan lebih baik, kami telah menyiapkan untuk Anda tutorial integrasi pemberitahuan push kami sendiri. Dengan tutorial ini, Anda tidak akan menemukan masalah saat mencoba mengirim pemberitahuan push ke token pengguna atau ke grup pengguna.

Kesimpulan

Dan itu saja untuk PWA lengkap. Jangan ragu untuk memberi kami pertanyaan jika Anda merasa terjebak di bagian mana pun dari tutorial dan kami akan mencoba yang terbaik untuk menjawabnya!

Baca lebih banyak:
Bagaimana Mengintegrasikan PWA di Magento 2