Penggunaan Aplikasi Web Progresif kemampuan modern web untuk menyediakan pengguna antarmuka yang ramah pengguna. Situs web apa pun bisa menjadi PWA, dan artikel ini akan membantu Anda melakukannya.

Max Böck, seorang pengembang front-end dari Austria, menulis sebuah artikel yang menunjukkan betapa sederhananya proses mengubah situs web biasa menjadi Aplikasi Web Progresif. Kami telah menerjemahkannya untuk Anda dan yang tersisa bagi Anda hanyalah mulai bekerja dengan cepat.

Mengubah website Anda menjadi Progressive Web App tidaklah sulit dan memiliki banyak keuntungan, maka pada artikel ini saya akan memberi tahu Anda cara melakukannya dalam tiga langkah. Namun pertama-tama, mari kita lihat beberapa kesalahpahaman umum:

1. Proyek Anda tidak harus berupa "aplikasi" untuk menjadi Aplikasi Web Progresif.

Aplikasi Web Progresif dapat berupa blog, situs periklanan, toko, atau kumpulan meme kucing. Pada intinya, Aplikasi Web Progresif hanyalah cara untuk mengoptimalkan kode Anda untuk kinerja yang lebih baik dan lebih baik. pengiriman cepat kepada pengguna. Anda dapat dan harus memanfaatkan fitur-fitur ini, apa pun konten Anda.
Catatan: Istilah "aplikasi" dalam Aplikasi Web Progresif banyak diperdebatkan karena beberapa orang percaya bahwa istilah tersebut menyampaikan gagasan yang salah. IMHO itu hanya sebuah nama dan sulit untuk membedakan antara situs web dan aplikasi web akhir-akhir ini.

2. Proyek Anda tidak harus berupa satu halaman berbasis Javascript.

Jika Anda tidak menggunakan React-Redux SPA tingkat lanjut, maka ini bukan alasan untuk menghindari penggunaan teknologi ini. Situs pribadi saya hanyalah sekumpulan HTML statis yang berjalan di Jekyll, dan masih merupakan aplikasi web progresif yang berfungsi. Jika Anda menjalankan sesuatu secara online, ini mungkin berguna.

3. Aplikasi Web Progresif tidak dibuat khusus untuk Google atau Android.

Keunggulannya adalah Aplikasi Web Progresif menawarkan yang terbaik dari kedua dunia—tautan dalam dan URL www, akses offline, pemberitahuan push, dan banyak lagi dari aplikasi asli—sambil tetap sepenuhnya independen dari platform. Tidak ada pasar bermain atau toko aplikasi, tidak ada kode terpisah untuk iOS/Android, hanya web.

4. Aplikasi Web Progresif segera siap dan aman digunakan.

"P" berarti progresif, artinya segala sesuatu yang berhubungan dengannya dapat dianggap sebagai perbaikan baru. Jika peramban lama tidak mendukung Aplikasi Web Progresif, tidak akan rusak; itu hanya akan kembali ke tampilan default - situs web biasa.

Oke, mengapa saya melakukan ini?
Ada manfaat serius mengubah situs Anda menjadi Aplikasi Web Progresif:
● UX yang lebih cepat dan aman
● Peringkat Terbaik Google
● Kemudahan penggunaan
● Performa lebih baik
● Akses offline

Meskipun Anda tidak mengharapkan pengguna untuk "menginstal" Aplikasi Web Progresif Anda (seperti meletakkan pintasan di layar beranda), masih banyak peralihan yang harus dilakukan. Semua langkah yang diperlukan untuk membuat Aplikasi Web Progresif akan meningkatkan situs Anda dan secara umum dianggap sebagai praktik terbaik.

Langkah 1: Nyatakan.

Manifes hanyalah file JSON yang menjelaskan semua metadata Aplikasi Web Progresif Anda. Hal-hal seperti nama, bahasa, dan ikon aplikasi Anda. Informasi ini akan memberitahu browser bagaimana menampilkan aplikasi Anda ketika disimpan sebagai pintasan. Ini terlihat seperti ini:

