Mengembangkan Progressive Web App 02.0: Panduan memulai offline

Codelab ini adalah bagian dari kursus pelatihan Developing Progressive Web Apps, yang dikembangkan oleh tim Pelatihan Google Developers. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan.

Untuk mengetahui detail lengkap tentang kursus ini, lihat Ringkasan Pengembangan Progressive Web App.

Pengantar

Dalam lab ini, Anda akan menggunakan Lighthouse untuk mengaudit situs berdasarkan standar Progressive Web App (PWA). Anda juga akan menambahkan fungsi offline dengan API pekerja layanan.

Yang akan Anda pelajari

  • Cara mengaudit situs dengan Lighthouse
  • Cara menambahkan kemampuan offline ke aplikasi

Yang perlu Anda ketahui

  • HTML, CSS, dan JavaScript dasar
  • Memahami Promise ES2015

Yang akan Anda butuhkan

  • Komputer dengan akses terminal/shell
  • Koneksi ke internet
  • Browser Chrome (untuk menggunakan Lighthouse)
  • Editor teks
  • Opsional: Chrome di perangkat Android

Download atau clone repositori pwa-training-labs dari github dan instal Node.js versi LTS, jika diperlukan.

Buka direktori offline-quickstart-lab/app/ dan mulai server pengembangan lokal:

cd offline-quickstart-lab/app
npm install
node server.js

Anda dapat menghentikan server kapan saja dengan Ctrl-c.

Buka browser Anda, lalu buka localhost:8081/. Anda akan melihat bahwa situs tersebut adalah halaman web statis dan sederhana.

Catatan: Batalkan pendaftaran pekerja layanan dan hapus semua cache pekerja layanan untuk localhost agar tidak mengganggu lab. Di Chrome DevTools, Anda dapat melakukannya dengan mengklik Hapus data situs dari bagian Hapus penyimpanan di tab Aplikasi.

Buka folder offline-quickstart-lab/app/ di editor teks pilihan Anda. Folder app/ adalah tempat Anda akan membangun lab.

Folder ini berisi:

  • Folder images/ berisi contoh gambar
  • styles/main.css adalah stylesheet utama
  • index.html adalah halaman HTML utama untuk situs contoh kami
  • package-lock.json dan package.json melacak dependensi aplikasi (satu-satunya dependensi dalam kasus ini adalah untuk server pengembangan lokal)
  • server.js adalah server pengembangan lokal untuk pengujian
  • service-worker.js adalah file pekerja layanan (saat ini kosong)

Sebelum kita mulai melakukan perubahan pada situs, mari kita lakukan audit dengan Lighthouse untuk melihat apa yang dapat ditingkatkan.

Kembali ke aplikasi (di Chrome) dan buka tab Audits di Developer Tools. Anda akan melihat ikon Lighthouse dan opsi konfigurasi. Pilih "Seluler" untuk Perangkat, pilih semua Audit, pilih salah satu opsi Pembatasan, lalu pilih Hapus penyimpanan:

Klik Jalankan audit. Audit memerlukan waktu beberapa saat untuk diselesaikan.

Penjelasan

Anda akan melihat laporan dengan skor di Alat Developer setelah audit selesai. Skor akan ditampilkan, seperti ini (skor mungkin tidak sama persis):

Catatan: Skor Lighthouse adalah perkiraan dan dapat dipengaruhi oleh lingkungan Anda (misalnya, jika Anda membuka banyak jendela browser). Skor Anda mungkin tidak sama persis dengan yang ditampilkan di sini.

Bagian Progressive Web App akan terlihat seperti ini:

Laporan ini memiliki skor dan metrik dalam lima kategori:

  • Progressive Web App
  • Performa
  • Aksesibilitas
  • Praktik Terbaik
  • SEO

Seperti yang dapat Anda lihat, aplikasi kami mendapat skor buruk dalam kategori Progressive Web App (PWA). Ayo tingkatkan skor kita!

Luangkan waktu sejenak untuk melihat bagian PWA dalam laporan dan melihat apa yang kurang.

