Progresif Web Aplikasi adalah aplikasi berbasis web yang memanfaatkan fitur peramban modern dan dapat ditambahkan ke layar beranda seperti aplikasi asli.

Hal Penting Tentang Aplikasi Web Progresif

Dalam tutorial ini, javascriptoo akan menunjukkan kepada Anda semua pengetahuan yang Anda butuhkan tentang PWA selangkah demi selangkah melalui contoh praktis dan aplikasi demo. Untuk memulai dari awal, kami akan menggunakan aplikasi selfie kami yang baru dibuat dan menerapkannya secara bertahap.

Apa Itu Aplikasi Web Progresif ?

Inti dari aplikasi web progresif tidak berbeda dari situs web biasa-itu terdiri dari HTML, CSS dan JavaScript dan ada di browser. Yang membedakan PWA dari situs web biasa adalah daftar 10 konsep utama yang perlu diterapkan. Ini diperoleh langsung dari situs web Pengembang Google.

  • Safe – Menyediakan layanan melalui HTTPS untuk mencegah pemantauan dan memastikan bahwa konten tidak dirusak.
  • Progressive – Setiap pengguna dapat menggunakannya apa pun pilihannya browsernya, karena dibangun peningkatan progresif sebagai tujuan inti mereka.
  • Responsive – cocok untuk faktor bentuk apa pun: desktop, perangkat seluler, tablet, atau berikutnya.
  • Connectivity-independent – Perangkat tambahan independen dari staf layanan konektivitas memungkinkan untuk bekerja secara offline atau pada kualitas jaringan rendah.
  • App-like – Mirip dengan aplikasi-membuat pengguna merasa seperti aplikasi melalui interaksi dan juga navigasi bergaya aplikasi, karena mereka dibangun di atas model shell aplikasi.
  • Fresh – karena proses update staf layanan, selalu up to date.
  • Discoverable – karena daftar W3C dan cakupan pendaftaran personel layanan yang menggunakan mesin pencari untuk menemukannya, mereka dapat diidentifikasi sebagai “aplikasi”.
  • Re-engageable – Sangat mudah untuk berpartisipasi kembali melalui fitur-fitur seperti pemberitahuan push.
  • Installable – yang memungkinkan para pengguna untuk “menyimpan” aplikasi yang menurut mereka paling berguna di layar utama tanpa harus merepotkan toko aplikasi.
  • Linkable – Dapat ditautkan dengan mudah melalui URL tanpa pemasangan yang rumit.

Mengikuti panduan ini akan memastikan bahwa aplikasi Anda tidak hanya akan berfungsi dengan baik saat dilihat di browser, tetapi juga saat diluncurkan secara terpisah melalui pintasan layar utama. Anda mungkin menemukan bahwa pemilihan kata yang dibuat oleh Google membingungkan, tetapi jangan khawatir, kami akan menjelaskan aturan ini satu per satu nanti dalam tutorial ini.

Apa Yang Bukan Aplikasi Web Progresif ?

Konsep PWA tidak sama dengan yang berikut :

  • Cordova based hybrid apps
  • React Native
  • NativeScript
  • Electron and NW.js

Semua teknologi di atas mengemas aplikasi HTML dan memaketkannya menjadi file yang dapat dijalankan (yang dapat berupa .apk, .exe atau file lainnya), yang kemudian harus diunduh dari toko aplikasi yang sesuai dan diinstal pada perangkat pengguna.

1. Safe

1. Safe

Sebagian besar aplikasi web progresif digunakan dengan API asli dan pekerja layanan. Teknologi ini menangani data sensitif dan memerlukan penanganan yang cermat. Inilah sebabnya mengapa setiap PWA harus terhubung melalui HTTPS untuk layanan.

Baca Juga : 17 Tips Untuk Menulis CSS Modern

Jika Anda tidak memiliki akses ke server menggunakan sertifikat SSL, cara termudah untuk menjalankan proyek di lingkungan yang aman adalah melalui Halaman GitHub atau layanan serupa. Repositori GitHub apa pun dapat dihosting secara langsung melalui HTTPS, dan Halaman GitHub serta GitHub gratis dan dapat digunakan di repositori publik.