( "lang": "en", "dir": "ltr", "name": "Ini PWA saya yang luar biasa", "short_name": "myPWA", "icons": [ ( "src": "/assets /images/touch/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" ) ], "theme_color": "#1a1a1a", "background_color": "#1a1a1a ", "start_url": "/", "display": "mandiri", "orientasi": "alami" )

Biasanya disebut "manifest.json" dan dikaitkan dengan tag situs Anda:

Tip: Anda tidak perlu menulis file ini sendiri. Berbagai sistem memiliki ukuran yang berbeda, tapi melakukannya sendiri sangat melelahkan. Sebagai gantinya, Anda dapat membuat satu gambar berukuran 500x500 untuk ikon aplikasi Anda (mungkin logo Anda) dan kemudian melanjutkan ke Pembuat Favicon Asli. Mereka menyediakan segalanya ukuran yang diperlukan, tag meta dan buat file manifes. Ini sungguh menakjubkan.

Langkah 2: Beralih ke HTTPS.

Aplikasi Web Progresif harus berhasil koneksi aman, Itu sebabnya protokol HTTPS- Ini keputusan yang tepat. HTTPS mengenkripsi data pengguna yang dikirim ke server dan melindungi koneksi dari penyusup. Akhirnya Waktu Google secara aktif mendukung situs dengan HTTPS dan memberi peringkat lebih tinggi daripada pesaing yang tidak aman.
Untuk beralih ke HTTPS, Anda memerlukan sertifikat SSL dari otoritas tepercaya. Cara mendapatkannya secara langsung bergantung pada situasi hosting, tetapi biasanya hanya ada dua cara untuk melakukannya:

• Jika Anda menggunakan milik Anda server sendiri atau memiliki akses root, coba LetsEncrypt. Ini adalah otoritas sertifikat gratis, terbuka dan sederhana yang memungkinkan siapa saja untuk mulai menggunakan HTTPS. Mudah diatur dan dimiliki reputasi yang baik di antara badan-badan yang berwenang.
• Jika Anda menggunakan hosting bersama Sayangnya, banyak penyedia tidak mengizinkan Anda mengontrol level LetsEncrypt. Sebaliknya, mereka biasanya menawarkan sertifikat SSL secara bulanan atau tahunan. Jika Anda tidak yakin bagaimana cara mendapatkan sertifikat, hubungi penyedia hosting Anda.

Setelah Anda menerima sertifikat, mungkin ada beberapa penyesuaian yang perlu dilakukan pada kode Anda untuk memastikan bahwa semua sumber daya terlindungi. Untuk menerima informasi tambahan tentang proses ini, baca panduan dari keyCDN.
Jika semuanya berjalan sesuai rencana, Anda akan diberi ikon gembok hijau yang bagus di sebelah URL Anda:

Langkah 3: Pekerja layanan.

Di sinilah semua keajaiban terjadi. Pekerja layanan pada dasarnya adalah bagian dari Javascript yang bertindak sebagai perantara antara browser dan host. Ini diinstal secara otomatis di browser yang didukung dan dapat mencegat permintaan yang dikirim ke situs Anda dan meresponsnya secara berbeda.
Anda dapat menyiapkan SW baru hanya dengan membuatnya berkas Javascript di direktori root proyek Anda. Sebut saja sw.js. Isi file ini bergantung pada apa yang ingin Anda capai - kita akan membahasnya sebentar lagi.
Agar browser mengetahui bahwa kita bermaksud menggunakan file ini sebagai Service Worker, kita perlu mendaftarkannya terlebih dahulu. Di skrip utama situs Anda, aktifkan fungsi berikut:

