Progressive Web App Pertama Anda

Terakhir Diperbarui: 30-04-2019

Apa yang membuat aplikasi web, Progressive Web App?

Progressive Web Apps memberikan pengalaman seperti aplikasi yang dapat diinstal di desktop dan perangkat seluler yang dibuat dan dikirim langsung melalui web. Ini adalah aplikasi web yang cepat dan andal. Dan yang paling penting, aplikasi tersebut adalah aplikasi web yang berfungsi di browser apa pun. Jika Anda membuat aplikasi web sekarang, Anda sudah berada di jalur untuk mengembangkan Progressive Web App.

Cepat & Andal

Setiap pengalaman web harus cepat, dan ini terutama berlaku untuk Progressive Web App. Cepat mengacu pada waktu yang diperlukan untuk menampilkan konten yang bermakna di layar dan untuk memberikan pengalaman interaktif.

Proses ini juga harus dapat diandalkan dengan cepat. Sulit untuk menekankan cukup jauh seberapa baik performa yang dapat diandalkan. Pikirkan seperti ini: pemuatan pertama aplikasi native sangat menjengkelkan. Ini dibatasi oleh app store dan hasil download yang besar, tetapi setelah Anda mencapai titik penginstalan aplikasi, biaya di muka akan diamortisasi di semua aplikasi yang dimulai, dan tidak ada yang mengalami keterlambatan variabel. Setiap proses mulai aplikasi secepat yang terakhir, tanpa varian. Progressive Web App harus memberikan performa andal ini yang diharapkan pengguna dari semua pengalaman terinstal.

Dapat diinstal

Progressive Web Apps dapat berjalan di tab browser, tetapi juga dapat diinstal. Memberi bookmark pada situs hanya menambahkan pintasan, tetapi Progressive Web App (PWA) yang terinstal akan terlihat dan berperilaku seperti semua aplikasi lain yang terinstal. Luncurkan aplikasi dari tempat yang sama dengan peluncuran aplikasi lainnya. Anda dapat mengontrol pengalaman peluncuran, termasuk layar pembuka yang disesuaikan, ikon, dan banyak lagi. Fitur ini berjalan sebagai aplikasi, di jendela aplikasi tanpa kolom URL atau UI browser lainnya. Seperti semua aplikasi terinstal lainnya, ini adalah aplikasi tingkat teratas di pengalih tugas.

Ingat, PWA yang dapat diinstal harus cepat dan andal. Pengguna yang menginstal PWA mengharapkan aplikasi mereka berfungsi, apa pun jenis koneksi jaringan yang mereka gunakan. Ini adalah ekspektasi dasar yang harus dipenuhi oleh setiap aplikasi terinstal.

Seluler &Desktop

Menggunakan teknik desain responsif, PWA bekerja pada perangkat seluler dan desktop, menggunakan satu code base antar-platform. Jika Anda mempertimbangkan untuk menulis aplikasi asli, lihatlah manfaat yang ditawarkan PWA.

Yang akan Anda build

Dalam codelab ini, Anda akan membuat aplikasi web cuaca menggunakan teknik PWA. Aplikasi Anda akan:

  • Gunakan desain yang responsif agar berfungsi di desktop atau seluler.
  • Jadilah cepat, gunakan pekerja layanan untuk melakukan pra-cache resource aplikasi (HTML, CSS, JavaScript, gambar) yang diperlukan untuk menjalankan dan meng-cache data cuaca saat runtime untuk meningkatkan performa.
  • Dapat diinstal, menggunakan manifes aplikasi web dan peristiwa beforeinstallprompt untuk memberi tahu pengguna bahwa aplikasi dapat diinstal.

Yang akan Anda pelajari

  • Cara membuat dan menambahkan manifes aplikasi web
  • Cara memberikan pengalaman offline sederhana
  • Cara memberikan pengalaman offline lengkap
  • Cara membuat aplikasi dapat diinstal

Codelab ini berfokus pada Progressive Web App. Konsep dan blok kode yang tidak-relevan akan dipoles dan disediakan sehingga Anda cukup salin dan tempel.

Yang Anda butuhkan

  • Chrome versi terbaru (74 atau yang lebih baru). PWA bekerja di semua browser, tetapi kami akan menggunakan beberapa fitur Chrome DevTools untuk lebih memahami apa yang terjadi di level browser, dan menggunakannya untuk menguji pengalaman penginstalan.
  • Pengetahuan tentang HTML, CSS, JavaScript, dan Chrome DevTools.

Mendapatkan kunci untuk Dark Sky API

Data cuaca kami berasal dari Dark Sky API. Untuk menggunakannya, Anda harus meminta kunci API. Ini mudah digunakan, dan gratis untuk project non-komersial.

Mendaftar untuk Kunci API

Memastikan kunci API berfungsi dengan benar

Untuk menguji apakah Kunci API berfungsi dengan benar, buat permintaan HTTP ke DarkSky API. Perbarui URL di bawah untuk mengganti DARKSKY_API_KEY dengan Kunci API Anda. Jika semuanya berfungsi, Anda akan melihat perkiraan cuaca terbaru untuk Bandung.

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

Mendapatkan kode

Kami telah memasukkan semua yang Anda perlukan untuk project ini ke dalam repo Git. Untuk memulai, Anda harus mengambil kode tersebut dan membukanya di lingkungan pengembangan favorit Anda. Untuk codelab ini, sebaiknya gunakan Glitch.

Sangat Direkomendasikan: Gunakan Glitch untuk mengimpor repo

Menggunakan Glitch adalah metode yang direkomendasikan untuk menangani codelab ini.

  1. Buka tab browser baru dan buka https://glitch.com.
  2. Jika belum memiliki akun, Anda harus mendaftar.
  3. Klik New Project, lalu Clone from Git Repo.
  4. Clone https://github.com/googlecodelabs/your-first-pwapp.git, lalu klik OK.
  5. Setelah repo dimuat, edit file .env, dan perbarui dengan kunci DarkSky API Anda.
  6. Klik tombol Show, lalu pilih In a New Window untuk melihat cara kerja PWA.

Alternatif: Mendownload kode & bekerja secara lokal

