Progressive Web App: Dari Tab ke Taskbar

1. Selamat Datang

Dalam lab ini, Anda akan mengambil aplikasi web yang ada dan membuatnya dapat diinstal. Ini adalah codelab keempat dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah IndexedDB. Ada empat codelab lagi dalam seri ini.

Yang akan Anda pelajari

  • Menulis Service Worker secara manual
  • Menambahkan Service Worker ke aplikasi web yang sudah ada
  • Menggunakan Service Worker dan Cache Storage API untuk membuat resource tersedia secara offline

Yang perlu Anda ketahui

  • HTML dan JavaScript dasar

Yang akan Anda butuhkan

2. Memulai Persiapan

Mulai dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa04--tab-to-taskbar. File ZIP juga berisi kode untuk cabang tersebut.

Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan codelab.

File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:

File Utama

  • index.html - HTML aplikasi utama

3. Membuat Manifes Aplikasi Web

File manifes aplikasi web menjelaskan PWA Anda sehingga, bersama dengan Service Worker yang berfungsi, browser mengetahui bahwa aplikasi web Anda dapat diinstal dan, yang penting, cara menampilkannya di perangkat tempat aplikasi tersebut akan diinstal. Namun, Anda harus membuatnya terlebih dahulu. Tambahkan file bernama manifest.json ke folder public di aplikasi web Anda, lalu tambahkan kode berikut ke dalamnya:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Jangan lupa menyertakan ikon sentuh Apple untuk perangkat iOS. Tambahkan baris kode berikut tepat setelah tag <title> di <head> dalam index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Penjelasan

Manifes ini mencakup kolom wajib diisi, direkomendasikan, dan promosi, jadi ada banyak hal yang perlu diperhatikan. Pertama, kolom wajib diisi tempat nama, URL mulai, mode tampilan, dan ikon PWA ditentukan. Perhatikan bahwa ikon terakhir adalah ikon yang dapat di-masking, sehingga memungkinkan beberapa tampilan ikon berdasarkan UI perangkat. Selanjutnya, ada kolom warna tema dan latar belakang yang direkomendasikan. Terakhir, ada kolom promosi, deskripsi, dan kategori yang sesuai dengan PWA ini. Jika manifes ini dilampirkan ke PWA, kolom ini akan mengontrol cara aplikasi PWA yang diinstal ditampilkan dan dikelola.

4. Melampirkan Manifes ke PWA

Setelah file manifes dibuat, file tersebut harus dilampirkan agar dikaitkan dengan PWA. Untuk melakukannya, buka index.html dan tambahkan kode berikut tepat di bawah tag <title> di <head>:

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

Penjelasan

Link manifes akan memberi tahu browser yang mendukungnya bahwa manifes aplikasi web yang ditautkan menjelaskan situs saat ini. Jika valid dan tersedia, dengan pekerja layanan yang berfungsi, dan setelah aplikasi web lulus kriteria penginstalan khusus browser tambahan, aplikasi Anda dapat diinstal langsung ke perangkat pengguna.

5. Menambahkan Pintasan

Salah satu cara terbaik untuk membuat PWA Anda terasa lebih terintegrasi dengan perangkat adalah dengan menyediakan pintasan menu konteks ke fungsi tertentu di aplikasi Anda. Tombol Mode Malam di PWA memungkinkan pemilihan mode dengan menyetel parameter kueri mode ke night atau day. Siapkan dua pintasan di manifest.json yang melakukan hal berikut:

  • Memulai PWA dalam mode night atau day
  • Menggunakan /images/logo.svg pada ukuran 150x150 untuk ikon

6. Selamat!

Anda baru saja mempelajari cara membuat file manifes aplikasi web, melampirkannya ke halaman web, dan menambahkan pintasan aplikasi saat diinstal.

Codelab berikutnya dalam seri ini adalah Mendorong & Mengukur Penginstalan