Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Progressive Web App Anda yang Pertama

Pendahuluan

Apa yang membuat aplikasi web, Aplikasi Web Progresif?

Aplikasi Web Progresif menyediakan pengalaman yang dapat diinstal dan seperti aplikasi di desktop dan seluler yang dibangun dan dikirim langsung melalui web. Itu adalah aplikasi web yang cepat dan andal. Dan yang paling penting, aplikasi tersebut adalah aplikasi web yang berjalan di browser apa pun. Jika Anda membuat aplikasi web hari ini, Anda sudah berada di jalur untuk membangun Aplikasi Web Progresif.

Cepat & Andal

Setiap pengalaman web harus cepat, dan ini terutama berlaku untuk Aplikasi Web Progresif. Cepat mengacu pada waktu yang diperlukan untuk mendapatkan konten yang memiliki makna di layar, dan memberikan pengalaman interaktif dalam waktu kurang dari 5 detik.

Dan, hal tersebut harus sangat cepat. Sulit untuk menekankan seberapa pentingnya kinerja yang andal. Renungkan hal berikut: beban pertama aplikasi native cukup membuat frustrasi. Ini disebabkan oleh app store dan ukuran unduhan yang besar, tetapi begitu Anda sampai pada titik di mana aplikasi sudah diinstal, seluruh masalah tidak hilang begitu saja. Setiap kali aplikasi dibuka kecepatannya sama dengan saat aplikasi dibuka sebelumnya, tidak ada perbedaan. Aplikasi Web Progresif harus memberikan kinerja andal yang diharapkan pengguna dari pengalaman instalasi dari manapun.

Installability

Aplikasi Web Progresif dapat berjalan di tab browser, tetapi juga dapat diinstal. Memberi bookmark pada sebuah situs hanya menambahkan pintasan, tetapi Aplikasi Web Progresif yang terinstal terlihat dan bergaya seperti semua aplikasi lain yang diinstal. Dapat diluncurkan dari tempat yang sama dengan peluncuran aplikasi lain. Anda dapat mengontrol pengalaman peluncuran, termasuk layar pembuka (splash screen) yang disesuaikan, ikon dan banyak lagi. Aplikasi Web Progresif ini berjalan sebagai aplikasi, di jendela aplikasi tanpa bilah alamat atau UI browser lainnya. Dan seperti semua aplikasi terpasang lainnya, PWA adalah aplikasi tingkat atas di pengalih tugas (task switcher).

Ingat, penting bahwa PWA yang dapat diinstal cepat dan dapat diandalkan. Pengguna yang memasang PWA berharap aplikasi mereka berfungsi, tidak peduli apa pun koneksi jaringannya. Ini merupakan harapan utama yang harus dipenuhi oleh setiap aplikasi yang diinstal.

Mobile & Desktop

Dengan menggunakan teknik desain responsif, Aplikasi Web Progresif bekerja pada desktop dan seluler, menggunakan basis kode tunggal antar platform. Jika Anda mempertimbangkan untuk menulis aplikasi native, lihat manfaat yang ditawarkan PWA.

Apa yang akan Anda bangun

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

  • Gunakan desain responsif, sehingga berfungsi di desktop atau seluler.
  • Cepat, menggunakan service worker untuk melakukan precache sumber daya aplikasi (HTML, CSS, JavaScript, gambar) yang diperlukan untuk menjalankan aplikasi, dan cache data cuaca saat aplikasi berjalan untuk meningkatkan kinerja.
  • Dapat diinstal, dengan menggunakan manifes aplikasi web (web app manifest) dan menggunakan event beforeinstallprompt untuk membuat pengguna sadar bahwa aplikasi web ini dapat diinstal.

95fe6f7fbeee5bb1.png

Peringatan: Untuk menyederhanakan codelab ini, dan menjelaskan dasar-dasar memberikan pengalaman offline, kita menggunakan vanilla JavaScript. Dalam aplikasi produksi, kita sangat menyarankan menggunakan alat bantu seperti pustaka Workbox untuk membangun service worker Anda. Ini menghilangkan banyak kesulitan yang mungkin Anda temui.

Apa yang akan Anda pelajari

  • Cara membuat dan menambahkan manifes aplikasi web
  • Cara memberikan pengalaman offline yang sederhana
  • Cara memberikan pengalaman offline penuh
  • Cara membuat aplikasi Anda dapat diinstal

Codelab ini difokuskan pada Aplikasi Web Progresif. Konsep dan blok kode yang tidak relevan akan disediakan bagi Anda untuk disalin langsung (copy-paste).

Yang Anda butuhkan

  • Versi terbaru dari Chrome (74 atau lebih baru) PWA hanyalah aplikasi web, dan berfungsi di semua browser, tetapi kita akan menggunakan beberapa fitur Chrome DevTools untuk lebih memahami apa yang terjadi di tingkat browser, dan menggunakannya untuk uji pengalaman instal.
  • Pengetahuan tentang HTML, CSS, JavaScript, dan Chrome DevTools .

Mempersiapkan

Dapatkan kunci untuk API Dark Sky

Data cuaca kita berasal dari API Dark Sky. Untuk menggunakannya, Anda harus meminta kunci API. Mudah digunakan, dan gratis untuk proyek non-komersial.

Register untuk mendapatkan API Key

Pastikan kunci API Anda berfungsi dengan benar

Untuk menguji apakah Kunci API Anda berfungsi dengan benar, buat permintaan HTTP ke API DarkSky. Perbarui URL di bawah ini untuk mengganti DARKSKY_API_KEY dengan kunci API Anda. Jika semuanya berfungsi, Anda akan melihat ramalan cuaca terbaru untuk Kota New York.

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

