Ứng dụng web tiến bộ: Nâng cao hiệu suất của PWA

1. Chào mừng bạn

Trong lớp học lập trình này, bạn sẽ dùng một ứng dụng web hiện có và thêm các chức năng nâng cao vào ứng dụng đó. Đây là lớp học lập trình thứ sáu trong loạt lớp học lập trình đi kèm cho hội thảo về Ứng dụng web tiến bộ. Lớp học lập trình trước đây là Nhắc nhở và đo lường lượt cài đặt. Còn 2 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

  • Mở và lưu tệp từ hệ thống tệp của người dùng bằng File System Access API
  • Đăng ký PWA đã cài đặt làm trình xử lý tệp bằng File Handling API
  • Chọn màn hình phù hợp để mở cửa sổ bằng Multi-Screen Window Placement API
  • Ngăn màn hình chuyển sang chế độ ngủ bằng API Khoá chế độ thức trên màn hình

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

  • JavaScript

Bạn cần có

  • Một trình duyệt hỗ trợ các API nêu trên. Đối với một số API, bạn có thể cần sử dụng trình duyệt có Bản dùng thử dành cho nhà phát triển hoặc Bản dùng thử nguồn đang hoạt động để hoàn tất.

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 pwa05--empowering-your-pwa. 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á

  • js/lib/actions.js – Cung cấp một lớp cơ sở cho trình đơn

Lưu ý quan trọng về cấu trúc

Trong suốt lớp học lập trình này, bạn sẽ chỉnh sửa js/lib/action.js để quản lý các thao tác cho nhiều nút trong trình đơn của ứng dụng. Bạn có thể truy cập vào mọi thuộc tính trong hàm khởi tạo của trình đơn đã khởi tạo, bao gồm cả this.editor cho một phiên bản của trình chỉnh sửa văn bản chính. Hai phương thức quan trọng của trình chỉnh sửa mà bạn sẽ sử dụng trong suốt lớp học lập trình này là:

  • this.editor.setContent(content) – Đặt nội dung của trình chỉnh sửa thành đối số nội dung được cung cấp
  • this.editor.content() – Lấy nội dung hiện tại của trình chỉnh sửa

3. Quản lý tệp

Giờ đây, bạn có thể mở, lưu và tạo tệp mới trên máy tính của người dùng nhờ File System Access API. Kết hợp với File Handling API, cho phép người dùng mở tệp ngay trong PWA của bạn, PWA của bạn có thể được tích hợp liền mạch vào cuộc sống hằng ngày của người dùng.

Mở trong ứng dụng

Thao tác đầu tiên cần liên kết là có thể mở một tệp từ hệ thống tệp của người dùng trong ứng dụng. Trong js/lib/actions.js, trong phương thức open của lớp Actions, hãy viết mã thực hiện những thao tác sau:

  • Mở một trình chọn tệp sẽ lấy tệp text/markdown có đuôi .md hoặc .markdown
  • Đặt tiêu đề của trang thành tên của tệp đang mở, cộng với PWA Edit
  • Lưu trữ trình xử lý tệp trong this.handler
  • Đặt nội dung của trình chỉnh sửa thành nội dung văn bản của tệp
  • Lưu trình xử lý vào kho đối tượng settings trong cơ sở dữ liệu settings-store IndexedDB.

Điểm tích cực: Hãy nhớ rằng hàm dựng lớp không thể là hàm async nhưng bạn có thể gọi Promise bên trong các hàm dựng đó.

Giờ đây, bạn có thể mở một tệp và lưu tệp đang mở giữa các lần tải. Bạn cần làm thêm 2 việc nữa: thiết lập lại trình xử lý khi ứng dụng tải và huỷ thiết lập trình xử lý khi người dùng đặt lại ứng dụng.

Để hoàn thành bước đầu tiên, trong hàm khởi tạo của lớp Actions trong js/lib/actions.js, hãy làm như sau:

  • Mở cơ sở dữ liệu settings-store
  • Lấy trình xử lý đã lưu từ kho đối tượng settings
  • Đặt this.handler thành giá trị đã truy xuất và tiêu đề của trang thành tên tệp của trình xử lý (cộng với PWA Edit) nếu có trình xử lý đã lưu