function registerServiceWorker() ( // mendaftarkan skrip sw di browser yang didukung if ("serviceWorker" di navigator) ( navigator.serviceWorker.register("sw.js", ( cakupan: "/" )).then(() => ( console.log("Pekerja Layanan berhasil didaftarkan."); catch(error => ( console.log("Pendaftaran Service Worker gagal:", error); ) ));

Parameter cakupan menentukan permintaan mana yang dapat dicegat oleh SW. Ini jalur relatif ke akar domain. Misalnya, jika Anda menyetelnya ke /artikel, Anda akan dapat mengelola permintaan ke domainanda.com/artikel/postingansaya, namun tidak ke domainanda.com/kontak.

Offline adalah warna hitam baru

Ada banyak hal keren yang dapat Anda lakukan dengan Service Worker. Salah satunya adalah kemampuan untuk menyimpan konten dalam cache, menyimpannya secara lokal dan membuatnya tersedia saat pengguna sedang offline. Meskipun dilakukan secara online, hal ini akan berdampak signifikan terhadap waktu muat halaman karena permintaan dapat melewati jaringan dan akses ke aset akan dilakukan secara instan.
Selain caching browser tradisional, dengan pekerja layanan yang diinstal, Anda dapat menentukan daftar sumber daya untuk di-cache - sehingga pengguna tidak perlu membuka halaman untuk melakukan cache. Berikut tampilannya:

// sw.js self.addEventListener("install", e => ( e.waitUntil(// setelah layanan instalasi pekerja // buka cache baru caches.open("my-pwa-cache").then(cache => ( // tambahkan semua URL resource yang ingin kita cache return cache.addAll([ "/", "/index .html ", "/about.html", "/images/doggo.jpg", "/styles/main.min.css", "/scripts/main.min.js", ]); ))); ));

🔥 Saran. Jika Anda ingin segera memulai modus luring, saya sangat merekomendasikan menggunakan sw-precache. Alat ini, dibuat oleh orang-orang di Google, dengan mudah diintegrasikan ke dalam proses pembuatan Gulp atau Grunt untuk membuat file pekerja layanan.

Sebenarnya menjawab pertanyaan ini cukup sulit. Untuk saat ini katakanlah ini:

Progresif Aplikasi Web(PWA) adalah aplikasi hibrida atau situs web yang berfungsi pada platform apa pun, pada perangkat apa pun

Saya akan mencoba menjelaskan definisi yang tidak terlalu berhasil ini.

Sekarang ada jumlah yang sangat besar perangkat yang dapat digunakan untuk berinteraksi dengan perusahaan kami, tetapi secara kondisional metode interaksi tersebut dapat dibagi menjadi dua kelompok besar:

1. Situs web
2. Aplikasi seluler

Situs web sangat kita kenal dan menempati porsi dominan dalam komunikasi bisnis dan pengguna. DI DALAM akhir-akhir ini sebagian besar situs web menjadi nyaman untuk digunakan di hampir semua kondisi dan di perangkat apa pun, tetapi ada batasan serius - saluran komunikasi yang tidak stabil di kondisi seluler. Semuanya tampak bagus, tetapi jika tidak ada Internet, tidak ada situs web. Dan jika kecepatan koneksi Internet berfluktuasi dan berubah tajam dari puluhan megabit per detik menjadi beberapa kilobit, maka bekerja dengan situs web hampir tidak bisa disebut nyaman. Ingat bagaimana Anda melihat situs web di kereta atau di gerbong kereta bawah tanah...

Secara teori, aplikasi seluler seharusnya bebas dari kelemahan ini, tetapi bahkan di sini pengembang lupa bahwa pengguna mungkin tidak memiliki akses Internet. Namun, pengembangan dan, yang tidak kalah pentingnya, dukungan lebih lanjut terhadap aplikasi tersebut, dan seterusnya platform yang berbeda!, tugasnya bukanlah yang termudah. Dan sebagai hasilnya, kita mendapatkan aplikasi “untuk pertunjukan” bodoh lainnya, yang nilainya cenderung nol. Selain itu, Anda dapat menambahkan ketidakmungkinan menjalankan aplikasi seluler di desktop, dan ini sering kali diperlukan.

Aplikasi Web Progresif dirancang untuk memecahkan masalah ini dan menggabungkan dua kelompok besar metode komunikasi ini menjadi satu kelompok besar - PWA. Anda dapat mengatakan ini:

Aplikasi Web Progresif adalah cara membangun aplikasi menggunakan tumpukan Web (HTML, CSS JS) yang memenuhi tiga prinsip penting:

1. Kemandirian dari koneksi jaringan - berfungsi dalam mode offline

2. Kecepatan dan daya tanggap - respons cepat terhadap tindakan pengguna

3. Tampilan asli - ideologi antarmuka perangkat tidak rusak

Beberapa contoh PWA

Berikut beberapa tautan tempat Anda dapat menemukan PWA, bahkan di tempat yang tidak Anda duga, seperti kebanyakan tempat layanan Google adalah PWA:

Coba buka situs/aplikasi ini (bahkan di desktop!) dan aktifkan mode pesawat sambil mematikan Internet.

Jika Anda melihat lebih dekat pada gambar di atas, Anda mungkin akan menyadarinya Google Simpan jelas berfungsi antarmuka Windows, yaitu, ia berfungsi di desktop sebagai aplikasi lengkap!

PWA di desktop

Memang benar, Aplikasi Web Progresif dapat dan berfungsi pada desktop (walaupun belum semua browser mendukung hal ini). aplikasi reguler.

Berikut adalah contoh layar komputer saya. Semuanya, semua aplikasi yang sedang terbuka di layar adalah PWA.

Setuju, ini sangat nyaman! Aplikasi ini tidak perlu diinstal, hanya beberapa klik mouse dan semua pengaturan sudah lengkap lingkungan kerja sudah tersedia untuk Anda. Dan tidak ada bedanya komputer apa yang Anda gunakan - desktop atau laptop. Kondisi dimana pekerjaan ditinggalkan adalah kondisi yang sama dengan kondisi di tempat kerja lainnya.

Tapi bagaimana ini mungkin?

Menerapkan Aplikasi Web Progresif (PWA)

Pertama-tama, penting untuk dipahami bahwa aplikasi PWA apa pun adalah sebuah situs web, lebih tepatnya penggunaan penuh Tumpukan web:

• Antarmuka aplikasi - HTML/CSS melalui HTTPS (wajib!)
• Interaksi pengguna (interaktif) - AJAX (kami lebih memilih interaksi REST API)
• Peringatan, sinkronisasi data paksa - Push API
• Menyimpan data dalam cache untuk pekerjaan offline - Service Worker dan Cache API (detail lebih lanjut di bawah)

Di Sini instruksi kecil Cara membuat aplikasi pertama Anda dari awal tersedia di Google Сodelabs.

Manifes PWA

SW-lah yang menerapkan kebijakan cache aplikasi agar aplikasi dapat beroperasi dalam mode offline. Jelas akan berbeda untuk setiap aplikasi, tetapi paling sering pengembang menggunakan kebijakan Offile First. Ada artikel bagus (juga lama! PWA tidak lahir hari ini atau kemarin! Tapi Anda tidak tahu :)), yang menjelaskan dengan baik mengapa demikian. Pastikan untuk meluangkan waktu untuk mempelajarinya:
https://alistapart.com/article/offline-first

