Postingan

Menampilkan postingan dengan label pwa

Cara Menjalankan Aplikasi PWA

Gambar
PWA harus berjalan di atas protokol https untuk menjamin keamanan transaksi data antara client dan server.  Namun untuk kebutuhan pengembangan, kita dapat menggunakan protocol http dengan web server apapun yang dapat kita install di komputer lokal kita seperti XAMPP, WAMP, atau yang lainnya.  Apabila kita hanya membuka file HTML-nya secara langsung (menggunakan protocol file://) maka service worker tidak akan bekerja. Beruntung Chrome memiliki sebuah  extensions  bernama  Web Server for Chrome  sebagai web server mini untuk kebutuhan pengembangan PWA. Kamu dapat mengunduh dan menginstall aplikasi Web Server for Chrome pada tautan ini:  Web Server for Chrome . Klik tombol Add to Chrome untuk mengunduh aplikasi tersebut. Setelah terpasang, buka alamat  chrome://apps  dan klik pada ikon  Web Server . Kamu akan melihat jendela aplikasi untuk mengatur konfigurasi dan memulai server. Untuk menjalankan aplikasi web kita, klik tombol CHOOSE FOLD...
Posting Komentar
Read more »

Cara Membuat Progressive Web App Pertama

Gambar
Pada codelab sebelumnya kita telah membuat SPA sederhana menggunakan framework Materialize CSS dan juga beberapa kode JavaScript untuk membuat pergantian konten halaman. Namun belum sempurna bila dikatakan kita telah menggunakan app shell pada SPA kita. Karena meskipun halaman sudah tidak memuat ulang saat berpindah halaman sebagaimana website multi halaman, tetapi app shell masih tidak tampil pada kondisi perangkat offline atau tanpa koneksi. Dengan kata lain app shell kita belum berlaku seperti aplikasi native yang tetap menampilkan komponen UI meskipun dalam kondisi offline. Untuk dapat melakukan hal tersebut, kita membutuhkan dua teknologi web browser yaitu Service Worker dan Cache. Registrasi Service Worker Service Worker adalah skrip yang dijalankan oleh browser di latar belakang, yang terpisah dengan skrip lain di halaman web browser. Service worker ditulis menggunakan bahasa pemrograman JavaScript, namun dipanggil dengan cara yang berbeda dari kode JavaScript pada umumnya. Dala...
Posting Komentar
Read more »

Codelab: Membuat SPA Sederhana

Gambar
Kita  akan membuat sebuah aplikasi web progresif berisi halaman-halaman yang dapat diakses secara statis. Kita akan menyiapkan terlebih dahulu aplikasi web standar yang menampilkan konten halaman berbasis AJAX, dikenal juga dengan istilah   single page application   atau SPA. Menyiapkan Aset Pertama-tama unduh terlebih dahulu framework Materialize CSS yang akan kita pakai untuk mempermudah pembuatan app shell  di sini . Ekstrak berkas yang telah diunduh ke dalam folder first-pwa/. Struktur berkas dari aplikasi kita harus seperti ini: first - pwa / ├── css / │   ├── materialize . css │   └── materialize . min . css ├── js / │   ├── materialize . js │   └── materialize . min . js ├── LICENSE ├── README . md Selanjutnya, buat sebuah berkas pada folder project dengan nama  index.html  untuk menyimpan template app shell: <!DOCTYPE html> <html lang = "en" > <head>   <meta charset = "UTF-8" />   ...
Posting Komentar
Read more »