{"id":7799,"date":"2020-08-24T15:45:56","date_gmt":"2020-08-24T08:45:56","guid":{"rendered":"http:\/\/crocodic.com\/?p=7799"},"modified":"2021-10-05T10:17:54","modified_gmt":"2021-10-05T03:17:54","slug":"progressive-web-apps-mulai-darimana","status":"publish","type":"post","link":"https:\/\/crocodic.com\/id\/progressive-web-apps-mulai-darimana\/","title":{"rendered":"Progressive Web Apps, mulai dari mana ?"},"content":{"rendered":"<p>Berbicara tentang Progressive Web Apps (PWA), kebanyakan orang mengatakan\u00a0untuk bisa memiliki Applikasi PWA, <a href=\"https:\/\/crocodic.com\/id\/8-alasan-mengapa-perawatan-maintenance-website-mutlak-dilakukan-secara-profesional\/\">website<\/a> kita harus mempunyai SPA atau Single Page Application, atau harus menggunakan <a href=\"https:\/\/crocodic.com\/id\/data-science-framework-definisi-manfaat-dan-jenisnya\/\">framework<\/a> modern seperti reactJS, Angular, Polymer dan yang lainnya. Sehingga banyak <a rel=\"noreferrer noopener\" href=\"https:\/\/crocodic.com\/id\/memilih-software-house-jakarta-yang-profesional-dan-terpercaya-di-tahun-2021\/\" data-type=\"URL\" data-id=\"https:\/\/crocodic.com\/memilih-software-house-jakarta-yang-profesional-dan-terpercaya-di-tahun-2021\/\" target=\"_blank\">Software house<\/a> yang merasa bahwa mereka tidak bisa menerapkan PWA karena masih menggunakan PHP dan Ruby Framework (Service Rendered Framework).\u00a0 Padahal berbicara tentang PWA, tentu yang utama adalah progressive atau peningkatan pengalaman user secara bertahap. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Nah pertanyaannya, dari mana sebenarnya kita mulai untuk membuat sebuah Progessive Web Apps?<\/p><\/blockquote>\n\n\n\n<p>Untuk memulai membuat <a href=\"https:\/\/crocodic.com\/id\/5-kesalahan-yang-sering-dilakukan-developer-mobile-apps\/\">Aplikasi<\/a> PWA yang harus perhatikan :<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Keamanan HTTPS <\/strong><\/h2>\n\n\n\n<p>Keamanan HTTPS disini adalah pondasi dasar untuk membuat aplikasi PWA. Keamanan di web menjadi prioritas penting, dikarenakan banyak isu tentang <em>content hijacking<\/em>, <em>phising<\/em> dan isu- isu lainnya. Dan juga kebanyakan fungsi dari PWA hanya dapat dijalankan di HTTPS saja.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"370\" height=\"204\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image.png\" alt=\"\" class=\"wp-image-7800\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image.png 370w, https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-300x165.png 300w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/><\/figure><\/div>\n\n\n\n<p><strong><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tingkatkan kecepatan Loading dan Respon<\/strong><\/h2>\n\n\n\n<p>Kecepatan loading dan respon adalah bagian penting untuk mengoptimasikan PWA. Yang dimana tanpa kecepatan maka rata-rata pengguna akan menginggalkan. <strong>Bahkan <a href=\"https:\/\/crocodic.com\/id\/kegagalan-85-proyek-ai-dimulai-dari-sini-kualitas-data-yang-diabaikan\/\">data<\/a> yang ada menyebutkan 3 detik website tidak tampil, 53% pengguna akan pergi.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"367\" height=\"184\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-1.png\" alt=\"\" class=\"wp-image-7803\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-1.png 367w, https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-1-300x150.png 300w\" sizes=\"(max-width: 367px) 100vw, 367px\" \/><figcaption><a href=\"https:\/\/www.doubleclickbygoogle.com\/articles\/mobile-speed-matters\/\">https:\/\/www.doubleclickbygoogle.com\/articles\/mobile-speed-matters\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p><strong><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Memasang dan memanfaatkan Service Worker<\/strong><\/h2>\n\n\n\n<p>Apa itu <em>Service worker<\/em>? Service worker adalah komponen yang merupakan deprogram dan berada di antara <em>browser<\/em> dan web server. Dengan memasang service worker maka kita dapat melakukan <em>cache<\/em> pada <em>resource<\/em> yang dibutuhkan dan dengan <em>service worker<\/em> memungkinkan aplikasi tetap bisa diakses walaupun dengan internet tidak stabil serta <em>offline<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"500\" height=\"278\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-2.png\" alt=\"\" class=\"wp-image-7804\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-2.png 500w, https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-2-300x167.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Demikian adalah hal-hal yang harus diperhatikan untuk memulai membuat <em>Progressive Web Apps<\/em>. Disini saya juga membagikan link berisi pembelajaran tentang <strong>PWA<\/strong> yang saya dapatkan pada saat event Workshop PWA yang diadakan di Jogja.<br><a href=\"https:\/\/drive.google.com\/drive\/u\/0\/folders\/0B55wxScz_BJtV1lGbTBOYlhLTVk\">https:\/\/drive.google.com\/drive\/u\/0\/folders\/0B55wxScz_BJtV1lGbTBOYlhLTVk<\/a><br><\/p>\n\n\n\n<p><a href=\"https:\/\/crocodic.com\/id\/5-developer-mobile-app-terbaik-di-indonesia-tahun-2024\/\">Crocodic<\/a> menyediakan Jasa Pembuatan Website <em>custom<\/em> baik untuk kebutuhan company profile, atau sebagai pengganti <a href=\"https:\/\/crocodic.com\/id\/flutter-vs-react-native-mana-yang-lebih-cocok-untuk-proyekmu\/\">mobile apps<\/a>. Kontak kami <a href=\"https:\/\/crocodic.com\/id\/form-pemesanan-pengembangan-aplikasi-mobile-dan-web\/\" data-type=\"URL\" data-id=\"https:\/\/crocodic.com\/form-pemesanan-pengembangan-aplikasi-mobile-dan-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">disini<\/a>, kami akan membantu menemukan solusi yang tepat untuk bisnis anda.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"276\" src=\"http:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-3.png\" alt=\"\" class=\"wp-image-7805\" srcset=\"https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-3.png 491w, https:\/\/crocodic.com\/wp-content\/uploads\/2018\/09\/image-3-300x169.png 300w\" sizes=\"(max-width: 491px) 100vw, 491px\" \/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Berbicara tentang Progressive Web Apps (PWA), kebanyakan orang mengatakan\u00a0untuk bisa memiliki Applikasi PWA, website kita harus mempunyai SPA atau Single Page Application, atau harus menggunakan framework modern seperti reactJS, Angular, Polymer dan yang lainnya. Sehingga banyak Software house yang merasa bahwa mereka tidak bisa menerapkan PWA karena masih menggunakan PHP dan Ruby Framework (Service Rendered [&hellip;]<\/p>\n","protected":false},"author":30,"featured_media":8919,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[355],"tags":[344,346,233,96],"class_list":["post-7799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocodic-dec","tag-mobile-apps-developer","tag-progressive-web-apps","tag-web-development","tag-website"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=7799"}],"version-history":[{"count":5,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7799\/revisions"}],"predecessor-version":[{"id":9591,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7799\/revisions\/9591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/8919"}],"wp:attachment":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=7799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=7799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=7799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}