Jika ingin mendownload kode dan bekerja secara lokal, Anda harus memiliki Node.js versi terbaru serta penyiapan editor kode dan siap digunakan.

Download kode sumber

  1. Mengekstrak file zip yang didownload.
  2. Jalankan npm install untuk menginstal dependensi yang diperlukan untuk menjalankan server.
  3. Edit server.js dan setel kunci API DarkSky Anda.
  4. Jalankan node server.js untuk memulai server di port 8000.
  5. Buka tab browser di http://localhost:8000

Apa yang menjadi titik awal?

Titik awal kita adalah aplikasi cuaca dasar yang dirancang untuk codelab ini. Kode telah disederhanakan untuk menunjukkan konsep dalam codelab ini, dan memiliki sedikit penanganan error. Jika Anda memilih untuk menggunakan kembali kode ini dalam aplikasi produksi, pastikan Anda menangani setiap error dan menguji semua kode sepenuhnya.

Beberapa hal yang bisa dicoba...

  1. Tambahkan kota baru dengan tombol + berwarna biru di sudut kanan bawah.
  2. Muat ulang data dengan tombol muat ulang di sudut kanan atas.
  3. Hapus kota menggunakan x di kanan atas tiap kartu kota.
  4. Dengan menggunakan toolbar perangkat di Chrome DevTools, lihat cara kerjanya di desktop dan seluler.
  5. Dengan menggunakan panel Jaringan di Chrome DevTools, lihat apa yang terjadi saat Anda offline.
  6. Dengan menggunakan panel Jaringan di Chrome DevTools, lihat apa yang terjadi saat jaringan dibatasi ke 3G lambat.
  7. Tambahkan penundaan ke server perkiraan dengan mengubah nilai untuk FORECAST_DELAY di server.js

Audit dengan Lighthouse

Lighthouse adalah alat yang mudah digunakan untuk membantu meningkatkan kualitas situs dan halaman Anda. Lighthouse menjalankan audit untuk mendapatkan performa, aksesibilitas, progressive web app, dan lainnya. Setiap audit memiliki dokumen referensi yang menjelaskan alasan pentingnya audit dan cara memperbaiki masalah.

Kami akan menggunakan Lighthouse untuk mengaudit aplikasi Cuaca kami, dan memverifikasi perubahan yang telah kami buat.

Mari kita jalankan Lighthouse

  1. Buka project Anda di tab baru.
  2. Buka Chrome DevTools dan beralih ke panel Audits. Biarkan semua jenis audit diaktifkan.
  3. Klik Jalankan audit. Setelah beberapa saat, Lighthouse memberikan laporan tentang halaman tersebut.

Audit Progressive Web App

Kita akan fokus pada hasil audit Progressive Web App.

Dan ada banyak hal penting yang harus diperhatikan:

  • ❗FAILED: Halaman saat ini tidak merespons dengan kode 200 saat offline.
  • ❗FAILED: start_url tidak merespons dengan kode 200 saat offline.
  • ❗FAILED: Tidak mendaftarkan pekerja layanan yang mengontrol halaman dan start_url.
  • ❗FAILED: Manifes aplikasi web tidak memenuhi persyaratan kemampuan penginstalan.
  • ❗FAILED: Tidak dikonfigurasi untuk layar pembuka kustom.
  • ❗FAILED: Tidak menetapkan warna tema kolom URL.

Mari kita mulai dan perbaiki beberapa masalah ini.

Pada akhir bagian ini, aplikasi cuaca kami akan lulus audit berikut:

  • Manifes aplikasi web tidak memenuhi persyaratan kemampuan penginstalan.
  • Tidak dikonfigurasi untuk layar pembuka khusus.
  • Tidak menyetel warna tema kolom URL.

Membuat manifes aplikasi web

Manifes aplikasi web adalah file JSON sederhana yang memberi Anda, developer, kemampuan untuk mengontrol cara aplikasi ditampilkan kepada pengguna.

Dengan menggunakan manifes aplikasi web, aplikasi web Anda dapat:

  • Beri tahu browser bahwa Anda ingin aplikasi dibuka di jendela mandiri (display).
  • Tentukan halaman yang akan dibuka saat aplikasi pertama kali diluncurkan (start_url).
  • Tentukan seperti apa tampilan aplikasi di dok atau peluncur aplikasi (short_name, icons).
  • Buat layar pembuka (name, icons, colors).
  • Beri tahu browser untuk membuka jendela dalam mode lanskap atau potret (orientation).
  • Dan banyak lagi.

Buat file bernama public/manifest.json dalam project Anda. Salin dan tempel konten berikut:

public/manifest.json

{
  "name": "Weather",
  "short_name": "Weather",
  "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"
}

Manifes mendukung berbagai ikon, yang ditujukan untuk berbagai ukuran layar. Untuk codelab ini, kami telah menyertakan beberapa codelab lainnya untuk integrasi iOS.

Selanjutnya, kita harus memberi tahu browser tentang manifes kita dengan menambahkan <link rel="manifest"... ke setiap halaman di aplikasi. Tambahkan baris berikut ke elemen <head> di file index.html Anda.

public/index.html

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

Pengalihan DevTools

DevTools memberikan cara yang cepat dan mudah untuk memeriksa file manifest.json Anda. Buka panel Manifest di panel Application. Jika Anda telah menambahkan informasi manifes dengan benar, Anda akan dapat melihatnya diurai dan ditampilkan dalam format yang mudah dibaca manusia di panel ini.

Menambahkan ikon tag &amp. meta iOS

Safari di iOS tidak mendukung manifes aplikasi web (belum), jadi Anda harus menambahkan tag meta tradisional ke <head> dari file index.html Anda:

public/index.html

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

Bonus: Perbaikan Lighthouse yang mudah

Audit Lighthouse kami menyebutkan beberapa hal lain yang cukup mudah untuk diperbaiki, jadi mari kita tangani hal-hal tersebut saat kita berada di sini.

Menetapkan deskripsi meta