Mendaftarkan pekerja layanan

Salah satu kegagalan yang tercantum dalam laporan adalah tidak ada pekerja layanan yang terdaftar. Saat ini kita memiliki file pekerja layanan kosong di app/service-worker.js.

Tambahkan skrip berikut ke bagian bawah index.html, tepat sebelum tag </body> penutup:

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js')
      .then(reg => {
        console.log('Service worker registered! 😎', reg);
      })
      .catch(err => {
        console.log('😥 Service worker registration failed: ', err);
      });
  });
}
</script>

Penjelasan

Kode ini mendaftarkan file pekerja layanan service-worker.js kosong setelah halaman dimuat. Namun, file pekerja layanan saat ini kosong dan tidak akan melakukan apa pun. Mari kita tambahkan kode layanan di langkah berikutnya.

Melakukan pra-cache resource

Kegagalan lain yang tercantum dalam laporan adalah aplikasi tidak merespons dengan kode status 200 saat offline. Kita perlu mengupdate pekerja layanan untuk mengatasi masalah ini.

Tambahkan kode berikut ke file pekerja layanan (service-worker.js): 

const cacheName = 'cache-v1';
const precacheResources = [
  '/',
  'index.html',
  'styles/main.css',
  'images/space1.jpg',
  'images/space2.jpg',
  'images/space3.jpg'
];

self.addEventListener('install', event => {
  console.log('Service worker install event!');
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        return cache.addAll(precacheResources);
      })
  );
});

self.addEventListener('activate', event => {
  console.log('Service worker activate event!');
});

self.addEventListener('fetch', event => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(caches.match(event.request)
    .then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }
        return fetch(event.request);
      })
    );
});

Sekarang kembali ke browser dan muat ulang situs. Periksa konsol untuk melihat bahwa pekerja layanan:

  • terdaftar
  • terinstal
  • aktif

Catatan: Jika Anda sudah mendaftarkan pekerja layanan sebelumnya, atau mengalami masalah saat memicu semua peristiwa, batalkan pendaftaran pekerja layanan dan muat ulang halaman. Jika gagal, tutup semua instance aplikasi dan buka kembali.

Selanjutnya, hentikan server pengembangan lokal di command line dengan menjalankan Ctrl + c. Muat ulang situs lagi dan amati bahwa situs dimuat meskipun server sedang offline.

Catatan: Anda mungkin melihat error konsol yang menunjukkan bahwa pekerja layanan tidak dapat diambil: An unknown error occurred when fetching the script. service-worker.js Failed to load resource: net::ERR_CONNECTION_REFUSED. Error ini ditampilkan karena browser tidak dapat mengambil skrip pekerja layanan (karena situs sedang offline), tetapi hal ini sudah diperkirakan karena kita tidak dapat menggunakan pekerja layanan untuk meng-cache dirinya sendiri. Jika tidak, browser pengguna akan terus menggunakan service worker yang sama selamanya.

Penjelasan

Setelah pekerja layanan didaftarkan oleh skrip pendaftaran di index.html, peristiwa install pekerja layanan akan terjadi. Selama peristiwa ini, pemroses peristiwa install membuka cache bernama, dan menyimpan file yang ditentukan dengan metode cache.addAll. Hal ini disebut "pra-pengambilan cache" karena terjadi selama peristiwa install, yang biasanya merupakan pertama kalinya pengguna mengunjungi situs Anda.

Setelah pekerja layanan diinstal, dan jika pekerja layanan lain saat ini tidak mengontrol halaman, pekerja layanan baru akan "diaktifkan" (pemroses peristiwa activate dipicu di pekerja layanan) dan mulai mengontrol halaman.

Saat resource diminta oleh halaman yang dikontrol oleh pekerja layanan yang diaktifkan, permintaan akan melewati pekerja layanan, seperti proxy jaringan. Peristiwa fetch dipicu untuk setiap permintaan. Di pekerja layanan kami, pemroses peristiwa fetch menelusuri cache dan merespons dengan resource yang di-cache jika tersedia. Jika resource tidak di-cache, resource akan diminta secara normal.