Dapatkan kodenya

Kita telah memasukkan semua yang Anda butuhkan untuk proyek ini ke dalam repo Git. Untuk memulai, Anda harus mengambil kode dan membukanya di lingkungan pengembang (IDE) favorit Anda. Untuk codelab ini, kami sarankan menggunakan Glitch.

Sangat Dianjurkan: Gunakan Glitch untuk mengimpor repo

Menggunakan Glitch adalah metode yang disarankan untuk bekerja melalui codelab ini.

  1. Buka tab browser baru dan pergi ke https://glitch.com.
  2. Jika Anda tidak memiliki akun, Anda harus mendaftar.
  3. Klik New Project, lalu Klik dari Git Repo .
  4. Duplikasi (clone) https://github.com/googlecodelabs/your-first-pwapp.git dan klik OK.
  5. Setelah repo dimuat, edit file .env , dan perbarui dengan kunci API DarkSky Anda. 6. Klik tombol Tampilkan Live untuk melihat PWA dalam aksi.

Alternatif: Unduh kode & bekerja secara lokal

Jika Anda ingin mengunduh kode dan bekerja secara lokal, Anda harus memiliki Node versi terbaru, dan pengaturan editor kode dan siap untuk digunakan.

Unduh kode sumber

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

Menetapkan Tolok Ukur

Apa titik awal kita?

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

Beberapa hal untuk dicoba ...

  1. Tambahkan kota baru dengan tombol tambah biru di sudut kanan bawah.
  2. Refresh data dengan tombol refresh di sudut kanan atas.
  3. Hapus kota menggunakan x di kanan atas setiap kartu kota.
  4. Lihat cara kerjanya di desktop dan seluler.
  5. Lihat apa yang terjadi ketika Anda offline.
  6. Menggunakan panel Jaringan Chrome, lihat apa yang terjadi ketika jaringan dibatasi ke Slow 3G.
  7. Tambahkan penundaan ke server perkiraan dengan mengubah FORECAST_DELAY di server.js

Audit dengan Lighthouse

Lighthouse adalah alat yang mudah digunakan untuk membantu meningkatkan kualitas situs dan halaman web Anda. Alat ini memiliki audit untuk kinerja, aksesibilitas, aplikasi web progresif, dan banyak lagi. Setiap audit memiliki dokumen rujukan yang menjelaskan mengapa audit itu penting, serta cara memperbaikinya.

b112675caafccef0.png

Kita akan menggunakan Lighthouse untuk mengaudit aplikasi Cuaca kita, dan memastikan perubahan yang telah kita buat.

Ayo jalankan Lighthouse

  1. Buka proyek Anda di tab baru.
  2. Buka Chrome DevTools dan beralih ke tab Audits, DevTools menampilkan daftar kategori audit, biarkan semuanya diaktifkan.
  3. Klik Jalankan audit, setelah 60-90 detik, Lighthouse memberi Anda laporan di halaman tersebut.

Audit Aplikasi Web Progresif

Kita akan fokus pada hasil audit Aplikasi Web Progresif.

af1a64a13725428e.png

Dan ada banyak warna merah untuk fokus:

  • ❗GAGAL: Halaman saat ini tidak merespons dengan 200 ketika offline.
  • ❗GAGAL: start_url tidak merespons dengan 200 ketika offline.
  • ❗GAGAL: Tidak mendaftarkan service worker yang mengontrol halaman dan start_url.
  • ❗GAGAL: Manifes aplikasi web tidak memenuhi persyaratan pemasangan.
  • ❗GAGAL: Tidak dikonfigurasikan untuk splash screen khusus.
  • ❗GAGAL: Tidak mengatur warna tema address-bar.

Mari kita mulai dan mulai memperbaiki beberapa masalah ini!

Tambahkan manifes aplikasi web

Pada akhir bagian ini, aplikasi cuaca kita akan melewati audit berikut:

  • Manifes aplikasi web tidak memenuhi persyaratan pemasangan.
  • Tidak dikonfigurasikan untuk splash scfeen khusus.
  • Tidak mengatur warna tema address-bar.

Buat manifes aplikasi web

Web app manifest adalah file JSON sederhana yang memberikan Anda, sebagai pengembang (developer), kemampuan untuk mengontrol bagaimana aplikasi Anda muncul kepada pengguna.

Menggunakan manifes aplikasi web, aplikasi web Anda dapat:

  • Beri tahu browser bahwa Anda ingin aplikasi Anda dibuka di jendela tersendiri ( display ).
  • Tentukan halaman apa yang dibuka saat aplikasi pertama kali diluncurkan ( start_url ).
  • Tetapkan seperti apa tampilan aplikasi di dok atau peluncur aplikasi ( short_name , icons ).
  • Buat splash screen ( name , icons , colors ).
  • Beri tahu browser untuk membuka jendela dalam mode landscape, atau portrait ( orientation ).
  • Dan banyak lagi .

Buat file bernama public/manifest.json di proyek Anda dan salin / rekatkan 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 lab kode ini, kita telah memasukkan beberapa lainnya karena kita membutuhkannya untuk integrasi iOS kita.

Tambahkan tautan ke manifes aplikasi web

Selanjutnya, kita perlu memberi tahu browser tentang manifes kita dengan menambahkan <link rel="manifest"... ke setiap halaman di aplikasi kita. 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">

Memutar

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

c462743e1bc26958.png

Tambahkan meta tag & ikon iOS

Safari di iOS belum mendukung aplikasi web manifest ( untuk saat ini ), sehingga Anda akan perlu menambahkan meta tag tradisional ke <head> dari 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 kita menyebutkan beberapa hal lain yang cukup mudah untuk diperbaiki, jadi mari kita selesaikan itu sementara kita di sini.