Pada audit SEO, Lighthouse mencatat "Dokumen tidak memiliki deskripsi meta." Deskripsi dapat ditampilkan di hasil Google Penelusuran. Deskripsi yang unik dan berkualitas tinggi dapat membuat hasil penelusuran Anda lebih relevan dengan pengguna penelusuran dan dapat meningkatkan traffic penelusuran.

Untuk menambahkan deskripsi, tambahkan tag meta berikut ke <head> dokumen Anda:

public/index.html

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

Menetapkan warna tema kolom URL

Dalam audit PWA, Lighthouse mencatat aplikasi kami "Tidak menetapkan warna tema kolom URL". Memberi tema kolom URL browser agar sesuai dengan warna merek Anda sehingga memberikan pengalaman pengguna yang lebih imersif.

Untuk menetapkan warna tema di seluler, tambahkan tag meta berikut ke <head> dokumen Anda:

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Memverifikasi perubahan dengan Lighthouse

Jalankan Lighthouse lagi (dengan mengklik tanda + di sudut kiri atas panel Audit) dan verifikasi perubahan Anda.

Audit SEO

  • ✅ BERHASIL: Dokumen memiliki deskripsi meta.

Audit Progressive Web App

  • ❗FAILED: Halaman saat ini tidak merespons dengan kode 200 saat offline.
  • ❗FAILED: start_url tidak merespons dengan kode 200 saat offline.
  • ❗FAILED: Tidak mendaftarkan pekerja layanan yang mengontrol halaman dan start_url.
  • ✅ BERHASIL: Manifes aplikasi web memenuhi persyaratan kemampuan penginstalan.
  • ✅ BERHASIL: Dikonfigurasi untuk layar pembuka kustom.
  • ✅ BERHASIL: Menetapkan warna tema kolom URL.

Ada ekspektasi dari pengguna bahwa aplikasi yang diinstal akan selalu memiliki pengalaman dasar jika pengguna tersebut offline. Itulah mengapa penting untuk aplikasi web yang dapat dipasang agar tidak pernah menampilkan game dinosaurus offline Chrome. Pengalaman offline dapat berkisar dari halaman offline sederhana, hingga pengalaman hanya baca dengan data yang sebelumnya di-cache, hingga pengalaman offline yang berfungsi penuh yang secara otomatis disinkronkan saat koneksi jaringan dipulihkan.

Di bagian ini, kita akan menambahkan halaman offline sederhana ke aplikasi cuaca. Jika pengguna mencoba memuat aplikasi saat offline, halaman kustom kita akan ditampilkan, bukan halaman offline biasa yang ditampilkan browser. Pada akhir bagian ini, aplikasi cuaca kami akan lulus audit berikut:

  • Halaman saat ini tidak merespons dengan kode 200 saat offline.
  • start_url tidak merespons dengan kode 200 saat offline.
  • Tidak mendaftarkan pekerja layanan yang mengontrol halaman dan start_url.

Pada bagian berikutnya, kita akan mengganti halaman offline kustom dengan pengalaman offline lengkap. Hal ini akan meningkatkan kualitas pengalaman offline, namun yang lebih penting, hal ini akan meningkatkan performa kita secara signifikan, karena sebagian besar aset kita (HTML, CSS, dan JavaScript) akan disimpan dan ditayangkan secara lokal, sehingga jaringan kehilangan potensi bottleneck.

Pekerja untuk penyelamatan

Jika belum terbiasa dengan pekerja layanan, Anda bisa mendapatkan pemahaman dasar tentang apa yang dapat mereka lakukan, cara kerja siklus prosesnya, dan lainnya dengan membaca Pengantar tentang Pekerja Layanan.

Fitur yang disediakan melalui pekerja layanan harus dianggap sebagai peningkatan progresif, dan ditambahkan hanya jika didukung oleh browser. Misalnya, dengan pekerja layanan, Anda dapat meng-cache shell aplikasi dan data untuk aplikasi Anda, sehingga tersedia bahkan ketika tidak ada jaringan. Ketika pekerja layanan tidak didukung, kode offline tidak dipanggil, dan pengguna mendapatkan pengalaman dasar. Menggunakan deteksi fitur untuk memberikan peningkatan progresif memiliki overhead kecil dan tidak akan merusak browser lama yang tidak mendukung fitur tersebut.

Mendaftarkan pekerja layanan

Langkah pertama adalah mendaftarkan pekerja layanan. Tambahkan kode berikut ke file index.html Anda:

public/index.html

// 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);
        });
  });
}

Kode ini memeriksa untuk mengetahui apakah API pekerja layanan tersedia, dan jika tersedia, pekerja layanan di /service-worker.js akan terdaftar setelah halaman dimuat.

Perhatikan bahwa pekerja layanan ditampilkan dari direktori utama, bukan dari direktori /scripts/. Ini adalah cara termudah untuk menetapkan scope pekerja layanan Anda. scope pekerja layanan menentukan file mana yang dikontrol pekerja layanan, dengan kata lain, dari jalur mana pekerja layanan akan menangkap permintaan. scope default adalah lokasi file pekerja layanan, dan diperluas ke semua direktori di bawah ini. Jadi, jika service-worker.js terletak di direktori utama, pekerja layanan akan mengontrol permintaan dari semua halaman di domain ini.

Buat cache halaman offline

Pertama, kita harus memberi tahu pekerja layanan apa yang harus di-cache. Kami telah membuat halaman offline sederhana (public/offline.html) yang akan kami tampilkan setiap kali tidak ada koneksi jaringan.

Dalam service-worker.js, tambahkan '/offline.html', ke array FILES_TO_CACHE, hasil akhirnya akan terlihat seperti ini:

publik/layanan-pekerja.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/offline.html',
];

Selanjutnya, kita perlu menambahkan kode berikut ke peristiwa install untuk memberi tahu pekerja layanan untuk melakukan pra-cache halaman offline:

publik/layanan-pekerja.js

// CODELAB: Precache static resources here.
evt.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page');
      return cache.addAll(FILES_TO_CACHE);
    })
);

Peristiwa install kini membuka cache dengan caches.open() dan memberikan nama cache. Memberikan nama cache memungkinkan kita untuk memberikan file versi, atau data terpisah dari resource yang di-cache sehingga kita bisa dengan mudah memperbarui suatu file tetapi tidak memengaruhi yang lain.