Kami memilih untuk menyelenggarakan demo kami di sini: https://tutorialzine.github.io/pwa-photobooth/.

Untuk pengujian sederhana di server lokal, Anda juga dapat mencoba Ngrok. Ini adalah alat kecil yang memungkinkan Anda untuk menyalurkan localhost yang sedang berjalan ke URL publik yang aman. Ngrok gratis dan tersedia untuk Windows, Mac dan Linux.

2. Progressive

Pada dasarnya, ini berarti PWA harus menggunakan teknologi web yang didukung secara luas dan bekerja sama baiknya di sebanyak mungkin browser. Seperti yang kita semua tahu, ini hampir tidak mungkin di bidang pengembangan Web, tetapi kita masih dapat melakukan sesuatu untuk mencakup basis pengguna yang lebih besar.

Misalnya, dalam aplikasi PhotoBooth kami, kami menggunakan API getUserMedia () untuk mengakses kamera perangkat keras pada perangkat. Dukungannya di berbagai browser sangat tidak konsisten-Safari tidak mendukungnya sama sekali, browser yang mendukungnya memerlukan prefiks dan memiliki penggunaan yang berbeda.

Untuk memastikan bahwa lebih banyak orang benar-benar dapat menggunakan aplikasi kami, kami mencakup semua awalan :

navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
);

Jika tidak ada awalan yang berfungsi, kami juga akan menampilkan kesalahan :

if (!navigator.getMedia) {
    displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
    // Use Camera API
}

Materi iklan cadangan dan polyfill harus disediakan jika memungkinkan. Kode CSS dan HTML menggunakan prinsip yang sama.

3. Responsive

Terlepas dari ukuran layarnya, aplikasi akan terlihat bagus di semua perangkat. Aplikasi kami memiliki antarmuka pengguna yang sangat sederhana, jadi kami hanya menggunakan dua kueri media untuk mengontrol ukuran font, padding, margin, dll.

Jangan takut untuk menggunakan pustaka CSS dan kerangka kerja seperti Bootstrap, karena sangat mudah untuk membentuk kisi, menangani tipografi, dan daya tanggap umum.

4. Connectivity independent

Ini penting. Gunakan personel layanan, meskipun tidak tersedia koneksi Internet, Anda dapat membuat aplikasi Anda berjalan normal.

Beberapa aplikasi hanya dapat di-cache sebagian: Cache UI dan dapat digunakan secara offline, konten dinamis masih perlu mengakses server.

Lainnya, seperti demo PhotoBooth kami, semuanya dapat di-cache. Semua kode sumber dan sumber daya akan disimpan secara lokal, dan aplikasi akan berjalan secara offline dan online dengan cara yang persis sama. Ini adalah kode yang membuat keajaiban terjadi:

Pertama, kita perlu membuat file JavaScript Service Worker dan menentukan logika di baliknya.

sw.js

// Install the service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // The cache will fail if any of these resources can't be saved.
            return cache.addAll([
                // Path is relative to the origin, not the app directory.
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('Success! App is available offline!');
            })
        })
    );
});

// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // Try the cache.
        caches.match(event.request)
        .then(function(response) {
            // Fallback to network if resource not stored in cache.
            return response || fetch(event.request);
        })
    );
});

Kemudian, kita perlu menautkan pekerja layanan ke HTML Anda.

index.html

<script>
// Register Service Worker.