Tetapkan deskripsi meta

Di bawah audit SEO, Lighthouse mencatat bahwa " Document does not have a meta description. ". Deskripsi unik berkualitas tinggi dapat menjadikan hasil Anda lebih relevan bagi pengguna pencarian dan dapat meningkatkan lalu lintas pencarian Anda.

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">

Mengatur warna tema bilah alamat

Dalam audit PWA, Lighthouse mencatat aplikasi "Does not set an address-bar theme color". Mencocokkan warna tema Anda memberikan pengalaman pengguna yang lebih mendalam.

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

public/index.html

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

Verifikasi perubahan dengan Lighthouse

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

SEO Audit

  • ✅ LULUS: Dokumen memiliki deskripsi meta.

Audit Aplikasi Web Progresif

  • ❗GAGAL: Halaman saat ini tidak merespons dengan 200 ketika offline.
  • ❗GAGAL: start_url tidak merespons dengan 200 ketika offline.
  • ❗GAGAL: Tidak mendaftarkan service worker yang mengontrol halaman dan start_url.
  • ✅ LULUS: Manifes aplikasi web memenuhi persyaratan pemasangan.
  • ✅ LULUS: Dikonfigurasi untuk layar splash khusus.
  • ✅ LULUS: Mengatur warna tema address-bar.

Berikan pengalaman offline sederhana

Ada harapan dari pengguna bahwa aplikasi yang diinstal akan tetap dapat dijalankan meskipun sedang dalam keadaan offline. Itulah mengapa sangat penting bagi aplikasi web yang dapat diinstal untuk tidak pernah menampilkan dinosaurus offline Chrome. Pengalaman offline dapat berupa halaman offline yang sederhana, hingga kemampuan untuk membuka dan membaca data yang sudah di-cache sebelumnya, hingga pengalaman offline yang berfungsi penuh yang secara otomatis disinkronkan ketika koneksi jaringan dipulihkan.

Di bagian ini, kita akan menambahkan halaman offline sederhana ke aplikasi cuaca kita. Jika pengguna mencoba memuat aplikasi saat offline, itu akan menampilkan halaman khusus kita, bukan halaman offline khas yang ditampilkan browser. Pada akhir bagian ini, aplikasi cuaca kita akan melewati audit berikut:

  • Halaman saat ini tidak merespons dengan 200 ketika offline.
  • start_url tidak merespons dengan 200 ketika offline.
  • Tidak mendaftarkan service worker yang mengontrol halaman dan start_url.

Di bagian selanjutnya, kita akan mengganti halaman offline khusus kita dengan pengalaman offline penuh. Ini akan meningkatkan pengalaman offline, tetapi yang lebih penting, ini akan secara signifikan meningkatkan kinerja kita, karena sebagian besar aset kita (HTML, CSS dan JavaScript) akan disimpan dan disajikan secara lokal, menghilangkan jaringan sebagai potensi hambatan.

Service Worker sang penyelamat

Jika Anda tidak terbiasa dengan service worker, Anda bisa mendapatkan pemahaman dasar dengan membaca Introduction To Service Workers tentang apa yang dapat mereka lakukan, bagaimana siklus hidup mereka bekerja dan banyak lagi. Setelah Anda menyelesaikan codelab ini, pastikan untuk memeriksa Debugging Service Workers code lab untuk melihat lebih mendalam bagaimana menggunakan dengan service worker.

Fitur yang disediakan melalui service worker harus dianggap sebagai peningkatan progresif, dan hanya ditambahkan jika didukung oleh browser. Misalnya, dengan service worker Anda dapat menampung (cache) app shell dan data untuk aplikasi Anda, sehingga dapat dibuka meskipun saat jaringan offline. Ketika service worker tidak didukung, kode offline tidak dipanggil, dan pengguna mendapatkan pengalaman dasar. Menggunakan deteksi fitur untuk memberikan peningkatan progresif memang sedikit memerlukan pekerjaan tambahan namun membuat aplikasi tetap dapat dibuka di browser lama yang tidak mendukung fitur itu.

Daftarkan service worker

Langkah pertama adalah mendaftarkan service worker. 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 akan memeriksa apakah API service worker tersedia, dan jika ya, service worker di /service-worker.js didaftarkan setelah halaman tersebut berhasil dibuka sepenuhnya .

Catatan, service worker dilayani dari direktori utama (root), bukan dari direktori /scripts/ . Ini adalah cara termudah untuk mengatur __ scope __ dari service worker Anda. scope service worker menentukan file mana yang dikontrol service worker, dengan kata lain, dari jalur mana service worker akan melakukan interupsi permintaan (request). scope secara default adalah lokasi file service worker, dan meluas ke semua direktori di bawahnya. Jadi jika service-worker.js terletak di direktori utama (root), service worker akan mengontrol permintaan dari semua halaman web di domain ini.

Halaman offline Precache

Pertama, kita perlu memberi tahu service worker apa yang harus di-cache. Kita telah membuat halaman offline ( public/offline.html ) sederhana yang akan kita tampilkan kapan saja ketika tidak ada koneksi jaringan.

Di service-worker.js Anda, tambahkan '/offline.html', ke array FILES_TO_CACHE , hasil akhirnya harus seperti ini:

public/service-worker.js

// CODELAB: Update cache names any time any of the cached files change.
const FILES_TO_CACHE = [
  '/offline.html',
];

Selanjutnya, kita perlu memperbarui acara install untuk memberitahu service worker untuk melakukan pra-cache halaman offline:

public/service-worker.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);
    })
);