Dengan menyimpan resource dalam cache, aplikasi dapat berfungsi secara offline dengan menghindari permintaan jaringan. Sekarang, aplikasi kita dapat merespons dengan kode status 200 saat offline.

Catatan: Peristiwa aktivasi tidak digunakan untuk apa pun selain login dalam contoh ini. Peristiwa ini disertakan untuk membantu men-debug masalah siklus proses pekerja layanan.

Opsional: Anda juga dapat melihat resource yang di-cache di tab Application pada Developer Tools dengan meluaskan bagian Cache Storage:

Mulai ulang server pengembangan dengan node server.js dan muat ulang situs. Kemudian, buka kembali tab Audits di Developer Tools, dan jalankan kembali audit Lighthouse dengan memilih New Audit (tanda plus di sudut kiri atas). Setelah audit selesai, Anda akan melihat bahwa skor PWA kita jauh lebih baik, tetapi masih dapat ditingkatkan. Kita akan terus meningkatkan skor di bagian berikutnya.

Catatan: Bagian ini bersifat opsional karena pengujian Banner Penginstalan Aplikasi Web berada di luar cakupan lab. Anda dapat mencobanya sendiri dengan menggunakan debug jarak jauh.

Skor PWA kita masih belum bagus. Beberapa kegagalan yang tersisa yang tercantum dalam laporan adalah pengguna tidak akan diminta untuk menginstal aplikasi web kami, dan kami belum mengonfigurasi layar pembuka atau warna merek di kolom URL. Kita dapat memperbaiki masalah ini dan menerapkan Tambahkan ke Layar Utama secara progresif dengan memenuhi beberapa kriteria tambahan. Yang terpenting, kita perlu membuat file manifes.

Membuat file Manifes

Buat file di app/ bernama manifest.json, lalu tambahkan kode berikut: 

{
  "name": "Space Missions",
  "short_name": "Space Missions",
  "lang": "en-US",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#FF9800",
  "background_color": "#FF9800",
  "icons": [
    {
      "src": "images/touch/icon-128x128.png",
      "sizes": "128x128"
    },
    {
      "src": "images/touch/icon-192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "images/touch/icon-256x256.png",
      "sizes": "256x256"
    },
    {
      "src": "images/touch/icon-384x384.png",
      "sizes": "384x384"
    },
    {
      "src": "images/touch/icon-512x512.png",
      "sizes": "512x512"
    }
  ]
}

Gambar yang direferensikan dalam manifes sudah disediakan di aplikasi.

Kemudian, tambahkan HTML berikut ke bagian bawah tag <head> di index.html:

<link rel="manifest" href="manifest.json">

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Space Missions">
<meta name="apple-mobile-web-app-title" content="Space Missions">
<meta name="theme-color" content="#FF9800">
<meta name="msapplication-navbutton-color" content="#FF9800">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="apple-touch-icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="icon" sizes="192x192" href="icon-192x192.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/touch/icon-192x192.png">
<link rel="icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="apple-touch-icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="apple-touch-icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="icon" sizes="512x512" href="/images/touch/icon-512x512.png">
<link rel="apple-touch-icon" sizes="512x512" href="/images/touch/icon-512x512.png">

Kembali ke situs. Di tab Application pada Developer Tools, pilih bagian Clear storage, lalu klik Clear site data. Kemudian, muat ulang halaman. Sekarang, pilih bagian Manifest. Anda akan melihat ikon dan opsi konfigurasi yang dikonfigurasi dalam file manifest.json. Jika Anda tidak melihat perubahan, buka situs di jendela samaran dan periksa lagi.

Penjelasan

File manifest.json memberi tahu browser cara menata gaya dan memformat beberapa aspek progresif aplikasi Anda, seperti chrome browser, ikon layar utama, dan layar pembuka. Hal ini juga dapat digunakan untuk mengonfigurasi aplikasi web Anda agar terbuka dalam mode standalone, seperti yang dilakukan aplikasi native (dengan kata lain, di luar browser).