Setelah cache terbuka, kita kemudian dapat memanggil cache.addAll(), yang mengambil daftar URL, mengambilnya dari server dan menambahkan respons ke cache. Perhatikan bahwa cache.addAll() akan gagal jika salah satu permintaan gagal. Itu berarti Anda dijamin bahwa, jika langkah penginstalan berhasil, cache Anda akan berada dalam status yang konsisten. Namun, jika gagal karena alasan tertentu, layanan ini akan secara otomatis mencoba lagi saat pekerja layanan dimulai lagi.

Pengalihan DevTools

Mari kita lihat cara menggunakan DevTools untuk memahami dan men-debug pekerja layanan. Sebelum memuat ulang halaman, buka DevTools dan buka panel Service Workers pada panel Aplikasi. Tampilannya akan terlihat seperti ini:

Jika Anda melihat halaman kosong seperti ini, artinya halaman yang saat ini terbuka tidak memiliki pekerja layanan yang terdaftar.

Sekarang, muat ulang halaman Anda. Panel Service Workers sekarang akan terlihat seperti ini:

Jika Anda melihat informasi seperti ini, berarti halaman tersebut memiliki pekerja layanan yang sedang berjalan.

Di samping label Status, ada angka (dalam hal ini 34251). Perhatikan angka tersebut selagi Anda bekerja dengan pekerja layanan. Ini adalah cara mudah untuk mengetahui apakah pekerja layanan Anda telah diperbarui.

Membersihkan halaman offline lama

Kita akan menggunakan peristiwa activate untuk membersihkan data lama dalam cache. Kode ini memastikan bahwa pekerja layanan Anda mengupdate cache-nya setiap kali file shell aplikasi berubah. Agar hal ini dapat bekerja, Anda perlu menambahkan variabel CACHE_NAME di bagian atas file pekerja layanan.

Tambahkan kode berikut ke peristiwa activate Anda:

publik/layanan-pekerja.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);
        }
      }));
    })
);

Pengalihan DevTools

Saat panel Pekerja Layanan terbuka, muat ulang halaman. Anda akan melihat pekerja layanan baru diinstal dan nomor status bertambah.

Pekerja layanan yang diupdate langsung mengontrolnya karena peristiwa install kita selesai dengan self.skipWaiting(), dan peristiwa activate selesai dengan self.clients.claim(). Tanpa alat tersebut, pekerja layanan lama akan terus mengontrol halaman selama ada tab yang terbuka ke halaman.

Menangani permintaan jaringan yang gagal

Dan terakhir, kita perlu menangani peristiwa fetch. Kita akan menggunakan strategi Jaringan kembali ke cache . Pekerja layanan akan mencoba mengambil resource dari jaringan terlebih dahulu. Jika gagal, pekerja layanan akan menampilkan halaman offline dari cache.

publik/layanan-pekerja.js

// CODELAB: Add fetch event handler here.
if (evt.request.mode !== 'navigate') {
  // Not a page navigation, bail.
  return;
}
evt.respondWith(
    fetch(evt.request)
        .catch(() => {
          return caches.open(CACHE_NAME)
              .then((cache) => {
                return cache.match('offline.html');
              });
        })
);

Pengendali fetch hanya perlu menangani navigasi halaman, sehingga permintaan lainnya dapat dihapus dari pengendali dan ditangani secara normal oleh browser. Namun, jika permintaan .mode adalah navigate, gunakan fetch untuk mencoba mendapatkan item dari jaringan. Jika gagal, pengendali catch akan membuka cache dengan caches.open(CACHE_NAME) dan menggunakan cache.match('offline.html') untuk mendapatkan halaman offline yang telah di-cache. Selanjutnya, hasil diteruskan ke browser menggunakan evt.respondWith().

Pengalihan DevTools

Mari kita periksa untuk memastikan semuanya berfungsi seperti yang kita harapkan. Saat panel Service Workers terbuka, muat ulang halaman. Anda akan melihat pekerja layanan baru diinstal dan nomor status bertambah.

Kita juga dapat memeriksa apa yang di-cache. Buka panel Cache Storage di panel Aplikasi DevTools. Klik kanan Cache Storage, pilih Refresh Cache, lalu perluas bagian. Anda akan melihat nama cache statis yang tercantum di sisi kiri. Klik nama cache untuk melihat semua file yang di-cache.

Sekarang, mari kita uji mode offline. Kembali ke panel Service Workers dalam panel Application di DevTools dan centang kotak Offline. Setelah memeriksanya, Anda akan melihat ikon peringatan kecil berwarna kuning di samping tab panel Jaringan. Ikon ini menunjukkan bahwa Anda sedang offline.

Muat ulang halaman Anda dan... berfungsi dengan baik! Kami mendapatkan panda offline kami, bukan dino offline Chrome!

Tips untuk menguji pekerja layanan

Melakukan debug pekerja layanan bisa menjadi sebuah tantangan, dan ketika melibatkan caching, sesuatu bisa menjadi lebih buruk lagi jika cache tidak diperbarui saat Anda mengharapkannya. Anda bisa cepat frustrasi saat menyerahkan siklus proses normal untuk pekerja layanan dan bug dalam kode. Tapi jangan.

Menggunakan DevTools

Di panel Service Workers pada panel Application, ada beberapa kotak centang yang akan memudahkan hidup Anda.

  • Offline - Jika dicentang, menyimulasikan pengalaman offline dan mencegah permintaan dikirim ke jaringan.
  • Update saat memuat ulang - Jika dicentang, akan mendapatkan pekerja layanan terbaru, menginstalnya, dan segera mengaktifkannya.
  • Abaikan untuk jaringan - Jika dicentang, permintaan akan melewati pekerja layanan dan dikirim langsung ke jaringan.

Mulai yang Baru

Terkadang, Anda mungkin akan memuat data yang di-cache atau sesuatu tidak diperbarui seperti yang Anda harapkan. Untuk menghapus semua data yang tersimpan (localStorage, indexDB data, cache file) dan menghapus semua pekerja layanan, gunakan panel Clear storage di panel Application. Atau, Anda juga dapat bekerja di jendela Samaran.

