Bagaimana cara membuat Aplikasi WEB Progresif (PWA) dari awal dengan pengetahuan pemrograman dasar? Panduan langkah demi langkah

Forbes, Twitter, Uber, Le Equipe, Telegram atau Instagram Mereka adalah beberapa raksasa yang melangkah maju dan menciptakan PWA mereka sendiri, atau aplikasi progresif seperti yang biasa dikenal. Skenario ini menunjukkan kemungkinan bahwa situs web konvensional dilupakan.

Adalah normal, situs web seperti yang kita ketahui telah berevolusi lebih dan lebih banyak hingga menjadi replika yang kurang kuat daripada aplikasi asli. PWA pada dasarnya adalah produk dari evolusi itu, yang kini telah menemukan cara untuk menawarkan pengalaman yang mirip dengan aplikasi seluler dari browser apa pun.

Jika Anda tidak ingin terseret waktu, Adalah penting bahwa Anda mulai berpikir untuk membuat situs web Anda progresif, atau setidaknya sedekat mungkin, karena ini akan mulai memiliki berat ketika memposisikan dirinya lebih cepat daripada nanti.

Apa itu aplikasi web progresif dan bagaimana bedanya dengan yang asli?

Aplikasi progresif adalah alat yang diprogram dan ditulis dalam bahasa web seperti HTML5, JavaScripts dan CSS, tapi itu berperilaku seperti aplikasi seluler, menjaga karakteristik ini sebagai memiliki penyimpanan pada perangkat, yang memungkinkannya digunakan tanpa koneksi internet.

Perbedaan antara progresif dan asli tidak banyak, karena hal pertama yang Anda coba lakukan adalah terlihat seperti yang kedua, tetapi jika kita dapat mengidentifikasi beberapa yang membuat kami lebih suka satu dari yang lain:

• Multiplatform: Perbedaan utama antara satu dan yang lain adalah kenyataan bahwa aplikasi asli hanya dapat digunakan pada perangkat yang diinstal, jadi untuk menggunakannya pada yang lain Anda harus mengunduhnya dari awal. Aplikasi web untuk bagiannya adalah lintas-platform karena Anda dapat mengaksesnya dari browser apa saja seolah-olah itu adalah situs web.
• Berat: Saat ini kami dapat menemukan aplikasi asli seberat program komputer, jadi ini tergantung pada daya. Untuk bagiannya, situs web progresif jarang melebihi 1MB.
• Pembaruan Cepat: Jika suatu aplikasi sangat besar, setiap kali diperbarui itu akan memakan waktu beberapa menit untuk melakukannya. Aplikasi progresif lebih fleksibel dalam hal ini karena sangat ringan, pembaruan dibuat dalam hitungan detik.

Komponen PWA Apa yang diperlukan untuk membuatnya?

Aplikasi progresif pada dasarnya terdiri dari empat bagian; manifes, pekerja layanan, ikon dan server. Masing-masing dari mereka memiliki peran mendasar dalam struktur seluruh alat.

Manifesto Aplikasi

Manifes aplikasi PWA itu adalah file JSON di mana Anda menentukan semua metainformation ini. Di sinilah warna tema, nama, warna latar belakang, ikon, dan detail ditunjukkan.

Pekerja layanan

Ini mungkin komponen yang paling penting. Seperti yang kami sebutkan sebelumnya, ini adalah elemen terprogram yang menawarkan solusi untuk pertukaran informasi antara jaringan dan cache browser. Selain itu, ini juga merekam informasi yang akan dimuat ketika ada koneksi, yang memungkinkan aplikasi dijalankan tanpa internet.

Ikon

Ikon tidak lebih dari gambar yang akan mengidentifikasi aplikasi Anda dari aplikasi web lain di pasar, Anda harus mendesainnya sendiri karena ini akan menjadi ciri khas web.

HTPPS

Akhirnya, perlu memiliki server yang aman dengan sertifikat SSL yang sesuai. Browser tidak akan pernah menjalankan PWA yang di-host di HTPP seperti banyak situs web saat ini. Yang paling penting tentang aplikasi progresif adalah keamanannya, dan browser akan mengawasinya.

