Panduan memulai offline

Codelab ini merupakan bagian dari kursus pelatihan Mengembangkan Progressive Web App yang dikembangkan oleh tim Pelatihan Google Developers. Anda akan mendapatkan manfaat maksimal dari kursus ini jika Anda mengerjakan codelab secara berurutan.

Untuk detail selengkapnya tentang kursus ini, lihat Ringkasan Progressive Web Apps Progressive.

Pengantar

Di lab ini, Anda akan menggunakan Lighthouse untuk mengaudit situs untuk 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
  • Pemahaman tentang Promises 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 versi LTS Node.js, 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, lalu buka localhost:8081/. Anda akan melihat bahwa situs tersebut adalah halaman web yang sederhana dan statis.

Catatan: Batalkan pendaftaran pekerja layanan dan hapus semua cache pekerja layanan untuk localhost sehingga 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 membuat lab.

Folder ini berisi:

  • images/ folder 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 kami mulai melakukan perubahan pada situs, mari kita audit dengan Lighthouse untuk melihat apa yang dapat ditingkatkan.

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

Klik Jalankan audit. Perlu waktu beberapa saat untuk menyelesaikan audit.

Penjelasan

Anda akan melihat laporan yang berisi skor di Developer Tools setelah audit selesai. Anda akan melihat skor, yang terlihat seperti ini (skornya mungkin tidak sama persis):

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

Dan 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 Anda lihat, aplikasi kami memiliki skor buruk dalam kategori Progressive Web App (PWA). Mari kita tingkatkan skor kita!

Luangkan waktu untuk memeriksa bagian PWA pada laporan dan lihat apa yang hilang.

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 sw.js kosong setelah halaman dimuat. Namun, file pekerja layanan saat ini kosong dan tidak akan melakukan apa pun. Mari tambahkan kode layanan di langkah berikutnya.

Resource pra-cache

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

Tambahkan kode berikut ke file pekerja layanan (sw.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 untuk mengaktifkan semua peristiwa, batalkan pendaftaran pekerja layanan dan muat ulang halaman. Jika gagal, tutup semua instance aplikasi lalu buka kembali.

Selanjutnya, hentikan server pengembangan lokal di command line dengan menjalankan Ctrl + c. Muat ulang situs tersebut dan amati bahwa situs dimuat meskipun server 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 offline), tetapi hal tersebut normal karena kita tidak dapat menggunakan pekerja layanan untuk meng-cache itu sendiri. Jika tidak, browser pengguna akan terjebak dengan pekerja layanan 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 meng-cache file yang ditentukan dengan metode cache.addAll. Hal ini disebut "precaching" karena terjadi selama peristiwa install, yang biasanya saat pengguna pertama kali mengunjungi situs Anda.

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

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

Resource dalam cache memungkinkan aplikasi bekerja secara offline dengan menghindari permintaan jaringan. Sekarang aplikasi kita bisa merespons dengan kode status 200 ketika offline!

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

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

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

Catatan: Bagian ini adalah opsional karena pengujian Web App Install Banner berada di luar cakupan lab. Anda dapat mencobanya sendiri dengan menggunakan debug dari jauh.

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

Membuat file Manifes

Buat file di app/ bernama manifest.json, dan 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 di manifes sudah disediakan di aplikasi.

Lalu, 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. Lalu muat ulang halaman. Sekarang pilih bagian Manifes. 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 browser Chrome, ikon layar utama, dan layar pembuka. Aplikasi ini juga dapat digunakan untuk mengonfigurasi aplikasi web Anda agar dibuka 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 subset fitur ini untuk browser tertentu yang belum memiliki dukungan penuh.

Kami harus Menghapus data situs untuk menghapus versi cache lama index.html kami (karena versi tersebut tidak memiliki link manifes). Coba jalankan audit Lighthouse lainnya dan lihat seberapa banyak peningkatan skor PWA!

Mengaktifkan perintah penginstalan

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

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

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

Lalu atur gaya banner dengan menambahkan gaya berikut ke styles/main.css:

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

Simpan file tersebut. 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 tersebut. Buka aplikasi di Chrome pada perangkat Android, menggunakan proses debug 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 dan perintah Add to Home Screen akan muncul. Ikuti langkah-langkah untuk menginstal aplikasi di perangkat. 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 kami gunakan untuk memungkinkan pengguna mengaktifkan perintah penginstalan.

Setelah peristiwa beforeinstallprompt diaktifkan, kami mencegah pengalaman default (dengan Chrome 67 dan versi yang lebih lama secara otomatis meminta pengguna untuk menginstal) dan menangkap beforeinstallevent dalam variabel deferredPrompt global. Tombol "Instal aplikasi" kemudian dikonfigurasi untuk menampilkan pesan dengan metode prompt() beforeinstallevent. Setelah pengguna membuat pilihan (untuk menginstal atau tidak), promise userChoice akan ditetapkan 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 fungsionalitas offline. Jika sudah menyelesaikan bagian opsional, Anda juga mempelajari cara menginstal aplikasi web ke layar utama.

Referensi lainnya

Lighthouse adalah sumber terbuka! Anda dapat menyalinnya, 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/