Service worker trong react js là gì


94

Khi tạo ứng dụng phản ứng, nhân viên dịch vụ được gọi theo mặc định. Tại sao nhân viên dịch vụ được sử dụng? Lý do gọi mặc định là gì?

Câu trả lời:


106

Bạn có thể không cần nhân viên dịch vụ cho ứng dụng của mình. Nếu bạn đang tạo một dự án với ứng dụng create-react, nó sẽ được gọi theo mặc định

Công nhân dịch vụ được giải thích trong này bài viết. Tóm tắt từ nó

A service workerlà một tập lệnh mà trình duyệt của bạn chạy trong nền, tách biệt với một trang web, mở ra cánh cửa cho các tính năng không cần trang web hoặc tương tác của người dùng. Ngày nay, chúng đã bao gồm các tính năng như push notificationsbackground syncvà có ability to intercept and handle network requests, bao gồm programmatically managing a cache of responses.

Trong tương lai, nhân viên dịch vụ có thể hỗ trợ những thứ khác như periodic synchoặc geofencing.

Theo PR này để tạo-phản ứng-ứng dụng

Service workersđược giới thiệu với ứng dụng tạo-phản ứng thông qua SWPrecacheWebpackPlugin.

Sử dụng công nhân máy chủ với chiến lược ưu tiên bộ nhớ cache mang lại lợi thế về hiệu suất, vì mạng không còn là nút cổ chai để thực hiện các yêu cầu điều hướng. Tuy nhiên, điều đó có nghĩa là các nhà phát triển (và người dùng) sẽ chỉ thấy các bản cập nhật đã triển khai khi truy cập "N + 1" vào một trang, vì các tài nguyên đã lưu trong bộ nhớ cache trước đó được cập nhật trong nền.

Cuộc gọi tới register service workerđược bật theo mặc định trong các ứng dụng mới nhưng bạn luôn có thể xóa cuộc gọi đó và sau đó bạn trở lại hành vi bình thường.


2
như hiện tại ứng dụng reactjs được tạo có mã sw nhưng nhận xét nói rằng hàm đăng ký không được gọi. Vì vậy, câu hỏi là tôi có thể gọi nó ở đâu?
Daneel Yaitskov

@ DaneelS.Yaitskov, bạn có thể gọi nó ở tệp index.js cấp cao nhất hoặc tương tự.
Siddhartha

1
@Siddhartha, bạn có thể đủ tốt để cung cấp một ví dụ cụ thể và có thể cập nhật câu trả lời không? Tôi thấy điều này rất hữu ích nhưng thiếu những chi tiết cuối cùng. Cảm ơn.
Ted Stresen-Reuter

17

Nói một cách đơn giản và dễ hiểu, đó là một tập lệnh mà trình duyệt chạy ở chế độ nền và không liên quan gì đến các trang web hoặc DOM, đồng thời cung cấp các tính năng ngoài hộp. Nó cũng giúp bạn lưu vào bộ nhớ cache của nội dung và các tệp khác để khi người dùng ngoại tuyến hoặc mạng chậm.

Một số tính năng này là proxy yêu cầu mạng, thông báo đẩy và đồng bộ hóa nền. Nhân viên dịch vụ đảm bảo rằng người dùng có trải nghiệm ngoại tuyến phong phú.

Bạn có thể nghĩ về service worker như một người ngồi giữa máy khách và máy chủ và tất cả các yêu cầu được gửi đến máy chủ đều được chuyển qua service worker. Về cơ bản, một người đàn ông trung gian. Vì tất cả các yêu cầu đều được chuyển qua nhân viên dịch vụ, nên nó có thể chặn các yêu cầu này một cách nhanh chóng.

nhập mô tả hình ảnh ở đây


6

Tôi muốn thêm 2 cân nhắc quan trọng về Nhân viên Dịch vụ cần lưu ý:

  1. Nhân viên dịch vụ yêu cầu HTTPS. Nhưng để kích hoạt thử nghiệm cục bộ, hạn chế này không áp dụng cho localhost. Điều này là vì lý do bảo mật vì Service Worker hoạt động như một người đàn ông ở giữa ứng dụng web và máy chủ.

  2. Với Create React App Service Worker chỉ được kích hoạt trong môi trường sản xuất, chẳng hạn như khi đang chạy npm run build.

Service Worker ở đây để giúp phát triển Ứng dụng web tiến bộ . Bạn có thể tìm thấy một tài nguyên tốt về nó trong bối cảnh Tạo ứng dụng React trong trang web của họ tại đây .

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.