Apa yang kita perlukan untuk memprogram aplikasi web progresif ini?

Kami sedang mencapai momen kebenaran di mana kami harus mulai bekerja untuk membuat aplikasi web progresif kami. Ini tidak lebih dari ramalan cuaca sederhana yang akan memberi tahu Anda suhu, kelembaban, dan tekanan atmosfer.

Untuk dapat membuatnya, kita harus memenuhi beberapa persyaratan penting yang harus kita lakukan sebelum memulai pemrograman. Ini adalah sebagai berikut:

• Kunci API Dark Sky: Data aplikasi cuaca kami akan datang langsung dari API ini, jadi Anda harus mendapatkan kunci darinya. Ini sepenuhnya gratis untuk proyek nirlaba kecil seperti yang akan kita buat.
• Pengetahuan pemrograman: Kami tidak akan menipu Anda, untuk memahami apa yang akan kami sampaikan kepada Anda, Anda setidaknya harus memahami pemrograman web dan yang paling penting dari bahasa HTML5, CSS, dan JavaScripts.

Langkah-langkah untuk membuat aplikasi web progresif yang berfungsi dengan dan tanpa internet

Kami telah mencapai tempat yang kami inginkan. Saatnya memulai pemrograman aplikasi progresif pertama Anda, yang sangat sederhana yang akan memberi Anda pengetahuan yang diperlukan untuk membuat yang lebih lengkap dan kuat di masa depan. Perhatikan dan ikuti semua langkah dengan hati-hati:

Dapatkan API Dark Sky

Seperti yang kami sebutkan sebelumnya, hal pertama yang harus Anda lakukan adalah dapatkan kunci API Langit Gelap, yang akan memberikan data cuaca ke aplikasi progresif kami. Untuk melakukan ini, Anda harus pergi langsung ke https://darksky.net/dev, Daftarkan dan minta kuncinya.

Setelah Anda memilikinya, Anda harus memeriksa bahwa itu berfungsi dengan baik. Untuk melakukan ini, Anda harus mengambil tautan berikut dan mengganti di mana dikatakan «KeyAqui» untuk kunci API yang baru saja Anda peroleh. Jika semuanya berjalan dengan baik, Anda harus dapat melihat perkiraan Kota New York tanpa masalah.

https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319

Dapatkan kode aplikasi

Ini sebenarnya adalah lab uji, jadi kami telah mengambil repositori langsung dari Pengembang Google sehingga Anda dapat mengikuti tes panduan ini. Untuk mendapatkan repositori ini, Anda perlu menggunakan Glitch, platform yang sangat berguna yang membantu pengembang bertukar informasi tanpa masalah. Yang harus Anda lakukan adalah sebagai berikut:

• Pergi ke Glitch.com dan di sudut kanan atas layar klik «Proyek Baru» dan kemudian di mana dikatakan «Klon dari Git Repo ».
• Itu akan membuka jendela kecil di mana Anda harus menempelkan alamat berikut «Https://github.com/googlecodelabs/your-first-pwapp.git» dan klik "Terima."

Audit mercusuar

Pada dasarnya dengan kode itu PWA selesai, tetapi masih memiliki kekurangan bahwa kita harus memperbaiki diri kita sendiri dan bahwa kita akan menemukan berkat audit ini. Alat ini memiliki bagian yang dirancang khusus untuk melakukan audit ke situs web progresif seperti yang kita buat dan untuk ini kita harus melakukan hal berikut:

• Buka proyek Anda di tab baru di browser Chrome Anda.
• Nanti terbuka Chrome DevTools dan posisikan diri Anda di tab Audit Di sini platform menunjukkan daftar kategori audit yang harus Anda biarkan semua diaktifkan.
• Hal berikutnya adalah mengklik Jalankan audit dan setelah beberapa detik, Lighthouse memberi Anda laporan halaman.

Buat manifes aplikasi

Alasan mengapa aplikasi gagal manifes adalah karena pada dasarnya tidak memiliki manifes sehingga kita harus percaya, meskipun dalam kasus Anda, Anda hanya perlu mengubah kode dasar dari manifes yang telah kami siapkan untuk Anda.