Proses install sekarang membuka cache dengan caches.open() dan memberikan nama cache. Memberi nama cache memungkinkan kita untuk membedakan versi file, atau memisahkan data dari sumber daya yang di-cache sehingga kita dapat dengan mudah memperbarui satu tetapi tidak mempengaruhi yang lain.

Setelah cache terbuka, kita dapat memanggil cache.addAll(), yang mengambil daftar URL, mengambilnya dari server dan menambahkan respon ke cache. Perhatikan bahwa cache.addAll() akan menolak jika ada permintaan individu yang gagal. Itu berarti Anda dijamin bahwa, jika langkah pemasangan berhasil, cache Anda akan berada dalam kondisi yang konsisten. Tetapi, jika gagal karena suatu alasan, itu akan secara otomatis mencoba lagi saat service worker kembali dijalankan.

Melihat Kembali DevTools

Mari kita lihat bagaimana Anda dapat menggunakan DevTools untuk memahami dan men-debug service worker. Sebelum memuat ulang halaman Anda, buka DevTools, buka panel Layanan Pekerja pada panel Aplikasi. Seharusnya terlihat seperti ini:

b3aa37b67863fd03.png

Ketika Anda melihat halaman kosong seperti ini, itu berarti bahwa halaman yang sedang terbuka tidak memiliki service worker terdaftar.

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

69808e4bf3aee41b.png

Ketika Anda melihat informasi seperti ini, itu berarti halaman memiliki service worker yang sedang berjalan.

Di sebelah label Status, ada nomor (34251 dalam kasus ini), perhatikan nomor itu saat Anda bekerja dengan service worker. Ini cara mudah untuk mengetahui apakah service worker Anda telah diperbarui.

Bersihkan halaman offline lama

Kita akan menggunakan event activate untuk membersihkan data lama di cache kita. Kode ini memastikan bahwa service worker Anda memperbarui cache setiap kali ada file shell aplikasi yang berubah. Agar dapat berfungsi, Anda harus menambahkan variabel CACHE_NAME di bagian atas file service worker Anda.

Tambahkan kode berikut ke event activate Anda:

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

Melihat Kembali DevTools

Dengan panel Service Worker terbuka, segarkan halaman, Anda akan melihat service worker baru diinstal, dan kenaikan nomor status.

1db827d76bc0b359.png

Service worker yang diperbarui segera mengambil kendali karena event install kita selesai dengan self.skipWaiting(), dan event activate selesai dengan self.clients.claim(). Tanpa hal tersebut, service worker lama akan terus mengontrol halaman selama ada tab yang terbuka ke halaman.

Menangani permintaan jaringan yang gagal

Dan akhirnya, kita perlu menangani event fetch. Kita akan menggunakan jaringan, kembali ke strategi cache . Service worker pertama-tama akan mencoba mengambil sumber daya dari jaringan, jika gagal, ia akan mengembalikan halaman offline dari cache.

6302ad4ba8460944.png

public/service-worker.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');
              });
        })
);

Handler fetch hanya perlu menangani navigasi halaman, sehingga permintaan lain dapat dibuang dari handler dan akan ditangani secara normal oleh browser. Tetapi, jika permintaan .mode adalah navigate, gunakan fetch untuk mencoba mendapatkan item dari jaringan. Jika gagal, pengendali catch membuka cache dengan caches.open(CACHE_NAME) dan menggunakan cache.match('offline.html') untuk mendapatkan halaman offline yang sudah di-cache. Hasilnya kemudian diteruskan kembali ke browser menggunakan evt.respondWith().

Poin utama: Membungkus panggilan fetch di evt.respondWith() mencegah penanganan browser bawaan bawaan dan memberi tahu browser bahwa kita ingin menangani sendiri responnya. Jika Anda tidak memanggil evt.respondWith() di dalam handler fetch , Anda hanya akan mendapatkan perilaku jaringan sebagai default.

Melihat Ulang DevTools

Mari kita periksa untuk memastikan semuanya berfungsi seperti yang kita harapkan. Dengan panel Service Worker terbuka, segarkan halaman (refresh), Anda akan melihat service worker baru diinstal, dan kenaikan angka status.

Kita juga dapat memeriksa untuk melihat apa yang telah di-cache. Buka panel Cache Storage pada panel Application dari DevTools. Klik kanan Cache Storage, pilih Refresh Caches, perluas bagian dan Anda akan melihat nama cache statis Anda tercantum di sisi kiri. Mengklik pada nama cache menunjukkan semua file yang di-cache.

c80a2a2e93c1c3ee.png

Sekarang, mari kita coba mode offline. Kembali ke panel Service Workers dari DevTools dan centang kotak centang Offline. Setelah memeriksanya, Anda akan melihat ikon peringatan kuning kecil di sebelah tab panel Network. Ini menunjukkan bahwa Anda sedang offline.

984b34dc2aa667a.png

Muat ulang halaman Anda dan ... berfungsi! Kita mendapatkan offline panda , alih-alih dino offline Chrome!

Kiat untuk menguji service worker

Melakukan debug terhadap service worker bisa menjadi tantangan, dan ketika melibatkan caching, hal-hal bisa menjadi mimpi buruk jika cache tidak diperbarui padahal Anda mengharapkannya. Antara siklus service worker biasa dan bug dalam kode Anda, Anda mungkin menjadi cepat frustrasi. Tapi jangan .

Gunakan DevTools

Di panel Service Worker dari panel Aplikasi, ada beberapa kotak centang yang akan membuat hidup Anda lebih mudah.

c7ac93904f473a91.png

  • Offline - Ketika dicentang mensimulasikan pengalaman offline dan mencegah permintaan untuk menggunakan jaringan.
  • Update on reload - Ketika dicentang akan mendapatkan service worker terbaru, instal, dan segera aktifkan.
  • Bypass for network - Ketika permintaan yang dicentang melewati service worker dan dikirim langsung ke jaringan.