Secara umum, Service Wordker jauh dari tidak berbahaya seperti yang terlihat pada pandangan pertama, dan untuk alasan yang baik mereka memerlukan pertimbangan terperinci, tetapi untuk saat ini kami akan menawarkan Anda solusi yang cukup sederhana ini sebagai percobaan pertama.
https://justmarkup.com/log/2016/01/add-service-worker-for-wordpress/

Jangan menganggapnya sebagai solusi lengkap untuk sebuah situs web, tetapi ini adalah platform yang bagus untuk bereksperimen dan membuat kemajuan! Mungkin nanti saya akan menulis tentang gundukan dan banyaknya garu yang kami injak saat pertama kali menerapkan PWA di website. Jika Anda tertarik dengan topik ini, tulis pertanyaan di komentar.

Menerapkan PWA di situs WordPress

Anehnya, meskipun Aplikasi Web Progresif telah ada cukup lama (dan idenya sendiri sudah berumur bertahun-tahun!), para pengembang hanya sedikit membicarakan hal tersebut. DAN solusi siap pakai untuk CMS paling umum di dunia, jumlahnya juga tidak terlalu banyak. Tapi ada. Berikut beberapa plugin yang memungkinkan Anda menyematkan di situs web Fitur WordPress Aplikasi PWA:

