Nội dung
- Tệp kê khai ứng dụng web - Nhân viên dịch vụ - Kết luận

Thứ năm, 18/07/2019 | 00:00 GMT+7

Biến Gatsby thành PWA: Service Worker và Web App Manifest

Ứng dụng web tiến bộ (PWA) cho phép các nhà phát triển cung cấp trải nghiệm giống như ứng dụng cho user . Kết hợp với hiệu suất hàng đầu của Gatsby.js và bạn sẽ có được một trang web nhanh như chớp.

Các bước trong hướng dẫn này giả sử bạn có một dự án Gatsby đang hoạt động. Vì vậy, nếu bạn chưa có, bạn có thể bắt đầu với Gatsby theo bài viết Các bước đầu tiên của Gatsby . Bạn sẽ đi sâu vào cấu hình trang web.

Tệp kê khai ứng dụng web

Tệp kê khai ứng dụng web là một file JSON ngắn gọn với metadata về ứng dụng web của bạn. Nó cung cấp một số hướng dẫn cho trình duyệt về cách hoạt động khi được cài đặt trên thiết bị của user .

Việc thêm tệp kê khai ứng dụng web vào Gatsby có thể được thực hiện bằng cách cài đặt gatsby-plugin-tệp kê khai :

$ npm install --save gatsby-plugin-manifest

Sau đó, ta có thể thêm plugin vào cấu hình Gatsby của bạn :

gatsby-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Alligator.io`,
        short_name: `Alligator`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FAE042`,
        display: `standalone`,
      },
    },
  ],
}

Bây giờ ta hãy xem xét một số tùy chọn để cấu hình tệp kê khai ứng dụng web của ta .

Biểu tượng

Ta có thể xác định một tập hợp các biểu tượng để trình duyệt sử dụng khi ứng dụng được lưu vào màn hình chính của user . Có ba tùy chọn có sẵn để ta làm như vậy.

1. Tự động

Có hai tùy chọn tự động có sẵn. Với cách đầu tiên, ta cần cung cấp cho Gatsby.js kích thước biểu tượng lớn nhất với các yêu cầu sau:

Kích thước tối thiểu 512x512.
Bình phương. Nếu nó không trong suốt, các thanh sẽ tự động được thêm vào để làm cho nó như vậy.
Một trong các định dạng sau: JPEG, PNG, WebP, TIFF, GIF hoặc SVG.

Sau đó, ta thêm dòng sau vào các tùy chọn của plugin:

gatsby-config.js

icon: `src/images/icon.png`,

Gatsby sẽ tạo một bộ biểu tượng được cấu hình trước từ nguồn được cung cấp.

2. Lai

Tùy chọn kết hợp cho phép ta linh hoạt hơn một chút về các biểu tượng được tạo tự động. Ta tuân theo yêu cầu tương tự như trước đây cho file nguồn. Và thêm phần sau vào các tùy chọn plugin:

gatsby-config.js

icon: `src/images/icon.png`, 
icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

Tại đây, ta có thể cung cấp các cấu hình mảng icons cho các kích thước biểu tượng mong muốn.

3. Hướng dẫn sử dụng

Với chế độ thủ công, ta chịu trách nhiệm cung cấp các biểu tượng mong muốn trong folder tĩnh , cũng như xác định toàn bộ tệp kê khai ứng dụng web .

Ta chỉ định kích thước biểu tượng trong tùy chọn của plugin, đồng thời bỏ qua cài đặt icon .

gatsby-config.js

icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

Có một số tùy chọn khác có sẵn để overrides các giá trị mặc định, chẳng hạn như bản địa hóa và tìm nạp dữ liệu, bạn có thể tìm thấy các tùy chọn này trên trang của gói trên trang web npm . Tôi cũng khuyên bạn nên truy cập các nguyên tắc cơ bản về Tệp kê khai ứng dụng web để hiểu sâu hơn về những gì mỗi tùy chọn có thể làm.

Nhân viên dịch vụ

Bây giờ ta đã có sẵn tệp kê khai ứng dụng web , hãy xem cách ta có thể tạo Service Worker cho trang web của bạn . Để bắt đầu, hãy cài đặt gatsby-plugin-offline :

$ npm install --save gatsby-plugin-offline

Sau đó, ta có thể thêm phần sau vào cấu hình Gatsby của bạn :

gatsby-config.js

plugins: [`gatsby-plugin-offline`]

Quan trọng: Để tệp kê khai ứng dụng web được lưu vào bộ nhớ cache, ta cần liệt kê gatsby-plugin-manifest TRƯỚC khi gatsby-plugin-offline .

Plugin tạo ra một nhân viên dịch vụ cho ta bằng cách tận dụng thư viện Workbox của Google. Ta nhận được bộ nhớ đệm file tự động, cho phép các trang khả dụng offline sau lần truy cập đầu tiên của user .

Nếu có một nhu cầu cụ thể nào đó đối với trang web đòi hỏi thêm một chút từ nhân viên dịch vụ , bạn có thể overrides các tùy chọn mặc định bằng cấu hình hộp làm việc . Tuy nhiên, hãy nhớ rằng những thay đổi đối với mặc định có thể phá vỡ hỗ trợ offline . Hãy chắc chắn xem qua các tài nguyên được liên kết để biết thêm thông tin.

Xóa Nhân viên Dịch vụ

Nếu bạn thấy rằng cần phải tắt chức năng offline , bạn có thể xóa nhân viên dịch vụ bằng cách sử dụng gatsby-plugin-remove-serviceworker .

Để làm như vậy, trước tiên bạn cần cài đặt plugin gỡ bỏ và gỡ cài đặt gatsby-plugin-offline :

$ npm install gatsby-plugin-remove-serviceworker
$ npm uninstall gatsby-plugin-offline

Sau đó, bạn có thể cập nhật cấu hình Gatsby:

gatsby-config.js

 plugins: [
-  `gatsby-plugin-offline`,
+  `gatsby-plugin-remove-serviceworker`,
 ]

Điều này sẽ đảm bảo nhân viên dịch vụ được hủy đăng ký đúng cách.

Kết luận

Việc thêm hỗ trợ offline cho Gatsby sẽ mở ra rất nhiều khả năng. Những thứ như duyệt offline , nội dung được lưu trong bộ nhớ cache để có thời gian tải nhanh hơn và lưu trang web vào màn hình chính trên thiết bị di động để dễ dàng tiếp cận hơn. Bạn có thể làm được nhiều việc hơn với các plugin này và tôi thực sự khuyến khích bạn đọc các tài nguyên được liên kết trong suốt bài viết.

Tags:

Các tin liên quan

Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23
Cách cạo các trang web và đăng nội dung lên Twitter bằng Python 3
2019-04-22
module Web tích hợp: Cách sử dụng KV Storage
2019-03-22
Cách thu thập thông tin một trang web với Scrapy và Python 3
2019-03-20
Cách cạo các trang web với Beautiful Soup và Python 3
2019-03-20
Cách sử dụng API Web trong Python 3
2019-03-20
Tạo ứng dụng web tiến bộ (PWA) với React
2019-03-02
Tụ điện: Chạy ứng dụng web trên thiết bị di động
2019-02-27