Kiat tambahan:

  • Setelah dibatalkan pendaftarannya, pekerja layanan dapat tetap tercantum hingga jendela browser yang memuatnya ditutup.
  • Jika beberapa jendela dalam aplikasi Anda terbuka, pekerja layanan baru tidak akan berpengaruh hingga semua jendela dimuat ulang dan diupdate ke pekerja layanan terbaru.
  • Membatalkan pendaftaran pekerja layanan tidak menghapus cache!
  • Jika pekerja layanan sudah ada dan pekerja layanan baru terdaftar, pekerja layanan baru tidak akan mengambil alih hingga halaman dimuat ulang, kecuali jika Anda segera mengambil kontrol.

Memverifikasi perubahan dengan Lighthouse

Jalankan Lighthouse kembali dan verifikasi perubahan Anda. Jangan lupa untuk menghapus centang pada kotak Offline sebelum Anda memverifikasi perubahan.

Audit SEO

  • ✅ BERHASIL: Dokumen memiliki deskripsi meta.

Audit Progressive Web App

  • ✅ BERHASIL: Halaman saat ini merespons dengan 200 saat offline.
  • ✅ BERHASIL: start_url merespons dengan 200 saat offline.
  • ✅ BERHASIL: Mendaftarkan pekerja layanan yang mengontrol halaman dan start_url.
  • ✅ BERHASIL: Manifes aplikasi web memenuhi persyaratan kemampuan penginstalan.
  • ✅ BERHASIL: Dikonfigurasi untuk layar pembuka kustom.
  • ✅ BERHASIL: Menetapkan warna tema kolom URL.

Luangkan waktu sejenak dan setel ponsel Anda ke mode pesawat, lalu coba jalankan beberapa aplikasi favorit Anda. Di hampir semua kasus, mereka memberikan pengalaman offline yang cukup baik. Pengguna mengharapkan pengalaman yang kuat dari aplikasi mereka. Begitu juga dengan web. Progressive Web App harus dirancang dengan offline sebagai skenario inti.

Siklus proses pekerja layanan

Siklus proses pekerja layanan adalah bagian yang paling rumit. Jika Anda tidak tahu apa yang dicoba untuk dilakukan dan apa manfaatnya, maka akan terasa seperti melawan Anda. Namun, setelah mengetahui cara kerjanya, Anda dapat menghasilkan update yang lancar dan tidak mengganggu kepada pengguna, dengan menggabungkan yang terbaik dari web dan pola native.

install peristiwa

Peristiwa pertama yang didapatkan pekerja layanan adalah install. Ini dipicu segera setelah pekerja dieksekusi, dan hanya dipanggil sekali per pekerja layanan. Jika Anda mengubah skrip pekerja layanan, browser akan menganggapnya sebagai pekerja layanan yang berbeda, dan akan mendapatkan peristiwa install sendiri.

Biasanya, peristiwa install digunakan untuk meng-cache semua yang diperlukan agar aplikasi dapat berjalan.

activate peristiwa

Pekerja layanan akan menerima peristiwa activate setiap kali dimulai. Tujuan utama peristiwa activate adalah mengonfigurasi perilaku pekerja layanan, membersihkan semua resource yang tersisa dari proses sebelumnya (misalnya, cache lama), dan menyiapkan pekerja layanan untuk menangani permintaan jaringan (misalnya, peristiwa fetch yang dijelaskan di bawah).

fetch peristiwa

Peristiwa pengambilan memungkinkan pekerja layanan menangkap permintaan jaringan dan menangani permintaan. Aplikasi bisa menuju ke jaringan untuk mendapatkan sumber daya, mengambilnya dari cache-nya sendiri, membuat respons khusus, atau sejumlah opsi berbeda. Lihat Buku Petunjuk Offline untuk mengetahui berbagai strategi yang dapat Anda gunakan.

Memperbarui pekerja layanan

Browser akan memeriksa apakah ada versi baru pekerja layanan di setiap pemuatan halaman. Jika menemukan versi baru, versi yang baru akan didownload dan diinstal di latar belakang, tetapi tidak diaktifkan. Pekerja layanan versi baru akan berstatus menunggu, hingga tidak ada lagi halaman yang dibuka yang menggunakan pekerja layanan lama. Setelah semua jendela yang menggunakan pekerja layanan lama ditutup, pekerja layanan baru akan diaktifkan dan dapat mengambil alih kontrol. Lihat bagian Mengupdate pekerja layanan dalam dokumen Siklus Proses Pekerja Layanan untuk detail selengkapnya.

Memilih strategi caching yang tepat

Memilih strategi penyimpanan cache yang tepat tergantung pada jenis sumber daya yang Anda coba cache dan cara Anda mungkin perlu mengaksesnya nanti. Untuk aplikasi cuaca, kami akan memisahkan resource yang perlu di-cache menjadi dua kategori: resource yang ingin di-cache sebelumnya dan data yang akan kami simpan dalam cache saat runtime.

Menyimpan resource statis ke dalam cache

Precaching resource adalah konsep yang sama dengan yang terjadi ketika pengguna menginstal aplikasi desktop atau seluler. Resource utama yang diperlukan untuk menjalankan aplikasi diinstal atau di-cache pada perangkat sehingga dapat dimuat nanti terlepas dari apakah ada koneksi jaringan atau tidak.

Untuk aplikasi, kita akan melakukan pra-cache semua resource statis saat pekerja layanan diinstal sehingga semua yang diperlukan untuk menjalankan aplikasi akan disimpan di perangkat pengguna. Untuk memastikan aplikasi dimuat secepat kilat, kita akan menggunakan strategi cache-first; bukan membuka jaringan untuk mendapatkan resource, resource tersebut akan diambil dari cache lokal; hanya jika tidak tersedia, kami akan mencoba mendapatkannya dari jaringan.

Menarik dari cache lokal akan menghilangkan variabilitas jaringan. Apa pun jenis jaringan tempat pengguna berada (WiFi, 5G, 3G, atau bahkan 2G), sumber daya utama yang harus kami jalankan segera tersedia.