Để đặt lại trạng thái của ứng dụng (có thể thực hiện bằng CTRL/CMD+Shift+R), hãy cập nhật phương thức reset của lớp Actions trong js/lib/actions.js để thực hiện những việc sau:

  • Đặt tiêu đề tài liệu thành PWA Edit
  • Đặt nội dung của trình chỉnh sửa thành một chuỗi trống
  • Đặt this.handler thành null
  • Xoá trình xử lý đã lưu khỏi kho đối tượng settings

Mở từ hệ thống tệp của người dùng

Giờ đây, bạn có thể mở một tệp từ ứng dụng của mình, bạn nên cho phép người dùng mở ứng dụng của bạn bằng tệp của họ! Việc đăng ký làm trình xử lý tệp cho một thiết bị sẽ cho phép người dùng mở tệp trong ứng dụng của bạn ở bất kỳ vị trí nào trong hệ thống tệp của họ.

Tiêu cực : Bạn có thể cần bật Thử nghiệm nguồn gốc hoặc Nhà phát triển để tính năng này hoạt động. Nếu cần bật bản dùng thử dành cho nhà phát triển, bạn nên thực hiện việc này trong bản sao của Chrome Canary thay vì trình duyệt thông thường. Nếu cần bật Thử nghiệm nguồn gốc, bạn nên đăng ký như bình thường và thêm thẻ vào index.html

Để bắt đầu, trong manifest.json, hãy thêm một mục file_handlers thực hiện những việc sau:

  • Mở cửa vào /
  • Chấp nhận text/markdown có đuôi tệp .md hoặc .markdown.

Thao tác này sẽ cho phép người dùng mở tệp bằng ứng dụng của bạn, nhưng sẽ không thực sự mở tệp trong ứng dụng. Để làm như vậy, trong lớp Actions trong js/lib/actions.js, hãy làm như sau:

  • Thêm một người dùng window.launchQueue vào hàm khởi tạo, gọi this.open bằng trình xử lý (nếu có).
  • Cập nhật this.open để chấp nhận một trình xử lý khởi chạy không bắt buộc
    • Nếu tệp đó tồn tại và là một thực thể của FileSystemFileHandle, hãy dùng tệp đó làm trình xử lý tệp cho hàm
    • Nếu không, hãy mở công cụ chọn tệp

Sau khi thực hiện cả hai bước trên, hãy cài đặt PWA và thử mở một tệp bằng PWA đó trong hệ thống tệp!

Lưu tệp

Người dùng có thể muốn thực hiện theo hai đường dẫn lưu khác nhau: lưu các thay đổi vào một tệp đã mở hoặc lưu vào một tệp mới. Với File System Access API, việc lưu vào một tệp mới thực sự là tạo một tệp mới và nhận lại một trình xử lý tệp. Vì vậy, để bắt đầu, hãy lưu từ một trình xử lý hiện có.

Trong phương thức save trong lớp Actions ở js/lib/actions.js, hãy làm như sau:

  • Lấy trình xử lý từ this.handler hoặc nếu không có, hãy lấy trình xử lý đã lưu từ cơ sở dữ liệu
  • Tạo FileSystemWritableFileStream của trình xử lý tệp
  • Ghi nội dung của trình chỉnh sửa vào luồng
  • Đóng luồng dữ liệu

Sau khi bạn có thể lưu một tệp, đã đến lúc triển khai tính năng lưu dưới dạng. Để thực hiện việc này, trong phương thức saveAs trong lớp Actions trong js/lib/actions.js, hãy làm như sau:

  • Hiện bộ chọn tệp lưu, mô tả bộ chọn này là Markdown File và cho phép bộ chọn này chấp nhận các tệp text/markdown có đuôi .md
  • Đặt this.handler thành trình xử lý được trả về
  • Lưu trình xử lý vào kho đối tượng settings
  • Chờ this.save hoàn tất để lưu nội dung vào tệp mới tạo