{   "name": "Clima",   "short_name": "Clima",   "icons": ({     "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": "/images/icons/icon-192x192.png",       "sizes": "192x192",       "type": "image/png"     }, {       "src": "/images/icons/icon-256x256.png",       "sizes": "256x256",       "type": "image/png"     }, {       "src": "/images/icons/icon-512x512.png",       "sizes": "512x512",       "type": "image/png"     }),   "start_url": "/index.html",   "display": "standalone",   "background_color": "#3E4EB8",   "theme_color": "#2F3BA2" }

Untuk menambahkan manifes ini ke aplikasi Anda. Lalu kita harus memberi tahu browser tentang manifes kita dengan menambahkan <link rel = "manifest" … ke setiap halaman aplikasi kita. Sekarang tambahkan baris berikut ke item dalam file index.html.

Selanjutnya kita harus menambahkan deskripsi meta ke aplikasi kita. Untuk ini, kita harus sederhana tambahkan baris kode berikut ke header aplikasi:

Akhirnya kami mengatur warna bilah alamat aplikasi progresif kami, di mana Anda harus menyalin baris kode berikut di aplikasi Anda

Jadikan web offline

Sekarang hadir salah satu bagian paling rumit dari seluruh panduan, Kami akan masuk ke pemrograman murni dan sulit untuk membuat pekerja layanan kami dengan benar, sebuah elemen yang kami sebutkan sebelumnya sangat diperlukan untuk aplikasi progresif apa pun.

Semua pengguna yang kami harapkan dari suatu aplikasi adalah aplikasi itu dapat digunakan tanpa koneksi internet, sehingga mudah bagi kami untuk memasukkan konten tanpa jaringan apa pun. Ini sama pentingnya dalam aplikasi progresif, sehingga kebutuhan dinosaurus Chrome untuk tidak pernah keluar sangat penting.

Apa yang akan kita lakukan di sini adalah halaman offline yang dipersonalisasi. Jadi ketika seseorang memasuki aplikasi dan tidak memiliki koneksi, itu adalah yang ditampilkan bukan dinosaurus yang mengganggu. Untuk ini, kami akan menciptakan pekerja layanan pertama kami.

Jika Anda tidak terlalu mengenal mereka, kami sarankan Anda melakukannya. Ini adalah alam semesta yang sama sekali baru di dunia pemrograman untuk Anda, jadi sangat nyaman bagi Anda untuk berspesialisasi di dalamnya. Dengan cara ini Anda akan tumbuh secara profesional karena Anda akan belajar pengetahuan mutakhir yang akan memungkinkan Anda untuk melangkah maju dari guild Anda.

Hal pertama yang akan kita lakukan adalah mendaftarkan pekerja layanan, untuk itu Anda harus menambahkan baris kode berikut ke file indeks aplikasi progresif:

// CODELAB: Register service worker. if ('serviceWorker' in navigator) {   window.addEventListener('load', () => {     navigator.serviceWorker.register('/service-worker.js')         .then((reg) => {           console.log('Service worker registered.', reg);         });   }); }

Sekarang Anda harus menunjukkan kepada pekerja layanan halaman yang akan ditampilkan saat Anda offline. Di dalam repositori kami telah membuat halaman offline yang dipersonalisasi di (publik / offline.html). Yang harus Anda lakukan hanyalah pergi ke Publik / pekerja-jasa.js di repositori dan di bagian const «FILES_TO_CACHE = (
); » termasuk nilainya «Offline.html». Seharusnya terlihat seperti pada gambar:

Sekarang hal selanjutnya yang harus kita lakukan adalah menambahkan baris kode ini ke acara tersebut «Pasang» untuk memberitahu pekerja layanan yang menambal offline web progresif:

evt.waitUntil(     caches.open(CACHE_NAME).then((cache) => {       console.log('(ServiceWorker) Pre-caching offline page');       return cache.addAll(FILES_TO_CACHE);     }) );

Sejauh ini kita sudah setengah jalan. Hal berikutnya adalah membuat pekerja layanan kami membersihkan cache sehingga tidak ada data lama di dalamnya. Itu sebabnya kita harus menambahkan kode ini di folder public / service-worker.js:

