Ứng dụng web tiến bộ: Từ thẻ đến thanh tác vụ

1. Chào mừng bạn

Trong lớp học này, bạn sẽ lấy một ứng dụng web hiện có và làm cho ứng dụng đó có thể cài đặt. Đây là lớp học lập trình thứ tư trong loạt lớp học lập trình đồng hành cho hội thảo về Ứng dụng web tiến bộ. Lớp học lập trình trước là IndexedDB. Còn 4 lớp học lập trình nữa trong loạt lớp học lập trình này.

Kiến thức bạn sẽ học được

  • Viết Service Worker theo cách thủ công
  • Thêm Service Worker vào một ứng dụng web hiện có
  • Sử dụng Service Worker và Cache Storage API để cung cấp tài nguyên khi không có mạng

Những điều bạn cần biết

  • HTML và JavaScript cơ bản

Bạn cần có

2. Bắt đầu thiết lập

Bắt đầu bằng cách sao chép hoặc tải mã khởi đầu cần thiết để hoàn tất lớp học lập trình này:

Nếu bạn sao chép repo, hãy đảm bảo rằng bạn đang ở nhánh pwa04--tab-to-taskbar. Tệp zip cũng chứa mã cho nhánh đó.

Cơ sở mã này yêu cầu Node.js 14 trở lên. Sau khi có mã, hãy chạy npm ci từ dòng lệnh trong thư mục mã để cài đặt tất cả các phần phụ thuộc mà bạn sẽ cần. Sau đó, hãy chạy npm start để khởi động máy chủ phát triển cho lớp học lập trình.

Tệp README.md của mã nguồn cung cấp nội dung giải thích cho tất cả các tệp được phân phối. Ngoài ra, sau đây là các tệp hiện có chính mà bạn sẽ sử dụng trong suốt lớp học lập trình này:

Tệp khoá

  • index.html – HTML của ứng dụng chính

3. Tạo tệp kê khai ứng dụng web

Tệp kê khai ứng dụng web mô tả PWA của bạn để cùng với một Service Worker đang hoạt động, trình duyệt biết rằng ứng dụng web của bạn có thể cài đặt và quan trọng là cách trình bày trên thiết bị mà ứng dụng sẽ được cài đặt. Tuy nhiên, trước tiên, bạn cần tạo một tài khoản. Thêm một tệp có tên là manifest.json vào thư mục public của ứng dụng web và thêm nội dung sau vào tệp đó:

{
  "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"]
}

Đừng quên thêm biểu tượng cảm ứng của Apple cho các thiết bị iOS. Thêm dòng mã sau ngay sau thẻ <title> trong <head> trong index.html

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

Giải thích

Tệp kê khai này bao gồm các trường bắt buộc, được đề xuất và khuyến mãi, vì vậy có rất nhiều việc cần làm. Trước tiên, các trường bắt buộc nơi tên, URL bắt đầu, chế độ hiển thị và biểu tượng của PWA được xác định. Xin lưu ý rằng biểu tượng cuối cùng là biểu tượng có thể che phủ, cho phép hiển thị nhiều biểu tượng dựa trên giao diện người dùng của thiết bị. Tiếp theo là các trường màu nền và giao diện được đề xuất. Cuối cùng là các trường khuyến mãi, nội dung mô tả và danh mục mà PWA này phù hợp. Khi tệp kê khai này được đính kèm vào một PWA, các trường này sẽ kiểm soát cách ứng dụng đã cài đặt của PWA được hiển thị và quản lý.

4. Đính kèm tệp kê khai vào PWA

Sau khi tạo tệp kê khai, bạn cần đính kèm tệp đó để liên kết với PWA. Để thực hiện việc này, hãy mở index.html rồi thêm nội dung sau ngay bên dưới thẻ <title> trong <head>:

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

Giải thích

Đường liên kết đến tệp kê khai sẽ cho trình duyệt hỗ trợ biết rằng tệp kê khai ứng dụng web được liên kết mô tả trang web hiện tại. Khi hợp lệ và có sẵn, có trình chạy dịch vụ đang hoạt động và sau khi ứng dụng web vượt qua mọi tiêu chí cài đặt bổ sung dành riêng cho trình duyệt, ứng dụng web sẽ cho phép cài đặt ứng dụng của bạn trực tiếp vào thiết bị của người dùng!

5. Thêm lối tắt

Một trong những cách hiệu quả để giúp PWA tích hợp sâu hơn với thiết bị là cung cấp các lối tắt trong trình đơn theo bối cảnh cho các chức năng cụ thể trong ứng dụng của bạn. Nút bật/tắt Chế độ ban đêm trong PWA cho phép chọn chế độ bằng cách đặt tham số truy vấn mode thành night hoặc day. Thiết lập 2 phím tắt trong manifest.json để thực hiện những thao tác sau:

  • Khởi động PWA ở chế độ night hoặc day
  • Sử dụng /images/logo.svg ở kích thước 150x150 cho biểu tượng

6. Xin chúc mừng!

Bạn vừa tìm hiểu cách tạo tệp kê khai ứng dụng web, đính kèm tệp đó vào một trang web và thêm lối tắt ứng dụng khi ứng dụng được cài đặt.

Lớp học lập trình tiếp theo trong loạt lớp học này là Nhắc nhở và đo lường lượt cài đặt