Menyimpan data aplikasi dalam cache

Strategi validasi ulang sementara ideal untuk jenis data tertentu dan berfungsi dengan baik untuk aplikasi kami. Strategi ini menampilkan data di layar secepat mungkin, lalu diperbarui setelah jaringan menampilkan data terbaru. Validasi sementara tidak berlaku lagi berarti kita harus memulai dua permintaan asinkron, satu ke cache dan satu ke jaringan.

Dalam keadaan normal, data yang di-cache akan segera ditampilkan, yang memberikan data terbaru yang dapat digunakan kepada aplikasi. Kemudian, ketika permintaan jaringan kembali, aplikasi akan diperbarui menggunakan data terbaru dari jaringan.

Untuk aplikasi kita, hal ini akan memberikan pengalaman yang lebih baik daripada jaringan, dengan kembali ke strategi cache karena pengguna tidak harus menunggu sampai waktu permintaan jaringan habis untuk melihat sesuatu di layar. Awalnya mereka mungkin melihat data yang lebih lama, tetapi setelah permintaan jaringan kembali, aplikasi akan diperbarui dengan data terbaru.

Mengupdate logika aplikasi

Seperti yang telah disebutkan sebelumnya, aplikasi harus memulai dua permintaan asinkron, satu ke cache dan satu ke jaringan. Aplikasi menggunakan objek caches yang tersedia di window untuk mengakses cache dan mengambil data terbaru. Ini adalah contoh yang sangat baik dari penyempurnaan progresif karena objek caches mungkin tidak tersedia di semua browser, dan jika tidak, permintaan jaringan seharusnya tetap berfungsi.

Update fungsi getForecastFromCache() untuk memeriksa apakah objek caches tersedia di objek window global dan, jika tersedia, minta data dari cache.

public/scripts/app.js

// 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;
    });

Kemudian, kita perlu mengubah updateData() sehingga melakukan dua panggilan, satu ke getForecastFromNetwork() untuk mendapatkan perkiraan dari jaringan, dan satu untuk getForecastFromCache() untuk mendapatkan perkiraan yang terakhir di-cache:

public/scripts/app.js

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

Aplikasi cuaca kita sekarang membuat dua permintaan data asinkron, satu dari cache dan satu melalui fetch. Jika ada data dalam cache, data akan ditampilkan dan dirender dengan sangat cepat (puluhan milidetik). Kemudian, saat fetch merespons, kartu akan diperbarui dengan data terbaru secara langsung dari API cuaca.

Perhatikan bagaimana permintaan cache dan permintaan fetch berakhir dengan panggilan untuk memperbarui kartu perkiraan. Bagaimana aplikasi tahu bahwa data terbaru ditampilkan? Ini ditangani dalam kode berikut dari renderForecast():

public/scripts/app.js

// If the data on the element is newer, skip the update.
if (lastUpdated >= data.currently.time) {
  return;
}

Setiap kali kartu diperbarui, aplikasi akan menyimpan stempel waktu data pada atribut tersembunyi di kartu. Aplikasi hanya dibebaskan jika stempel waktu yang sudah ada pada kartu lebih baru daripada data yang diteruskan ke fungsi.

Membuat cache resource aplikasi kita

Dalam pekerja layanan, tambahkan DATA_CACHE_NAME sehingga kita dapat memisahkan data aplikasi dari shell aplikasi. Ketika shell aplikasi diperbarui dan cache lama dihapus, data kita tetap tak tersentuh, sehingga siap untuk pemuatan super cepat. Perlu diingat, jika format data Anda berubah di masa mendatang, Anda memerlukan cara untuk menanganinya dan memastikan shell aplikasi dan konten tetap sinkron.

publik/layanan-pekerja.js

// 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';

Jangan lupa untuk juga memperbarui CACHE_NAME; kami juga akan mengubah semua resource statis kami.

Agar aplikasi kita bisa bekerja secara offline, kita perlu meng-cache semua resource yang dibutuhkan. Ini juga akan membantu performa kami. Daripada harus mendapatkan semua resource dari jaringan, aplikasi akan dapat memuat semuanya dari cache lokal sehingga menghilangkan ketidakstabilan jaringan.

Perbarui array FILES_TO_CACHE dengan daftar file:

publik/layanan-pekerja.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/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',
];

Karena kita membuat daftar file ke cache secara manual, setiap kali kita memperbarui file, kita harus memperbarui CACHE_NAME. Kita dapat menghapus offline.html dari daftar file yang di-cache karena aplikasi kita sekarang memiliki semua resource yang diperlukan untuk bekerja secara offline, dan tidak akan pernah menampilkan halaman offline lagi.

Memperbarui pengendali peristiwa aktivasi

Untuk memastikan bahwa peristiwa activate kami tidak menghapus data kami secara tidak sengaja, ganti peristiwa if (key !== CACHE_NAME) { dengan peristiwa activate dari service-worker.js:

publik/layanan-pekerja.js

if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {

Memperbarui pengendali peristiwa pengambilan

Kita harus memodifikasi pekerja layanan untuk menangkap permintaan ke API cuaca dan menyimpan responsnya dalam cache, sehingga kita dapat dengan mudah mengaksesnya di lain waktu. Dalam strategi yang lama untuk memvalidasi ulang, kami mengharapkan respons jaringan sebagai 'sumber kebenaran,' selalu memberi kami informasi terbaru. Jika jaringan tidak bisa, tidak apa-apa karena kita sudah mengambil data cache terbaru di aplikasi kita.

Update pengendali peristiwa fetch untuk menangani permintaan ke data API secara terpisah dari permintaan lainnya.

publik/layanan-pekerja.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);
          });
    })
);

Kode ini mencegat permintaan dan memeriksa apakah permintaan tersebut untuk prakiraan cuaca. Jika ada, gunakan fetch untuk membuat permintaan. Setelah respons dikembalikan, buka cache, clone respons, simpan dalam cache, dan kembalikan respons ke pemohon asli.