Dukungan masih dalam pengembangan untuk beberapa browser pada saat penulisan ini, dan tag <meta> mengonfigurasi sebagian fitur ini untuk browser tertentu yang belum memiliki dukungan penuh.

Kami harus Menghapus data situs untuk menghapus versi index.html yang di-cache lama (karena versi tersebut tidak memiliki link manifes). Coba jalankan audit Lighthouse lain dan lihat seberapa besar peningkatan skor PWA.

Mengaktifkan perintah penginstalan

Langkah berikutnya untuk menginstal aplikasi kami adalah menampilkan dialog penginstalan kepada pengguna. Chrome 67 meminta pengguna secara otomatis, tetapi mulai Chrome 68, perintah penginstalan harus diaktifkan secara terprogram sebagai respons terhadap gestur pengguna.

Tambahkan tombol dan banner "Instal aplikasi" ke bagian atas index.html (tepat setelah tag <main>) dengan kode berikut:

<section id="installBanner" class="banner">
    <button id="installBtn">Install app</button>
</section>

Kemudian, desain banner dengan menambahkan gaya berikut ke styles/main.css:

.banner {
  align-content: center;
  display: none;
  justify-content: center;
  width: 100%;
}

Simpan file. Terakhir, tambahkan tag skrip berikut ke index.html:

  <script>
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', event => {

      // Prevent Chrome 67 and earlier from automatically showing the prompt
      event.preventDefault();

      // Stash the event so it can be triggered later.
      deferredPrompt = event;

      // Attach the install prompt to a user gesture
      document.querySelector('#installBtn').addEventListener('click', event => {

        // Show the prompt
        deferredPrompt.prompt();

        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice
          .then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
              console.log('User accepted the A2HS prompt');
            } else {
              console.log('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
          });
      });

      // Update UI notify the user they can add to home screen
      document.querySelector('#installBanner').style.display = 'flex';
    });
  </script>

Simpan file. Buka aplikasi di Chrome pada perangkat Android, menggunakan pen-debug-an jarak jauh. Saat halaman dimuat, Anda akan melihat tombol "Instal aplikasi" (Anda tidak akan melihatnya di desktop, jadi pastikan Anda mengujinya di perangkat seluler). Klik tombol tersebut dan perintah Tambahkan ke Layar Utama akan muncul. Ikuti langkah-langkah untuk menginstal aplikasi di perangkat Anda. Setelah penginstalan, Anda dapat membuka aplikasi web dalam mode mandiri (di luar browser) dengan mengetuk ikon layar utama yang baru dibuat.

Penjelasan

Kode HTML & CSS menambahkan banner dan tombol tersembunyi yang dapat kita gunakan untuk mengizinkan pengguna mengaktifkan perintah penginstalan.

Setelah peristiwa beforeinstallprompt diaktifkan, kita mencegah pengalaman default (di mana Chrome 67 dan yang lebih lama otomatis meminta pengguna untuk menginstal) dan mengambil beforeinstallevent dalam variabel deferredPrompt global. Tombol "Instal aplikasi" kemudian dikonfigurasi untuk menampilkan perintah dengan metode prompt() beforeinstallevent. Setelah pengguna membuat pilihan (untuk menginstal atau tidak), userChoice promise akan diselesaikan dengan pilihan pengguna (outcome). Terakhir, kita menampilkan tombol instal setelah semuanya siap.

Anda telah mempelajari cara mengaudit situs dengan Lighthouse, dan cara menerapkan dasar-dasar fungsi offline. Jika Anda menyelesaikan bagian opsional, Anda juga telah mempelajari cara menginstal aplikasi web ke layar utama.

Referensi lainnya

Lighthouse bersifat open source. Anda dapat membuat fork, menambahkan pengujian Anda sendiri, dan melaporkan bug. Lighthouse juga tersedia sebagai alat command line untuk integrasi dengan proses build.

Untuk melihat semua codelab dalam kursus pelatihan PWA, lihat codelab Selamat datang untuk kursus ini.