if ('serviceWorker' in navigator) {
    // Path is relative to the origin, not project root.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}
</script>

Sekarang, semua file dalam proyek kami akan disimpan di browser pengguna. Variabel dan objek JavaScript juga harus disimpan di localStorage atau IndexDB sebanyak mungkin.

5. App-like

5_applike

Saat membuat PWA, disarankan untuk mengikuti konsep desain yang disebut arsitektur shell aplikasi. Kedengarannya rumit, tetapi intinya adalah: aplikasi dibagi menjadi dua komponen utama: shell dan konten.

Baca Juga : 13 Script PHP URL Shortener Terbaik

Shell berisi semua elemen UI statis, seperti judul, menu, laci, dll. Saat menyimpan aplikasi ke cache, Anda harus selalu menyimpan shell di perangkat, karena kami ingin shell selalu tersedia. Dengan cara ini, ketika pengguna tanpa koneksi internet membuka aplikasi, mereka tidak akan melihat layar kosong atau dinosaurus yang sedang berjalan – mereka akan melihat antarmuka aplikasi yang di-cache dan pesan kesalahan yang sesuai.

Konten ada di dalam cangkang. Itu juga dapat di-cache, tetapi tidak perlu melakukannya karena konten biasanya dinamis, sering berubah, dan dapat berbeda setiap kali satu halaman dimuat.

6. Fresh

6. Fresh

Setelah caching, PWA kami akan selalu dimuat dari penyimpanan lokal. Namun, jika kita mengubah pekerja layanan sw.js dengan cara apa pun, versi baru akan diunduh dan dipasang saat laman berikutnya dimuat.

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
});

Dengan menggunakan pembaruan agen, kita bisa mengunduh ulang, menghapus cache lama atau dengan sepenuhnya mengubah logika agen. Anda dapat mempelajari lebih lanjut tentang pembaruan perangkat lunak dalam artikel Pengembang Google ini di sini.

7. Discoverable

7_discoverable_

Dengan menambahkan Manifes Web ke aplikasi kami, kami dapat memberikan berbagai informasi tentangnya dan mengubah cara tampilannya di perangkat orang. Ini memungkinkan menyimpan aplikasi ke layar beranda menggunakan ikon khusus, meluncurkan di jendela browser terpisah, dan banyak hal keren lainnya.

Manifes web berbentuk file JSON sederhana:

manifest.json

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

Sebagian besar atribut sudah cukup jelas, jadi kami hanya akan membahas atribut yang lebih penting. Untuk melihat format daftar web lengkap dan semua bidang yang tersedia, buka di sini.

  • Shortname – Ini adalah nama aplikasi kami saat menyimpan ke layar beranda.
  • cons – Array ikon dengan resolusi berbeda.
  • Display – Tentukan cara membuka aplikasi. Kami memilih mode mandiri, sehingga stan foto kami akan ditampilkan dalam jendela layar penuh saat dimulai, tanpa navigasi atau menu browser apa pun. Dalam multitasking, ini juga akan diperlakukan sebagai aplikasi terpisah.

Untuk mendaftarkan daftar, kita harus menautkannya ke HTML kita :

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari belum mendukung standar Manifes Web, tetapi kita dapat menggunakan tag meta khusus Apple ini untuk menentukan perilaku aplikasi yang serupa:

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

8. Re-engageable

Pemberitahuan push tidak lagi terbatas pada aplikasi asli. Berkat staf layanan dan Push API, aplikasi web juga dapat mengirim pesan ke bilah notifikasi Android. Tidak semua aplikasi akan mendapatkan keuntungan dari fitur dengan fitur ini, tetapi jika digunakan dengan benar, pemberitahuan memang dapat membantu menarik pengguna.

Baca Juga : 10 Template Website Responsive Dan Gratis

Topik ini berada di luar cakupan tutorial ini, karena “pemberitahuan push” sangat kompleks dan harus dipelajari sebagai keseluruhan pelajaran secara terpisah. Jika Anda masih ingin menerapkan pemberitahuan untuk aplikasi web Anda, lihat beberapa sumber belajar terbaik di bawah ini:

  • Pengembang Google, pemberitahuan push: tepat waktu, relevan, dan tepat.
  • Pengembang Google, pemberitahuan push.
  • MDN, gunakan Push API.
  • Push.js, perpustakaan yang menyediakan API yang lebih bersih untuk menangani pemberitahuan push.

Sekarang PWA kita sudah selesai. Kami dapat menggunakan alat Google resmi yang disebut Lighthouse untuk menguji kepatuhannya dengan aturan PWA. Ini akan membuat ulang skenario yang mungkin dan menguji aplikasi secara menyeluruh. Inilah yang dikatakannya tentang PhotoBooth :