• Aplikasi Web Super Progresif adalah plugin yang cukup sederhana namun sangat sukses.
• Aplikasi Web Progresif dari PWAThemes.com - lebih kompleks, tetapi juga lebih banyak solusi fleksibel, yang memungkinkan Anda membuat tema terpisah ( penampilan) untuk presentasi PWA.

Menginstal PWA di situs WordPress dalam praktiknya

Untuk memulainya, saya mengambil toko online pakaian dalam erotis yang cukup sederhana - https://www.lustshop.ru/
Harap dicatat: HTTPS diperlukan!

Dipasang Plugin super PWA dan atur pengaturan awal(jumlahnya tidak banyak):

Saya mengatur ulang cache situs dan mencoba masuk dari perangkat seluler:

Berikut adalah banner untuk menginstal aplikasi di bagian bawah layar

Aplikasi sedang diinstal...

Semua! Aplikasi PWA di perangkat seluler!

Sekarang mari kita coba meletakkannya di desktop. Untuk melakukan ini, pilih item ini di browser:

Siap! Aplikasi telah muncul di desktop!

Kesimpulan singkat

Jadi, seperti yang bisa kita lihat, Progressive Web Apps sebenarnya menggabungkan situs dan aplikasi, sehingga mengaburkan batasan di antara keduanya.

Dengan menggunakan pendekatan PWA kita bisa berkreasi layanan yang nyaman(situs? aplikasi?) yang akan berfungsi dalam kondisi apa pun, pada platform apa pun.

Plugin memungkinkan Anda membuat aplikasi PWA sederhana, tetapi tidak akan menyelesaikan semua masalah. Aplikasi yang bagus perlu hati-hati merancang dan mengembangkan sendiri.

Tapi itu cerita yang sama sekali berbeda...

Sungguh menakjubkan betapa cepatnya perubahan teknologi. Baru kemarin semua orang dikejutkan dengan pesatnya perkembangan aplikasi seluler asli, namun hari ini kita menyaksikan evolusi baru.

Tidak ada yang menyangka bahwa perkembangan aplikasi seluler akan berubah secara dramatis. Jadi apa yang sedang kita bicarakan?

Pada tahun 2015 perusahaan Google mengumumkan penciptaan teknologi baru - aplikasi web progresif / Progressive Web App (PWA). Namun, saat itu hanya sedikit orang yang menganggap serius inovasi ini. Namun, PWA menjadi tren populer saat ini.

Jadi apakah teknologi ini - Aplikasi Web Progresif? Aplikasi seluler progresif adalah produk evolusi bersama dari situs web seluler dan aplikasi asli. Sederhananya, hybrid yang menyerap yang terbaik dari pendahulunya.

Kini kemudahan menginstal dan membuka situs seluler serta fungsionalitas aplikasi asli (pemberitahuan push, navigasi GPS, dan fungsi asli lainnya) menjadi satu.

Berkat teknologi ini, baik pelanggan maupun pengguna mendapatkan keuntungan.

Aplikasi semacam itu dapat dikembangkan beberapa kali lebih murah dan lebih cepat daripada aplikasi asli, sehingga membuka banyak peluang baru bagi perusahaan kecil.

Bagi pengguna, kelebihannya pun tak kalah signifikan: tidak memakan ruang di memori ponsel, tidak perlu mendownload aplikasi dari toko.

Salah satu keunggulan terpenting PWA dibandingkan aplikasi asli adalah tidak adanya perantara berupa toko Aplikasi Simpan dan Google Bermain. Teknologi aplikasi web progresif sepenuhnya menghilangkan tautan tambahan ini.

