Tạo ứng dụng web tiến bộ (PWA) với React

Ứng dụng web tiến bộ , hoặc PWA, cho phép các nhà phát triển web tạo ứng dụng web có thể hoạt động giống ứng dụng root hơn.

Một điểm hấp dẫn lớn của PWA là chúng có thể hoạt động với kết nối mạng kém, hoặc thậm chí hoàn toàn không có kết nối! Họ thực hiện điều này bằng cách lưu vào bộ nhớ đệm các nội dung của ứng dụng web và - khi có thể - download bất kỳ bản cập nhật nào trong nền. Một lợi ích khác của PWA là chúng cho phép ứng dụng web truy cập các tính năng root như thông báo đẩy. Chúng cũng có thể được thêm vào màn hình chính của user để dễ dàng truy cập.

Trong hướng dẫn ngắn này, ta sẽ xem xét cách tạo PWA bằng React và create-react-app .

Bắt đầu

Để bắt đầu, ta sẽ bắt đầu một dự án mới bằng Tạo ứng dụng React.

$ yarn create react-app my-app-name

Lưu ý ở đây ta đang sử dụng lệnh tạo từ Yarn .

Tiếp theo, ta sẽ mở src/index.js . Tất cả những gì ta phải làm là thay đổi unregister để register service worker, vì service worker hiện được chọn tham gia theo mặc định thay vì chọn không tham gia:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// Changed from 'unregister' to 'register'
serviceWorker.register();

Đó là nó! Ta đã kích hoạt nhân viên dịch vụ của bạn và ứng dụng React của ta giờ sẽ hoạt động offline . Tuy nhiên, nó sẽ chỉ hoạt động trong môi trường production , vì vậy nếu bạn muốn dùng thử, trước tiên bạn phải tạo một bản dựng:

$ yarn build

# If you'd like to serve it locally:
$ yarn global add serve
$ serve -s build

Cũng nên nhớ rằng ứng dụng sẽ hoạt động offline và vỏ của nó sẽ luôn có thể truy cập được, nhưng điều đó cũng không phải là điều kỳ diệu và dữ liệu mới cần được tìm nạp qua Ajax vì một phần chức năng của ứng dụng sẽ không được tìm nạp khi offline . Vì vậy, bạn cần tạo dự phòng và thông báo ứng dụng / chúc mừng xung quanh đó để thông báo cho user của bạn.

Và nếu bạn muốn tùy chỉnh cách PWA hiển thị với user , bạn có thể chỉnh sửa file kê khai ứng dụng web tại public/manifest.json . Tại đây, bạn có thể đặt tên, biểu tượng và chủ đề cho ứng dụng của bạn .

Cảnh báo

Việc chuyển đổi ứng dụng Create React App sang PWA cực kỳ đơn giản, nhưng nó được chọn tham gia vì một lý do chính đáng. Trước khi triển khai PWA của bạn, có một số điều rất quan trọng mà bạn phải biết.

Đầu tiên là bạn cần cung cấp ứng dụng web của bạn qua HTTPS. Service worker chỉ làm việc trên các ứng dụng web được cung cấp qua HTTPS, với ngoại lệ duy nhất là khi bạn đang thử nghiệm trên localhost.

Thứ hai, không thể cập nhật nội dung đã lưu trong bộ nhớ cache cho đến khi tất cả các tab đang mở bị đóng. Điều này là do có thể có vấn đề nếu các tab khác nhau đang chạy các version khác nhau của nhân viên dịch vụ của bạn. Đây là điều mà user có thể không hiểu ngay lập tức, điều này sẽ đưa ta đến điểm tiếp theo.

Cuối cùng, user có thể không quen với các ứng dụng web tiến bộ. Do đó, điều quan trọng là phải tạo một thông báo cho user thông báo rằng ứng dụng hoạt động offline hoặc ứng dụng không thể cập nhật cho đến khi tất cả các tab khác bị đóng. Để thực hiện việc này, bạn có thể sửa đổi file nằm tại src/serviceWorker.js . Theo mặc định, file này chỉ in thông tin này bằng console.log , nhưng bạn muốn thêm một số chức năng tùy chỉnh để thực sự hiển thị những thông báo này cho user của bạn .

Tìm hiểu thêm

Đây chỉ là một phần giới thiệu ngắn gọn để kích thích sự thèm ăn của bạn và đây là một số tài nguyên khác về các ứng dụng web tiến bộ và cách sử dụng chúng với Create React App:

Tạo ứng dụng web tiến bộ từ tài liệu Tạo ứng dụng phản ứng.
Tổng quan về PWA của Google.

Tags:

Các tin liên quan

Tụ điện: Chạy ứng dụng web trên thiết bị di động
2019-02-27
Cách gửi thông báo đẩy web từ ứng dụng Django
2018-10-24
Cách xây dựng ứng dụng web hiện đại để quản lý thông tin khách hàng với Django và React trên Ubuntu 18.04
2018-10-22
Cách cài đặt Django Web Framework trên Ubuntu 18.04
2018-08-06
Cách sử dụng Trình quản lý cảnh báo và Trình xuất hộp đen để giám sát web server của bạn trên Ubuntu 16.04
2018-05-11
Giải pháp Deep Dive: Xây dựng một ứng dụng web khả dụng cao với khả năng xử lý và lưu trữ web bằng cách sử dụng MongoDB và Elk Stack
2018-03-15
Các bước đầu tiên của bạn với API âm thanh web
2018-01-09
Gói ứng dụng web của bạn bằng bưu kiện
2017-12-09
Tích hợp các thành phần web với ứng dụng Vue.js của bạn
2017-09-25
Cách làm việc với dữ liệu web bằng cách sử dụng yêu cầu và món súp đẹp mắt với Python 3
2017-07-14