Sau khi thực hiện xong, hãy quay lại phương thức save, kiểm tra xem handler có tồn tại hay không trước khi cố gắng ghi vào đó và nếu không, hãy đợi this.saveAs hoàn tất.

4. Hiện bản xem trước

Với trình chỉnh sửa Markdown, người dùng muốn xem bản xem trước của đầu ra được kết xuất. Khi dùng Window Management API, bạn sẽ mở bản xem trước nội dung đã kết xuất trên màn hình chính của người dùng.

Trước khi bắt đầu, hãy tạo một tệp js/preview.js rồi thêm đoạn mã sau vào tệp đó để tệp này hiển thị bản xem trước khi được tải:

import { openDB } from 'idb';
import { marked } from 'marked';

window.addEventListener('DOMContentLoaded', async () => {
  const preview = document.querySelector('.preview');
  const db = await openDB('settings-store');
  const content = (await db.get('settings', 'content')) || '';

  preview.innerHTML = marked(content);
});

Bản xem trước sẽ hoạt động theo những cách sau:

  • Khi người dùng nhấp vào nút xem trước và bản xem trước chưa mở, nút này sẽ mở bản xem trước
  • Khi người dùng nhấp vào nút xem trước và bản xem trước mở ra, nút này sẽ đóng bản xem trước
  • Khi người dùng đóng hoặc làm mới PWA, bản xem trước sẽ đóng

Để bắt đầu, hãy chỉnh sửa phương thức preview trong lớp Actions trong js/lib/actions.js để thực hiện những việc sau:

  • Lấy các màn hình hiện có bằng Window Management API
  • Lọc các màn hình để tìm màn hình chính
  • Mở một cửa sổ cho /preview có tiêu đề là Markdown preview, chiếm một nửa chiều rộng và toàn bộ chiều cao có sẵn của màn hình chính, được đặt sao cho chiếm toàn bộ nửa bên phải có sẵn của màn hình đó. Các kích thước có sẵn không bao gồm những vùng dành riêng của màn hình, chẳng hạn như thanh trình đơn, thanh công cụ, trạng thái hoặc vị trí của hệ thống.
  • Lưu cửa sổ đang mở này vào this.previewWindow
  • Ở đầu phương thức, hãy kiểm tra xem this.previewWindow có tồn tại hay không. Nếu có, hãy đóng cửa sổ và huỷ đặt this.previewWindow thay vì mở bản xem trước cửa sổ

Cuối cùng, hãy làm như sau ở cuối hàm khởi tạo của lớp Actions trong js/lib/actions.js:

  • Đóng this.previewWindow trong sự kiện beforeunload

5. Tập trung

Cuối cùng, chúng tôi muốn cung cấp cho người dùng chế độ viết không bị phân tâm. Chế độ không làm phiền không chỉ có nghĩa là không có nội dung lộn xộn từ các ứng dụng khác mà còn ngăn màn hình người dùng chuyển sang chế độ ngủ. Để làm việc này, bạn sẽ sử dụng API Khoá chế độ thức trên màn hình.

Nút khoá đánh thức sẽ hoạt động giống như nút xem trước, chuyển đổi giữa trạng thái bật và tắt. Để thực hiện việc này, trong phương thức focus của lớp Actions trong js/lib/actions.js, hãy làm như sau:

  • Kiểm tra xem tài liệu có phần tử toàn màn hình hay không
  • Nếu có:
    • Thoát khỏi chế độ toàn màn hình
    • Nếu this.wakeLock tồn tại, hãy giải phóng khoá đánh thức và đặt lại this.wakeLock
  • Nếu không:
    • Yêu cầu một sentinel khoá đánh thức và đặt sentinel đó thành this.wakeLock
    • Yêu cầu nội dung của tài liệu chuyển sang chế độ toàn màn hình.

6. Xin chúc mừng!

Bạn đã tìm hiểu cách quản lý tệp hệ thống và tích hợp PWA với hệ thống bằng File System Access API và File Handling API, mở các cửa sổ trên nhiều màn hình bằng Window Management API và ngăn màn hình chuyển sang chế độ ngủ bằng Screen Wake Lock API.

Lớp học lập trình tiếp theo trong loạt bài này là Service Worker Includes