Kita harus menghapus pemeriksaan evt.request.mode !== 'navigate' karena ingin agar pekerja layanan menangani semua permintaan (termasuk gambar, skrip, file CSS, dll.), bukan hanya navigasi. Jika kita membiarkan pemeriksaan itu, hanya HTML yang akan disajikan dari cache pekerja layanan. Semua hal lainnya akan diminta dari jaringan.

Coba

Aplikasi seharusnya sudah berfungsi offline sepenuhnya sekarang. Segarkan halaman untuk memastikan bahwa Anda telah menginstal pekerja layanan terbaru. Lalu simpan beberapa kota dan tekan tombol refresh di aplikasi untuk mendapatkan data cuaca terbaru.

Berikutnya, buka panel Cache Storage di panel Aplikasi DevTools. Luaskan bagian ini dan Anda akan melihat nama cache statis dan cache data Anda yang tercantum di sebelah kiri. Membuka cache data akan menampilkan data yang disimpan untuk setiap kota.

Beralih ke panel Service Workers, dan centang kotak Offline. Coba muat ulang halaman, lalu coba offline dan muat ulang halaman.

Jika Anda terhubung ke jaringan cepat dan ingin mengetahui cara data perkiraan cuaca diperbarui pada koneksi lambat, tetapkan properti FORECAST_DELAY di server.js ke 5000. Semua permintaan ke API perkiraan akan tertunda selama 5.000 md.

Memverifikasi perubahan dengan Lighthouse

Sebaiknya jalankan juga Lighthouse lagi.

Audit SEO

  • ✅ BERHASIL: Dokumen memiliki deskripsi meta.

Audit Progressive Web App

  • ✅ BERHASIL: Halaman saat ini merespons dengan 200 saat offline.
  • ✅ BERHASIL: start_url merespons dengan 200 saat offline.
  • ✅ BERHASIL: Mendaftarkan pekerja layanan yang mengontrol halaman dan start_url.
  • ✅ BERHASIL: Manifes aplikasi web memenuhi persyaratan kemampuan penginstalan.
  • ✅ BERHASIL: Dikonfigurasi untuk layar pembuka kustom.
  • ✅ BERHASIL: Menetapkan warna tema kolom URL.

Saat diinstal, Progressive Web App akan terlihat dan berperilaku seperti semua aplikasi terinstal lainnya. Lokasi dimulai dari tempat yang sama dengan peluncuran aplikasi lain. Ini berjalan di aplikasi tanpa kolom URL atau UI browser lainnya. Dan seperti semua aplikasi terinstal lainnya, ini adalah aplikasi tingkat teratas di pengalih tugas.

Di Chrome, Progressive Web App dapat diinstal melalui menu konteks tiga titik, atau Anda dapat menyediakan tombol atau komponen UI lainnya kepada pengguna yang akan meminta mereka untuk menginstal aplikasi Anda.

Audit dengan Lighthouse

Agar pengguna dapat menginstal Progressive Web App, aplikasi harus memenuhi kriteria tertentu. Cara termudah untuk memeriksanya adalah dengan menggunakan Lighthouse dan memastikannya memenuhi kriteria yang dapat diinstal.

Jika Anda telah menyelesaikan codelab ini, PWA Anda seharusnya sudah memenuhi kriteria ini.

Menambahkan install.js ke index.html

Pertama, tambahkan install.js ke file index.html.

public/index.html

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

Memproses peristiwa beforeinstallprompt

Jika kriteria tambahkan ke layar utama terpenuhi, Chrome akan mengaktifkan peristiwa beforeinstallprompt yang dapat Anda gunakan untuk menunjukkan bahwa aplikasi Anda dapat 'terinstal' lalu meminta pengguna untuk menginstalnya. Tambahkan kode di bawah untuk memproses peristiwa beforeinstallprompt:

public/scripts/install.js

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

Menyimpan acara dan menampilkan tombol instal

Dalam fungsi saveBeforeInstallPromptEvent, kita akan menyimpan referensi ke peristiwa beforeinstallprompt sehingga dapat memanggil prompt() di lain waktu dan mengupdate UI untuk menampilkan tombol instal.

public/scripts/install.js

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

Menampilkan perintah dan menyembunyikan tombol

Saat pengguna mengklik tombol instal, kita perlu memanggil .prompt() pada peristiwa beforeinstallprompt yang tersimpan. Kita juga perlu menyembunyikan tombol instal, karena .prompt() hanya dapat dipanggil satu kali di setiap peristiwa yang disimpan.

public/scripts/install.js

// 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);

Memanggil .prompt() akan menampilkan dialog modal kepada pengguna, meminta mereka untuk menambahkan aplikasi Anda ke layar utama.

Mencatat hasil di log

Anda dapat memeriksa untuk melihat cara pengguna merespons dialog penginstalan dengan memproses promise yang ditampilkan oleh properti userChoice dari peristiwa beforeinstallprompt yang disimpan. Promise menampilkan objek dengan properti outcome setelah pesan ditampilkan dan pengguna meresponsnya.

public/scripts/install.js

// CODELAB: Log user response to prompt.
deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });

Satu komentar tentang userChoice: spesifikasi menentukannya sebagai properti, bukan fungsi seperti yang Anda harapkan.

Mencatat semua peristiwa instal ke dalam log

Selain UI yang Anda tambahkan untuk menginstal aplikasi, pengguna juga dapat menginstal PWA melalui metode lain, misalnya menu tiga titik Chrome. Untuk melacak peristiwa ini, proses peristiwa yang diinstal di aplikasi.

public/scripts/install.js

// CODELAB: Add event listener for appinstalled event
window.addEventListener('appinstalled', logAppInstalled);

Kemudian, kita perlu mengupdate fungsi logAppInstalled. Untuk codelab ini, kita hanya akan menggunakan console.log, tetapi dalam aplikasi produksi, Anda mungkin ingin mencatatnya sebagai peristiwa dengan software analisis.

public/scripts/install.js

// CODELAB: Add code to log the event
console.log('Weather App was installed.', evt);

Mengupdate pekerja layanan