Tidak adanya toko aplikasi berarti pengembang tidak lagi harus mematuhi aturan dan kebijakan yang ditetapkan Apple dan Google, dan pengguna memiliki proses instalasi yang disederhanakan. Untuk membuka PWA, cukup buka situs web perusahaan dari perangkat seluler, dan aplikasi web tertaut akan terbuka secara otomatis.

Dalam hal ini, Anda dapat memasang ikon aplikasi tersebut di layar ponsel. Untuk melakukan ini, Anda harus menyetujui instalasi di kotak dialog yang terbuka secara otomatis.

Cara instalasi ini sangat berbeda dengan menginstal aplikasi biasa (native). Pada dasarnya, ikon PWA adalah gambar dengan tautan ke aplikasi web yang dibuka melalui browser, sehingga pengguna dapat meluncurkan aplikasi yang mereka sukai kapan saja. Perbedaan penting lainnya antara PWA dan “heavy native” adalah PWA hampir tidak memakan ruang di memori ponsel pengguna.

Tapi kelebihan tetaplah kelebihan, tapi bagaimana dalam praktiknya?

Meskipun orang-orang yang skeptis memandang teknologi baru ini dengan hati-hati, perusahaan-perusahaan perintis justru menguji produk tersebut evolusi seluler dari pengalaman saya sendiri.

Jadi, salah satu perusahaan pertama yang mencoba PWA adalah Lancôme, merek kosmetik terkenal Perancis.

• Terjemahan

Pernahkah Anda melihat tombol “Tambahkan ke”? layar beranda” yang muncul di layar smartphone Android Anda saat Anda sedang menjelajahi suatu website? Jika Anda mengklik tombol ini, maka ke telepon, masuk latar belakang, aplikasi tertentu akan diinstal, ikon peluncurannya akan muncul di layar utama. Sekarang Anda dapat meluncurkan aplikasi ini dan bekerja dengan situs ini dengan cara yang hampir sama seperti sebelumnya, tetapi hanya dalam antarmuka telepon biasa.

Yang kita bicarakan adalah aplikasi seluler yang telah diunduh dari aplikasi web. Terlebih lagi, seperti yang Anda lihat, untuk menginstal aplikasi semacam itu Anda tidak perlu berinteraksi dengannya Pasar Bermain. Hasilnya, menginstal aplikasi semacam itu menjadi semudah mungkin. Namun, ini bukanlah yang paling menarik. Meluncurkan program serupa, Anda mendapat kesempatan untuk bekerja dengan data yang dihasilkannya, bahkan tanpa koneksi Internet. Mereka memungkinkan Anda berinteraksi dengan halaman web secara offline. Bukankah ini luar biasa?

Anda mungkin sudah menyadari bahwa kita baru saja membicarakan apa yang disebut Aplikasi Web Progresif (PWA). Aplikasi semacam itu dapat diinstal langsung dari jendela browser; ikon untuk meluncurkannya akan terlihat seperti ikon biasa aplikasi seluler, dan seperti banyak aplikasi seluler lainnya, ini memungkinkan Anda bekerja dengannya tanpa koneksi Internet.

Sekarang mari kita bicara tentang apa yang dimaksud dengan “progresifitas” yang diterapkan pada aplikasi web. Saya sarankan Anda melihatnya lebih dekat, mencari tahu perbedaannya dari aplikasi web biasa, dan, sebagai tambahan, saya ingin memberi tahu Anda mengapa saya yakin PWA lebih baik daripada aplikasi seluler tradisional.

Apa itu Aplikasi Web Progresif?

PWA memberi pengguna fitur-fitur baru yang nyaman melalui perbaikan progresif aplikasi. Secara keseluruhan, ini berarti PWA aktif perangkat seluler generasi yang berbeda, akan bekerja kurang lebih sama. Tentu saja, beberapa kemungkinan biasa saja aplikasi telepon mungkin tidak tersedia untuk mereka, namun aplikasi seperti itu biasanya berjalan perangkat yang berbeda cara mereka seharusnya bekerja untuk mereka.