// CODELAB: Remove previous cached data from disk. evt.waitUntil(     caches.keys().then((keyList) => {       return Promise.all(keyList.map((key) => {         if (key !== CACHE_NAME) {           console.log('(ServiceWorker) Removing old cache', key);           return caches.delete(key);         }       }));     }) );

Akhirnya, kita akan menambahkan baris kode lain untuk membuat permintaan jaringan pekerja layanan lebih efektif dan jika terjadi kegagalan, mari kita dialihkan ke halaman offline yang kami sebutkan di atas. Yang harus Anda lakukan adalah menambahkan yang berikut ini di folder public / service-worker.js:

// CODELAB: Remove previous cached data from disk. evt.waitUntil(     caches.keys().then((keyList) => {       return Promise.all(keyList.map((key) => {         if (key !== CACHE_NAME) {           console.log('(ServiceWorker) Removing old cache', key);           return caches.delete(key);         }       }));     }) );

Dengan ini, kami akan membuat alat yang menyediakan pengalaman offline yang cukup mendasar, tetapi yang secara sempurna memenuhi persyaratan aplikasi progresif. Namun, Ini hanyalah awal dari segalanya, masih ada hal-hal yang harus disangga.

Tawarkan pengalaman offline lengkap

Untuk lebih memahami hal ini, sangat penting bagi Anda untuk menyelidiki siklus hidup pekerja layanan, karena langkah-langkah ini sangat terkait dengan itu.

Hal pertama yang akan kita lakukan adalah mengubah logika aplikasi, apa yang dilakukan sehingga dapat membuat permintaan asinkron berfungsi dengan benar. Permintaan ini adalah satu ke jaringan dan satu ke cache. Untuk melakukan ini, Anda harus pergi ke rute publik / skrip / aplikasi dan memodifikasi Baris kode berikut:

// CODELAB: Add code to get weather forecast from the caches object. if (!('caches' in window)) {   return null; } const url = `${window.location.origin}/forecast/${coords}`; return caches.match(url)     .then((response) => {       if (response) {         return response.json();       }       return null;     })     .catch((err) => {       console.error('Error getting data from cache', err);       return null;     });

Sekarang hal selanjutnya adalah memodifikasi elemen Updatedata, yang lebih rendah dari yang sebelumnya. Untuk itu Kami memodifikasi kode sebagai berikut:

// CODELAB: Add code to call getForecastFromCache. getForecastFromCache(location.geo)     .then((forecast) => {       renderForecast(card, forecast);     });

Dengan ini, kami telah memecahkan masalah permintaan asinkron yang harus Anda buat, sejauh ini sudah dapat memberikan pengalaman offline yang kurang lebih lengkap. Tetapi masih tidak mampu berfungsi 100% tanpa koneksi internet.

Untuk melakukan ini, kita harus terlebih dahulu melakukan cache sumber daya aplikasi, yang dilakukan dengan menambahkan a Data_Cache_NAME dalam folder pekerja publik / layanan. Kami melakukannya dengan kode berikut:

// CODELAB: Update cache names any time any of the cached files change. const CACHE_NAME = 'static-cache-v2'; const DATA_CACHE_NAME = 'data-cache-v1';

Sekarang, hal berikutnya adalah memperbarui File_TO_CACHE di folder pekerja layanan yang sama, jadi kami menambahkan daftar file lengkap. Ini dilakukan dengan kode berikut:

// CODELAB: Add list of files to cache here. const FILES_TO_CACHE = (   '/',   '/index.html',   '/scripts/app.js',   "http://internetpasoapaso.com/scripts/install.js",   '/scripts/luxon-1.11.4.js',   '/styles/inline.css',   '/images/add.svg',   '/images/clear-day.svg',   '/images/clear-night.svg',   '/images/cloudy.svg',   '/images/fog.svg',   '/images/hail.svg',   '/images/install.svg',   '/images/partly-cloudy-day.svg',   '/images/partly-cloudy-night.svg',   '/images/rain.svg',   '/images/refresh.svg',   '/images/sleet.svg',   '/images/snow.svg',   '/images/thunderstorm.svg',   '/images/tornado.svg',   '/images/wind.svg', );