Jangan lupa untuk memperbarui CACHE_NAME di file service-worker.js karena Anda telah melakukan perubahan pada file yang telah di-cache. Mengaktifkan kotak centang Abaikan untuk jaringan di panel Pekerja Layanan pada panel Aplikasi di DevTools akan berfungsi dalam pengembangan, namun tidak akan membantu di dunia nyata.

Coba

Mari kita lihat bagaimana langkah penginstalannya. Agar aman, gunakan tombol Hapus data situs di panel Aplikasi DevTools untuk menghapus semuanya dan pastikan kami memulai dari awal. Jika sebelumnya Anda menginstal aplikasi, pastikan untuk meng-uninstal, jika tidak, ikon instal tidak akan muncul lagi.

Memastikan tombol instal terlihat

Pertama, verifikasikan bahwa ikon instal ditampilkan dengan benar. Pastikan Anda mencobanya di desktop dan perangkat seluler.

  1. Buka URL di tab Chrome baru.
  2. Buka menu tiga titik Chrome (di samping kolom URL).
    ▢ Pastikan Anda melihat "Instal Cuaca..." di menu.
  3. Muat ulang data cuaca menggunakan tombol muat ulang di sudut kanan atas untuk memastikan kita memenuhi heuristik interaksi pengguna.
    ▢ Verifikasi bahwa ikon instal terlihat di header aplikasi.

Memastikan tombol instal berfungsi

Selanjutnya, pastikan semua berjalan dengan benar dan acara kita diaktifkan dengan benar. Anda dapat melakukannya di desktop atau perangkat seluler. Jika ingin mengujinya di perangkat seluler, pastikan Anda menggunakan proses debug jarak jauh agar dapat melihat apa yang dicatat ke konsol.

  1. Buka Chrome, dan di tab browser baru, buka PWA Cuaca.
  2. Buka DevTools dan beralih ke panel Konsol.
  3. Klik tombol instal di pojok kanan atas.
    ▢ Pastikan tombol instal menghilang
    ▢ Pastikan dialog modal penginstalan ditampilkan.
  4. Klik Batal.
    ▢ Verifikasi "Pengguna menutup perintah A2HS" ditampilkan di output konsol.
    ▢ Verifikasi tombol instal muncul kembali.
  5. Klik lagi tombol instal, lalu klik tombol instal di dialog modal.
    ▢ Verifikasi "Pengguna menerima perintah A2HS" ditampilkan di output konsol.
    ▢ Verifikasi "Aplikasi Cuaca diinstal" ditampilkan di output konsol.
    ▢ Verifikasi aplikasi Cuaca ditambahkan ke tempat Anda biasanya menemukan aplikasi.
  6. Luncurkan PWA Cuaca.
    ▢ Verifikasi bahwa aplikasi terbuka sebagai aplikasi mandiri, baik di jendela aplikasi di desktop, atau layar penuh di seluler.

.

Memastikan penginstalan iOS berfungsi dengan baik

Mari periksa juga perilakunya di iOS. Jika memiliki perangkat iOS, Anda dapat menggunakannya, atau jika menggunakan Mac, coba Simulator iOS yang tersedia dengan Xcode.

  1. Buka Safari dan di tab browser baru, buka PWA Cuaca.
  2. Klik tombol Bagikan .
  3. Scroll ke kanan, lalu klik tombol Tambahkan ke Layar Utama.
    ▢ Pastikan judul, URL, dan ikon sudah benar.
  4. Klik Tambahkan.
    ▢ Pastikan ikon aplikasi ditambahkan ke layar utama.
  5. Luncurkan PWA Cuaca dari layar utama.
    ▢ Verifikasi bahwa aplikasi meluncurkan layar penuh.

Bonus: Mendeteksi apakah aplikasi Anda diluncurkan dari layar utama

Kueri media display-mode memungkinkan untuk menerapkan gaya, bergantung pada cara aplikasi diluncurkan, atau menentukan cara peluncurannya dengan JavaScript. 

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Anda juga dapat memeriksa kueri media display-mode di JavaScript untuk melihat apakah Anda menjalankan aplikasi secara mandiri.

Bonus: Meng-uninstal PWA

Ingat, beforeinstallevent tidak diaktifkan jika aplikasi sudah diinstal, jadi selama pengembangan, Anda mungkin ingin menginstal dan meng-uninstal aplikasi beberapa kali untuk memastikan semuanya berfungsi seperti yang diharapkan.

Android

Di Android, PWA di-uninstal dengan cara yang sama seperti aplikasi terinstal lainnya.

  1. Buka panel samping aplikasi.
  2. Scroll ke bawah untuk menemukan ikon Cuaca.
  3. Tarik ikon aplikasi ke bagian atas layar.
  4. Pilih Uninstal.

ChromeOS

Di ChromeOS, PWA mudah di-uninstal dari kotak penelusuran peluncur.

  1. Buka peluncur.
  2. Ketik "Cuaca" ke dalam kotak penelusuran, PWA Cuaca akan muncul di hasil.
  3. Klik kanan (alt-click) pada PWA Cuaca.
  4. Klik Hapus dari Chrome...

macOS dan Windows

Di Mac dan Windows, PWA dapat di-uninstal melalui Chrome:

  1. Di tab browser baru, buka chrome://apps.
  2. Klik kanan (alt-click) pada PWA Cuaca.
  3. Klik Hapus dari Chrome...

Anda juga dapat membuka PWA yang terinstal, mengklik menu konteks tiga titik di sudut kanan atas, lalu memilih "Uninstal PWA Cuaca..."

Selamat, Anda berhasil membuat Progressive Web App pertama Anda!

Anda menambahkan manifes aplikasi web untuk memungkinkannya diinstal dan menambahkan pekerja layanan untuk memastikan bahwa PWA Anda selalu cepat dan andal. Anda telah mempelajari cara menggunakan DevTools untuk mengaudit aplikasi dan bagaimana aplikasi ini dapat membantu Anda meningkatkan pengalaman pengguna.

Anda sekarang tahu langkah-langkah penting yang diperlukan untuk mengubah aplikasi web apa pun menjadi Progressive Web App.

Apa selanjutnya?

Lihat beberapa codelab ini...

Bacaan lebih lanjut

Dokumen referensi