Mengapa kita memerlukan Aplikasi Web Progresif?

• Kecepatan koneksi internet rendah. Mungkin di tempat Anda tinggal, bersama internet cepat tidak apa-apa, jadi masalah ini tidak mempengaruhimu. Namun 60% populasi dunia masih menggunakan Internet 2G. Bahkan di AS, beberapa pengguna hanya memiliki akses dengan kecepatan yang sebanding modem biasa menggunakan saluran telepon sederhana.
• Situs web memuat lambat. Jika situs dimuat dengan sangat lambat, tahukah Anda berapa lama pengguna menunggu sebelum mengklik tombol tutup? Tiga detik! 53% pengguna meninggalkan situs web yang terlalu lambat.
• Instalasi aplikasi yang padat karya. Pengguna tidak ingin menginstal aplikasi seluler biasa. Rata-rata pengguna menginstal 0 aplikasi per bulan.
• Melibatkan pengguna dalam bekerja dengan aplikasi. Pengguna menghabiskan sebagian besar waktunya di aplikasi seluler biasa, namun jangkauan pengguna aplikasi web seluler sekitar tiga kali lebih banyak. Akibatnya, sebagian besar pengguna tidak terlalu terlibat dengan aplikasi, meskipun para pengguna ini menghabiskan 80% waktunya di tiga aplikasi seluler yang paling sering mereka gunakan.

Ada banyak alasan untuk menggunakan PWA, namun di sini saya ingin menyoroti fitur utama yang disediakannya. Jika kita menggambarkan kemampuan ini dalam satu kata, maka singkatan FIRE (Fast, Integrated, Reliable, Engaging) akan cocok, yaitu aplikasi web progresif harus cepat, terintegrasi ke dalam lingkungan kerja perangkat, dapat diandalkan, dan memiliki sarana untuk melibatkan pengguna dalam bekerja dengannya.

1. Jika kita berbicara tentang kecepatan, PWA bekerja dengan cepat di semua tahap interaksi pengguna dengannya. Mereka menginstal dengan cepat, meluncurkan dengan cepat, dan bekerja dengan cepat. Karena PWA memungkinkan Anda menyimpan data dalam cache, peluncuran ulang aplikasi tersebut terjadi dengan sangat cepat, bahkan tanpa mengakses sumber daya jaringan.
2. Integrasi PWA ke dalam lingkungan perangkat berarti aplikasi tersebut berperilaku seperti aplikasi biasa. Ikon untuk meluncurkannya ada di layar beranda, mereka dapat bekerja dengan pemberitahuan push, dan mereka dapat menggunakan fungsi perangkat yang sama seperti aplikasi biasa. Akibatnya, saat bekerja dengan aplikasi web progresif, pengguna tidak merasa seperti meninggalkan lingkungan biasanya.
3. Keandalan aplikasi web terintegrasi didasarkan pada kenyataan bahwa aplikasi tersebut dapat bekerja secara normal tanpa koneksi jaringan, karena kemampuan untuk menyimpan data dalam cache menggunakan pekerja layanan.
4. Kemampuan PWA untuk melibatkan pengguna didasarkan pada fakta bahwa mereka dapat mengirimkan pemberitahuan kepada pengguna. Hal ini memungkinkan pengguna untuk selalu mengetahui informasi terkini tentang peristiwa terkait aplikasi yang menarik baginya, dan menariknya untuk bekerja dengan aplikasi ini.

Bagaimana cara membuat aplikasi web progresif?

▍1. Manifes aplikasi