Memulai Kembali

Dalam beberapa kasus, Anda mungkin menemukan diri Anda memuat data cache atau bahwa hal-hal tidak diperbarui seperti yang Anda harapkan. Untuk menghapus semua data yang disimpan (penyimpanan lokal, data di indexedDB, file cache) dan menghapus semua service worker, gunakan panel "Clear storage" di tab aplikasi. Atau, Anda juga bisa bekerja di mode Penyamaran (Incognito).

398bbcd285e2c5dd.png

Kiat tambahan:

  • Setelah service worker sudah tidak terdaftar, ia mungkin tetap terdaftar sampai jendela browser yang berisi ditutup.
  • Jika beberapa jendela ke aplikasi Anda terbuka, service worker baru tidak akan berlaku sampai semua jendela dimuat ulang dan diperbarui ke service worker terbaru.
  • Membatalkan pendaftaran service worker tidak akan menghapus cache!
  • Jika sebuah service worker ada dan sebuah service worker baru terdaftar, service worker baru tidak akan mengambil kendali sampai halaman dimuat kembali, kecuali jika Anda mengambil kontrol langsung .

Verifikasi perubahan dengan Lighthouse

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

SEO Audit

  • ✅ LULUS: Dokumen memiliki deskripsi meta.

Audit Aplikasi Web Progresif

  • ✅ LULUS: Halaman saat ini merespons dengan 200 ketika offline.
  • ✅ LULUS: start_url merespons dengan 200 ketika offline.
  • ✅ LULUS: Mendaftarkan service worker yang mengontrol halaman dan start_url.
  • ✅ LULUS: Manifes aplikasi web memenuhi persyaratan pemasangan.
  • ✅ LULUS: Dikonfigurasi untuk layar splash khusus.
  • ✅ LULUS: Mengatur warna tema address-bar.

Berikan pengalaman offline penuh

Luangkan waktu sejenak dan letakkan ponsel Anda dalam mode pesawat, dan coba jalankan beberapa aplikasi favorit Anda. Dalam hampir semua kasus, mereka memberikan pengalaman offline yang cukup bagus. Pengguna mengharapkan pengalaman yang bagus dari aplikasi mereka. Dan web seharusnya tidak berbeda. Aplikasi Web Progresif harus dirancang dengan offline sebagai skenario inti.

Daur hidup service worker

Siklus hidup service worker adalah bagian yang paling rumit. Jika Anda tidak tahu apa yang ia coba lakukan dan apa manfaatnya, itu bisa terasa seperti melawan Anda. Tetapi begitu Anda tahu cara kerjanya, Anda dapat memberikan pembaruan yang mulus dan mencolok kepada pengguna, memadukan yang terbaik dari web dan bentuk aplikasi native.

Event install

Event pertama yang didapatkan oleh service worker adalah install. Ini segera terpicu setelah pekerja dieksekusi, dan itu hanya dipanggil sekali untuk setiap service worker. Jika Anda mengubah skrip service worker Anda, browser menganggapnya sebagai service worker yang berbeda, dan itu akan mendapatkan event install sendiri.

72ed77b1720512da.png

Biasanya event install digunakan untuk menyimpan semua yang Anda butuhkan agar aplikasi berjalan.

Event activate

Service worker akan menerima event activate setiap kali dimulai. Tujuan utama event activate adalah untuk mengonfigurasi perilaku service worker, membersihkan semua sumber daya yang tertinggal dari proses sebelumnya (misalnya cache lama), dan membuat service worker siap menangani permintaan jaringan (misalnya event fetch yang dijelaskan di bawah).

Event fetch

Event fetch memungkinkan service worker untuk mencegat permintaan jaringan dan menangani permintaan. Event ini dapat menuju ke jaringan untuk mendapatkan sumber daya, dapat menariknya dari cache sendiri, menghasilkan respon khusus atau sejumlah opsi yang berbeda. Lihatlah Offline Cookbook untuk berbagai strategi yang dapat Anda gunakan.

Memperbarui service worker

Browser memeriksa apakah ada versi baru service worker pada setiap pemuatan halaman. Jika menemukan versi baru, versi baru diunduh dan diinstal di belakang layar, tetapi tidak diaktifkan. Dia akan menunggu, sampai tidak ada lagi halaman yang terbuka yang menggunakan service worker lama. Setelah semua jendela menggunakan service worker lama ditutup, service worker baru diaktifkan dan dapat mengambil kendali. Rujuk ke bagian Updating the service worker dari dokumen Siklus Hidup service worker untuk detail lebih lanjut.

Memilih strategi caching yang tepat

Memilih strategi caching tepat tergantung pada jenis sumber daya yang Anda coba cache dan bagaimana Anda mungkin membutuhkannya nanti. Untuk aplikasi cuaca kita, kita akan membagi sumber yang kita butuhkan untuk cache menjadi dua kategori: sumber daya yang ingin kita ambil sebelumnya dan data yang akan kita cache saat runtime.

Caching sumber daya statis

Melakukan cache diawal (precache) terhadap sumber daya Anda adalah konsep yang mirip dengan apa yang terjadi ketika pengguna menginstal aplikasi desktop atau seluler. Sumber daya utama yang diperlukan untuk menjalankan aplikasi diinstal, atau di-cache pada perangkat sehingga dapat dimuat nanti apakah ada koneksi jaringan atau tidak.