Yang harus kita ingat dengan hal ini adalah kita harus terus memperbarui Cache_NAME ketika kita menambahkan file baru. Kami telah menghapus offline.html karena pada saat ini situs web kami tidak memerlukannya karena sekarang ia memiliki semua sumber daya yang diperlukan untuk bekerja offline dan tidak menampilkan laman «Tidak ada koneksi».

Untuk memastikan acara kami «Aktifkan» jangan hapus jenis file apa pun, kita harus mengubah nilainya «Jika (kunci! == CACHE_NAME) {« oleh «Jika (kunci! == CACHE_NAME && kunci! == DATA_CACHE_NAME) {«. Dalam folder Service-worker.js kami.

Langkah selanjutnya dalam pemrograman kami adalah pastikan aplikasi menyimpan prakiraan cuaca sehingga Anda dapat mengaksesnya dengan lebih mudah di masa mendatang. Untuk ini, Anda harus tambahkan berikut ini di file service-worker.js:

// CODELAB: Add fetch event handler here. if (evt.request.url.includes('/forecast/')) {   console.log('(Service Worker) Fetch (data)', evt.request.url);   evt.respondWith(       caches.open(DATA_CACHE_NAME).then((cache) => {         return fetch(evt.request)             .then((response) => {               // If the response was good, clone it and store it in the cache.               if (response.status === 200) {                 cache.put(evt.request.url, response.clone());               }               return response;             }).catch((err) => {               // Network request failed, try to get it from the cache.               return cache.match(evt.request);             });       }));   return; } evt.respondWith(     caches.open(CACHE_NAME).then((cache) => {       return cache.match(evt.request)           .then((response) => {             return response || fetch(evt.request);           });     }) );

Setelah melakukan semua ini, kita akan memilikinya aplikasi progresif yang menawarkan pengalaman lengkap tanpa koneksi internet yang bisa kita gunakan dari browser apa pun. Kami telah hampir semua pekerjaan dilakukan, tetapi masih ada satu detail terakhir untuk menopang:

Jadikan aplikasi dapat diinstal

Untuk menyelesaikan panduan kami, yang harus kami lakukan hanyalah aplikasi kami dapat diinstal di browser, sesuatu yang meskipun tampaknya sulit adalah hal termudah untuk dilakukan dalam seluruh proses yang telah kami ajarkan kepada Anda sejauh ini.

Hal pertama yang akan kita lakukan adalah menambahkan file install.js untuk kita index.html, apa Ini dicapai dengan menyalin kode ini ke file:

Sekarang kita harus pergi ke acara install.js dan tulis baris kode berikut Untuk melanjutkan proses membuat aplikasi kami dapat diinstal:

// CODELAB: Add event listener for beforeinstallprompt event window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

Kemudian untuk menunjukkan tombol instal, yang merupakan dasar dalam semua ini, kita harus terus memodifikasi install.js dengan kode berikut:

// CODELAB: Add code to save event & show the install button. deferredInstallPrompt = evt; installButton.removeAttribute('hidden');

Sekarang saatnya untuk menjadwalkan untuk menunjukkan cepat dan sembunyikan tombol instalasi karena ini hanya dapat dilakukan sekali. Jadi, berikut dalam file install.js kami tambahkan yang berikut:

// CODELAB: Add code show install prompt & hide the install button. deferredInstallPrompt.prompt(); // Hide the install button, it can't be called twice. evt.srcElement.setAttribute('hidden', true);

Siap, sekarang aplikasi progresif yang kami buat sepenuhnya dapat diinstal dan Anda telah mempelajari hubungannya dengan internetpasoapaso.com bahwa kami selalu mengajari Anda semua yang perlu Anda ketahui tentang internet dan komputasi. Kami harap Anda menemukan informasi ini sangat berguna.

Jika Anda memiliki pertanyaan, tinggalkan di komentar, kami akan menjawab Anda sesegera mungkin, dan itu pasti akan sangat membantu bagi lebih banyak anggota komunitas. Terima kasih! ????