( "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait ", "Cakupan": "/", "start_url": "/", "ikon": [ ( "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type ": "gambar/png" ), ( "src": "gambar/ikon/ikon-96x96.png", "ukuran": "96x96", "tipe": "gambar/png" ), ( "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" ), ( "src": "images/icons/icon-144x144.png", "sizes" ": "144x144", "type": "image/png" ), ( "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png " ), ( "src": "gambar/ikon/ikon-192x192.png", "ukuran": "192x192", "tipe": "gambar/png" ), ( "src": "gambar/ikon/ikon -384x384.png", "ukuran": "384x384", "tipe": "gambar/png" ), ( "src": "gambar/ikon/ikon-512x512.png", "ukuran": "512x512", "ketik": "gambar/png" ) ], "splash_pages": null )
Di depan kita - file JSON biasa, yang berisi informasi meta tentang aplikasi web. Di sini terdapat data tentang ikon aplikasi (pengguna melihat salah satunya di layar utama setelah menginstal aplikasi), tentang warna latar belakang aplikasi, nama lengkap dan singkatannya, dan sebagainya. Anda dapat menulis manifes ini sendiri, atau Anda dapat menggunakan alat khusus yang mengotomatiskan pembuatan file tersebut.

▍2. Pekerja jasa

Berikut adalah contoh file serviceworker.js.

Self.addEventListener("fetch", event => ( // cache data untuk pekerjaan offline const (request) = event; const url = new URL(request.url); if(url.origin === location. origin) ( event.respondWith(cacheData(permintaan)); ) lain ( event.respondWith(networkFirst(permintaan)); ) )); fungsi async cacheData(permintaan) ( const cachedResponse = menunggu caches.match(permintaan); kembalikan cachedResponse || ambil(permintaan); )

▍3. Lencana

▍4. Keamanan

Hasil

Apa itu Aplikasi Web Progressiwe (PWA)?

Berbicara dalam bahasa yang sederhana PWA adalah situs web yang dapat ditambahkan pengguna ke desktop ponselnya dan berinteraksi dengannya secara offline.

Dan jika kita memperumitnya sedikit, PWA adalah sekelompok aplikasi yang dibangun di atas base stack Teknologi web(JS+HTML+CSS) dan memungkinkan Anda menyederhanakan interaksi dengan situs ke tingkat aplikasi seluler asli. Tugas utama teknologi - meningkatkan konversi halaman, menyederhanakan interaksi pengguna seluler dengannya.

Teknologi PWA merupakan perpanjangan dari AMP. Selain itu, halaman AMP dapat “ditingkatkan” ke standar Aplikasi Web Progresif.

Persyaratan umum untuk PWA:

• Kemampuan beradaptasi - pekerjaan yang benar di perangkat apa pun
• Offline - Saat menggunakan Service Worker, aplikasi harus bekerja offline
• Kenyamanan - pengguna harus merasa nyaman berinteraksi dengan aplikasi di perangkatnya
• Keamanan - harus ada perlindungan terhadap intersepsi dan substitusi data
• Mudah dipasang - pengguna seharusnya dapat memasang situs PWA di perangkat mereka hanya dengan beberapa klik
• Lintas platform - teknologi pengembangan tidak bergantung pada platform (android atau iOs)

Kekurangan PWA

1. Teknologinya masih baru, sehingga belum tersebar luas
2. Apple belum menyatakan niatnya untuk mendukung teknologi tersebut

Mengapa bisnis membutuhkan PWA?

Penelitian menunjukkan bahwa pengguna kini sangat enggan untuk bertaruh aplikasi lengkap ke perangkat Anda.

Inilah sebabnya mengapa Aplikasi Web Progresif memiliki masa depan yang cerah, baik untuk perdagangan elektronik, dan untuk yang besar portal berita. Apalagi penerapan teknologi memberikan hasil yang luar biasa!

Contoh aplikasi PWA

• AliExpress menggunakan PWA dan meningkatkan konversi sekitar 104%.
• Konga mengoptimalkan sumber dayanya, mengurangi jumlah data yang pertama kali diunduh sebesar 92%.
• Washington Post setelah implementasi, PWA meningkatkan lalu lintas ke artikelnya sebesar 12%, mempercepat pemuatan dari 8 detik menjadi 80 milidetik