Untuk aplikasi kita, kita akan melakukan cache diawal (precache) semua sumber daya statis kita ketika service worker kita diinstal sehingga semua yang kita butuhkan untuk menjalankan aplikasi disimpan di perangkat pengguna. Untuk memastikan aplikasi kita memuat kilat dengan cepat, kita akan menggunakan strategi cache-first; alih-alih langsung menuju ke jaringan untuk mendapatkan sumber daya, mereka akan ditarik dari cache lokal; hanya jika tidak tersedia maka kita akan mencoba mendapatkannya dari jaringan.

44860840e2090bd8.png

Menarik dari cache lokal menghilangkan segala variabilitas jaringan. Tidak peduli apa pun jenis jaringan yang digunakan pengguna (WiFi, 5G, 3G, atau bahkan 2G), sumber daya utama yang perlu kita jalankan tersedia segera.

Caching data aplikasi

stale-while-revalidate strategy adalah tipe data tertentu yang ideal dan berfungsi dengan baik untuk aplikasi kita. Ia mendapat data di layar secepat mungkin, lalu memperbaruinya setelah jaringan mengembalikan data terbaru. Stale-while-valvalate artinya kita harus memulai dua permintaan asinkron, satu ke cache dan satu ke jaringan.

6ebb2681eb1f58cb.png

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

Untuk aplikasi kita, ini memberikan pengalaman yang lebih baik daripada jaringan, kembali ke strategi cache karena pengguna tidak perlu menunggu sampai permintaan jaringan habis untuk melihat sesuatu di layar. Mereka mungkin awalnya melihat data yang lebih tua, tetapi begitu permintaan jaringan kembali, aplikasi akan diperbarui dengan data terbaru.

Perbarui logika aplikasi

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

Perbarui fungsi getForecastFromCache(), untuk memeriksa apakah objek caches tersedia di objek window global, dan jika ya, 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 memodifikasi updateData() sehingga ia membuat dua panggilan, satu ke getForecastFromNetwork() untuk mendapatkan ramalan dari jaringan, dan satu ke getForecastFromCache() untuk mendapatkan ramalan cache yang terakhir:

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 tidak sinkron, satu dari cache dan satu melalui fetch . Jika ada data dalam cache, itu akan dikembalikan dan diberikan dengan sangat cepat (puluhan milidetik). Kemudian, ketika fetch merespon, kartu akan diperbarui dengan data terbaru langsung dari API cuaca.

Perhatikan bagaimana permintaan cache dan permintaan fetch diakhiri dengan panggilan untuk memperbarui kartu perkiraan. Bagaimana aplikasi mengetahui apakah itu menampilkan data terbaru? 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 menyimpan stempel waktu data pada atribut tersembunyi pada kartu. Aplikasi hanya dijalankan jika cap waktu yang sudah ada pada kartu lebih baru daripada data yang diteruskan ke fungsi.

Pre-cache sumber daya aplikasi kita

Di service worker, mari kita tambahkan DATA_CACHE_NAME sehingga kita dapat memisahkan data aplikasi kita dari shell aplikasi. Saat shell aplikasi diperbarui dan cache lama dihapus, data kita akan tetap tak tersentuh, siap untuk memuat yang sangat cepat. Ingat, jika format data Anda berubah di masa mendatang, Anda akan memerlukan cara untuk mengatasinya dan memastikan shell aplikasi dan konten tetap sinkron.

public/service-worker.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 juga perbarui CACHE_NAME; kita akan mengubah semua sumber daya statis kita juga.

Agar aplikasi kita dapat bekerja secara offline, kita perlu melakukan precache semua sumber daya yang dibutuhkan. Ini juga akan membantu kinerja kita. Alih-alih harus mendapatkan semua sumber daya dari jaringan, aplikasi akan dapat memuat semuanya dari cache lokal, menghilangkan ketidakstabilan jaringan.

Perbarui array FILES_TO_CACHE dengan daftar file:

public/service-worker.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 secara manual membuat daftar file ke cache, setiap kali kita memperbarui file, kita harus memperbarui CACHE_NAME . Kita dapat menghapus offline.html dari daftar file cache kita karena aplikasi kita sekarang memiliki semua sumber daya yang diperlukan untuk bekerja offline, dan tidak akan pernah menampilkan halaman offline lagi.

Memperbarui handler event activate

Untuk memastikan event activate tidak sengaja menghapus data kita, activate yang ada didalam service-worker.js, ganti if (key !== CACHE_NAME) { dengan:

public / service-worker.js

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

Perbarui fetch event handler

Kita perlu memodifikasi service worker untuk mencegat permintaan ke API cuaca dan menyimpan respons mereka di cache, sehingga kita dapat dengan mudah mengaksesnya nanti. Dalam strategi stale-while-revalidate, kita berharap respon jaringan menjadi 'sumber kebenaran', selalu memberi kita informasi terbaru. Jika tidak bisa, tidak masalah untuk gagal karena kita telah mengambil data cache terbaru di aplikasi kita.

Perbarui handler event fetch untuk menangani permintaan ke API data secara terpisah dari permintaan lainnya.

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

Kode melakukan intersepsi permintaan dan memeriksa apakah itu untuk ramalan cuaca. Jika ya, gunakan fetch untuk mengajukan permintaan. Setelah respon dikembalikan, buka cache, duplikasi respon, simpan di cache, dan kembalikan respon kepada yang melakukan permintaan.

Kita perlu menghapus centang evt.request.mode !== 'navigate' karena kita ingin service worker kita menangani semua permintaan (termasuk gambar, skrip, file CSS, dll), bukan hanya navigasi. Jika kita meninggalkan check-in itu, hanya HTML yang akan disajikan dari cache service worker, semua yang lain akan diminta dari jaringan.

Coba jalankan

Aplikasi harus benar-benar berfungsi offline sekarang. Refresh halaman untuk memastikan Anda mendapatkan service worker terinstal, kemudian simpan beberapa kota dan tekan tombol refresh pada aplikasi untuk mendapatkan data cuaca baru.

Lalu pergi ke panel Cache Storage pada panel Application dari DevTools. Buka bagian itu dan Anda akan melihat nama cache statis dan cache data Anda tercantum di sebelah kiri. Membuka cache data harus menunjukkan data yang disimpan untuk setiap kota.

731e91776cb6ef18.png

Kemudian, buka DevTools dan beralih ke panel Service Worker, dan centang kotak centang Offline, lalu coba muat ulang halaman, lalu buka offline dan muat ulang halaman.

Jika Anda berada di jaringan yang cepat dan ingin melihat bagaimana cuaca data diperbarui pada koneksi yang lambat, mengatur FORECAST_DELAY properti di server.js ke 5000 . Semua permintaan ke API perkiraan akan ditunda hingga 5.000 ms.

Verifikasi perubahan dengan Lighthouse

Ini juga merupakan ide bagus untuk menjalankan Lighthouse lagi.

SEO Audit

  • ✅ LULUS: Dokumen memiliki deskripsi meta.

Audit Aplikasi Web Progresif

  • ✅ LULUS: Halaman saat ini merespons dengan 200 ketika offline.
  • ✅ LULUS: start_url merespons dengan 200 ketika offline.
  • ✅ LULUS: Mendaftarkan service worker yang mengontrol halaman dan start_url.
  • ✅ LULUS: Manifes aplikasi web memenuhi persyaratan pemasangan.
  • ✅ LULUS: Dikonfigurasi untuk layar splash khusus.
  • ✅ LULUS: Mengatur warna tema address-bar.

Tambahkan pengalaman menginstal

Ketika Aplikasi Web Progresif diinstal, ia terlihat dan berperilaku seperti semua aplikasi lain yang diinstal. Dapat diluncurkan dari tempat yang sama dengan peluncuran aplikasi lain. Dapat berjalan di aplikasi tanpa bilah alamat atau UI browser lainnya. Dan seperti semua aplikasi terpasang lainnya, ini adalah aplikasi tingkat atas di pengalih tugas (task switcher).

d824e1712e46a1cc.png

Di Chrome, Aplikasi Web Progresif dapat dipasang melalui menu konteks tiga titik, atau Anda dapat memberikan tombol atau komponen UI lainnya kepada pengguna yang akan meminta mereka untuk menginstal aplikasi Anda.

Audit dengan Lighthouse

Agar pengguna dapat menginstal Aplikasi Web Progresif Anda, ia harus memenuhi beberapa kriteria. Cara termudah untuk memeriksa adalah menggunakan Lighthouse dan pastikan memenuhi kriteria yang dapat diinstal.

b921f5583fcddf03.png

Jika Anda bekerja melalui codelab ini, PWA Anda harus sudah memenuhi kriteria ini.

Tambahkan install.js ke index.html

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

public/index.html

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

Dengarkan event beforeinstallprompt

Jika menambahkan ke layar beranda kriteria terpenuhi, Chrome akan memecat acara beforeinstallprompt , yang dapat Anda gunakan untuk menunjukkan aplikasi Anda dapat 'diinstal', dan kemudian meminta pengguna untuk menginstalnya. Tambahkan kode di bawah ini untuk mendengarkan event beforeinstallprompt :

public/scripts/install.js

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

Simpan acara dan tampilkan tombol instal

Dalam fungsi saveBeforeInstallPromptEvent kita, kita akan menyimpan referensi ke event beforeinstallprompt sehingga kita dapat memanggil prompt() nanti, dan memperbarui UI kita untuk menunjukkan tombol instal.

public/scripts/install.js

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

Tampilkan prompt / sembunyikan tombol

Ketika pengguna mengklik tombol instal, kita perlu memanggil .prompt() pada event beforeinstallprompt disimpan. Kita juga perlu menyembunyikan tombol instal, karena .prompt() hanya dapat dipanggil satu kali pada setiap event 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 menambahkan aplikasi Anda ke layar beranda.

Catat hasilnya

Anda dapat memeriksa untuk melihat bagaimana pengguna merespon dialog instal dengan mendengarkan promise yang dikembalikan oleh properti userChoice dari event beforeinstallprompt disimpan. Promise mengembalikan objek dengan properti outcome setelah prompt ditampilkan dan pengguna meresponnya.

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 mendefinisikannya sebagai properti , bukan fungsi seperti yang Anda harapkan.

Log semua event instal

Selain UI apa pun yang Anda tambahkan untuk menginstal aplikasi Anda, pengguna juga dapat menginstal PWA Anda melalui metode lain, misalnya menu tiga titik Chrome. Untuk melacak peristiwa ini, dengarkan event appinstalled.

public/scripts/install.js

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

Kemudian, kita perlu memperbarui fungsi logAppInstalled , untuk codelab ini, kita hanya akan menggunakan console.log , tetapi dalam aplikasi sebenarnya, Anda mungkin ingin mencatat ini sebagai event dengan perangkat lunak analitik Anda.

public/scripts/install.js

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

Perbarui service worker

Jangan lupa untuk memperbarui CACHE_NAME di file service-worker.js Anda karena Anda telah membuat perubahan pada file yang sudah di-cache. Mengaktifkan kotak centang Bypass for network di panel Service Worker dari panel Aplikasi di DevTools akan berfungsi dalam pengembangan, tetapi tidak akan membantu di dunia nyata.

Coba jalankan

Mari kita lihat bagaimana langkah instalasi kita. Agar aman, gunakan tombol Clear site data di panel Aplikasi DevTools untuk menghapus semuanya dan pastikan kita mulai baru. Jika sebelumnya Anda menginstal aplikasi, pastikan untuk menghapus instalannya, jika tidak ikon instalasi tidak akan muncul lagi.

Pastikan tombol instal terlihat

Pertama, mari kita verifikasi ikon instal kita muncul dengan benar, pastikan untuk mencoba ini di desktop dan seluler.

  1. Buka URL di tab Chrome baru.
  2. Buka menu tiga titik Chrome (di sebelah bilah alamat). ▢ Pastikan Anda melihat 'Instal Cuaca ...' di menu.
  3. Refresh data cuaca menggunakan tombol refresh di sudut kanan atas untuk memastikan kita memenuhi heuristik keterlibatan pengguna . ▢ Pastikan ikon instal terlihat di header aplikasi.

Verifikasi tombol instal berfungsi

Selanjutnya, mari kita pastikan semuanya terpasang dengan benar, dan event kita terpicu dengan benar. Anda dapat melakukan ini di desktop atau seluler. Jika Anda ingin menguji ini di ponsel, pastikan Anda menggunakan remote debugging sehingga Anda dapat melihat apa yang masuk ke konsol.

  1. Buka Chrome, dan di tab browser baru, navigasikan ke Weather PWA Anda.
  2. Buka DevTools dan alihkan ke panel Console.
  3. Klik tombol install di sudut kanan atas. ▢ Verifikasi tombol instal menghilang ▢ Verifikasi dialog instal modal ditampilkan.
  4. Klik Batal. ▢ Verifikasi 'Pengguna menolak prompt A2HS' ditampilkan di output konsol. ▢ Verifikasi tombol instal muncul kembali.
  5. Klik tombol install lagi, lalu klik tombol install di dialog modal. ▢ Verifikasi 'Pengguna menerima prompt A2HS' ditampilkan di output konsol. ▢ Verifikasi 'Aplikasi Cuaca telah dipasang' ditampilkan di output konsol. ▢ Verifikasi aplikasi Cuaca ditambahkan ke tempat Anda biasanya menemukan aplikasi.
  6. Luncurkan PWA Cuaca. ▢ Verifikasi aplikasi terbuka sebagai aplikasi mandiri, baik di jendela aplikasi di desktop, atau layar penuh di ponsel.

Catatan, jika Anda menjalankan pada desktop dari localhost, PWA yang Anda instal dapat menampilkan spanduk alamat karena localhost tidak dianggap sebagai host yang aman.

Verifikasi instalasi iOS berfungsi dengan baik

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

  1. Buka Safari dan di tab browser baru, navigasikan ke Weather PWA Anda.
  2. Klik tombol Share! 8ac92dd483c689d3.png .
  3. Gulir ke kanan dan klik tombol Add to Home Screen. ▢ Pastikan judul, URL, dan ikonnya benar.
  4. Klik Tambah. ▢ Pastikan ikon aplikasi ditambahkan ke layar beranda.
  5. Luncurkan PWA Cuaca dari layar beranda. ▢ Verifikasi aplikasi meluncurkan layar penuh.

Bonus: Mendeteksi jika aplikasi Anda diluncurkan dari layar beranda

display-mode media display-mode memungkinkan untuk menerapkan gaya tergantung pada bagaimana aplikasi diluncurkan, atau menentukan bagaimana itu diluncurkan dengan JavaScript.

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

Anda juga dapat memeriksa display-mode permintaan media dalam JavaScript untuk melihat apakah berjalan di mode standalone .

Bonus: Menghapus Instalasi PWA Anda

Ingat, beforeinstallevent tidak menyala jika aplikasi sudah diinstal, jadi selama pengembangan Anda mungkin ingin menginstal dan menghapus aplikasi Anda beberapa kali untuk memastikan semuanya berjalan seperti yang diharapkan.

Android

Di Android, PWA dihapus instalasinya dengan cara yang sama seperti aplikasi lain yang diinstal dihapus.

  • Buka app drawer.
  • Gulir ke bawah untuk menemukan ikon Cuaca.
  • Seret ikon aplikasi ke atas layar.
  • Pilih Uninstall

ChromeOS

Di ChromeOS, PWA mudah dihapus dari kotak pencarian peluncur.

  • Buka peluncur.
  • Ketik 'Cuaca' di kotak pencarian, PWA Cuaca Anda akan muncul di hasil.
  • Klik kanan (alt-klik) pada Weather PWA.
  • Klik Hapus dari Chrome ...

macOS dan Windows

Di Mac dan Windows, PWA harus dihapus instalasinya melalui Chrome.

  • Di tab browser baru, buka chrome: // apps.
  • Klik kanan (alt-klik) pada Weather PWA.
  • Klik Hapus dari Chrome ...

Selamat

Selamat, Anda telah berhasil membangun Aplikasi Web Progresif pertama Anda!

Anda menambahkan manifes aplikasi web agar dapat diinstal, dan Anda menambahkan service worker untuk memastikan bahwa PWA Anda selalu cepat, dan dapat diandalkan. Anda belajar cara menggunakan DevTools untuk mengaudit aplikasi dan bagaimana hal itu dapat membantu Anda meningkatkan pengalaman pengguna.

Anda sekarang tahu langkah-langkah kunci yang diperlukan untuk mengubah aplikasi web apa pun menjadi Aplikasi Web Progresif.

Bacaan lebih lanjut

Referensi dokumen

Menemukan masalah, atau memiliki umpan balik?

Bantu kita membuat lab kode kita lebih baik dengan mengirimkan isu hari ini. Dan terimakasih!

Translated by: Riza Fahmi