Service worker là gì

Bạn chắc rằng đã biết rằng Progressive Web Apps chỉ hoàn toàn có thể thịnh hành hơn Khi chúng hướng đến những hiểu biết người tiêu dùng (UX) thướt tha rộng, giống hệt như là tạo thành 1 native phầm mềm rộng là một yêu cầu mang phong cách trình cẩn thận.

Bạn đang xem: Service worker là gì

Một trong số các trải nghiệm Khi xây dừng PWA là có tác dụng nó cực kì an toàn và tin cậy sinh hoạt khoản loading: nó rất có thể chạy bao gồm cả vào triệu chứng mạng internet tạm bợ hoặc rớt mạng.

Trong bài bác này, họ sẽ đào sâu vào Service Workers: cách chúng vận động với bọn họ đề nghị quan tâm mang lại đâu. Cuối bài bác, team tác giả có một số lợi ích lạ mắt của Service Workers mà lại chúng ta yêu cầu cần sử dụng đồng thời share kinh nghiệm của họ trên SessionStaông chồng.

Khái quát

Nếu bạn có nhu cầu làm rõ rất nhiều sản phẩm về Service Workers, bạn phải ban đầu với nội dung bài viết trước về Web Workers.

Về cơ bản, Service Worker chỉ là 1 trong những một số loại của Web Worker với cụ thể rộng là nó y như 1 Shared Worker:

Service Worker chạy trong global context của chính nóNó cấp thiết kết nối với một trang vậy thểKhông thể truy cập vào DOM

giữa những nguyên nhân tại vì sao Service Worker API siêu hoàn hảo và tuyệt vời nhất là chúng có thể chấp nhận được webphầm mềm hỗ trợ tận hưởng lúc offline, được cho phép developer hoàn toàn điều khiển và tinh chỉnh luồng sử dụng.

Vòng đời của Service Worker

Vòng đời của một service worker là trọn vẹn tách bóc biệt với website page. Nó bao hàm những tiến trình sau:

Tải về (Download)Cài đặt (Installation)Kích hoạt (Activation)

Download

Đây là khi trình chuyên chú tải tệp tin .js đựng Service Worker

Cài đặt

Để thiết lập một Service Worker đến webphầm mềm của công ty thì bạn cần phải đăng ký nó trước trong code Javascript. Khi Service Worker đã ĐK ngừng, nó đang nhắc nhở tình coi sóc khởi rượu cồn một bước thiết đặt chạy nền Service Worker.

Bằng phương pháp đăng ký Service Worker, bạn đang thông tin mang lại trình chú ý tệp tin Javascript của worker ở ở đâu. Cùng coi ví dụ bên dưới:

1234567891011

if ("serviceWorker" in navigator) window.addEventListener("load", function() navigator.serviceWorker.register("/sw.js").then(function(registration) // Đăng ký thành công xuất sắc console.log("ServiceWorker registration successful"); , function(err) // Đăng cam kết không thắng cuộc console.log("ServiceWorker registration failed: ", err); ); );
Code đã đánh giá trường hợp môi trường xung quanh hiện giờ có tư vấn Service Worker hay là không. Nếu như tất cả thì file /sw.js sẽ được ĐK.

quý khách hàng hoàn toàn có thể hotline phương thức register() mọi khi một trang load lên cơ mà không phải lo lắng gì, trình chú ý vẫn vẫn trường đoản cú kiểm tra giả dụ service worker đã có được đăng ký xuất xắc chưa và từ xử trí một phương pháp tương xứng.

Một điểm quan trọng đặc biệt sinh hoạt cách thức register() là vị trí của file service worker. Trong ngôi trường phù hợp này chúng ta có thể thấy rằng file service worker vẫn sinh hoạt root của domain name. Nghĩa là phạm vi (scope) của service worker đã bao quát toàn cục origin. Nói phương pháp khác, service worker này đang nhấn các sự khiếu nại fetch (cơ mà họ đã trao đổi sau) mang lại phần lớn vật dụng bên trên domain này. Nếu ta ĐK tệp tin service worker ở /example/sw.js thì service worker chỉ hoàn toàn có thể thấy các sự khiếu nại fetch cho trang tất cả URL bước đầu với /example/ (ví dụ: /example/page/1, /example/page/2)

Trong quá trình thiết đặt, tốt nhất có thể ta buộc phải load cùng cađậy các tài nguim dạng tĩnh (static asset). Một Khi những tài nguyên ổn đã được cabịt thành công xuất sắc thì quá trình thiết đặt Service Worker cũng xong. Nếu ko (load fail), Service Worker vẫn test lại (retry). Một Lúc đã thành công xuất sắc, các bạn sẽ biết những static asset vẫn bên trong cađậy.

quý khách đã từ bỏ hỏi ví như như quá tình đăng ký diễn ra sau sự khiếu nại load thì được không. Điều này không đề xuất, nhưng mà đó là giải pháp tốt nhất cùng được ý kiến đề nghị tuân theo.

Tại sao? Giả sử một user lần đầu tiên xịt thăm webapp của công ty. Không gồm service worker nào cả với trình chú ý không có giải pháp làm sao để tìm hiểu trước bao gồm hay là không một service worker cần phải thiết đặt. Nếu như Service Worker đã có setup, trình coi ngó sẽ dành ra một lạng CPU và bộ nhớ lưu trữ đến tiến trình đó, ngược trở lại thì trình chú tâm đã dành riêng toàn thể mang lại quy trình render website page.

Điểm căn bản là nếu bạn chỉ cài đặt Service Worker trên trang của người tiêu dùng thì bạn đang mạo hiểm về độ delay của quá trình loading và render chứ chưa phải đang tạo nên trang có thể chuẩn bị sẵn sàng cho những người cần sử dụng một cách nkhô cứng độc nhất có thể.

Lưu ý rằng điều đó chỉ đặc trưng đến lần thứ nhất lép thăm trang. Những lần xịt thăm sau thì không xẩy ra ảnh hưởng cùng với quy trình cài đặt Service Worker. Một Lúc Service Worker đã có được kích hoạt trong lần đầu lép thăm trang, nó có thể cách xử lý các sự khiếu nại loading/caching đến phần đa lần ghé thăm tiếp nối. Vấn đề này hết sức tất cả ý nghĩa chính vì nó cần được sẵn sàng nhằm giải pháp xử lý ngôi trường đúng theo liên kết mạng bị hạn chế.

Kích hoạt

Sau Khi Service Worker thiết lập, bước tiếp theo sau là kích hoạt nó. Cách này là cơ hội tuyệt vời nhằm thống trị cabịt trước đó.

Một lúc sẽ kích hoạt, Service Worker đã bắt đầu kiểm soát tổng thể bên trong phạm vi của nó. Một sự thật khôn cùng trúc vị: page nào đăng ký Service Worker lần đầu tiên sẽ không xẩy ra tinh chỉnh cho tới lúc nó load lại. Một Khi Service Worker kiểm soát điều hành, nó sẽ sở hữu gần như trạng thái sau:

Nó sẽ xử trí những sự khiếu nại fetch và message ra mắt khi 1 request mạng hoặc message được tạo nên trường đoản cú page.Nó sẽ ảnh hưởng diệt quăng quật để giải pngóng bộ nhớ lưu trữ.

Dưới đấy là vòng đời của nó:

*

Xử lý quá trình cài đặt phía bên trong Service Worker

Sau lúc page chuyển phiên vòng quy trình ĐK, ta thuộc tò mò điều gì diễn ra bên phía trong script của Service Worker, code này cách xử lý sự kiện thiết đặt bằng cách thêm một event listener vào instance của Service Worker.

Đây là phần đa bước quan trọng Lúc xử lý sự kiện thiết lập đặt

Mở cacheCabít các fileXác thừa nhận toàn bộ những asset quan trọng hồ hết đã được cabịt.

Dưới đấy là quá trình thiết lập đơn giản dễ dàng bên phía trong Service Worker:

12345678910111213141516171819

var CACHE_NAME = "my-web-app-cache";var urlsToCache = < "/", "/styles/main.css", "/scripts/phầm mềm.js", "/scripts/lib.js">;self.addEventListener("install", function(event) // sự kiện.waitUntil thừa nhận một promise để tìm hiểu quá trình // cài đặt mất bao thọ và tất cả thành công xuất sắc hay không. event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) console.log("Opened cache"); return cabịt.addAll(urlsToCache); ) ););
Nếu tất cả các tệp tin phần đa đã có được lưu cache thành công thì service worker sẽ được thiết đặt. Nếu một file nào đó không download được thì bước setup có khả năng sẽ bị fail. Vì núm hãy cẩn thận với phần đa tệp tin các bạn truyền vào.

Xử lý sự kiện cài đặt trọn vẹn ko bắt buộc cùng bạn có thể bỏ lỡ, trong trường hợp đó chúng ta không nhất thiết phải triển khai thêm bước làm sao nữa.

Cabít request vào quá trình thực hiện (runtime)

Phần này thực sự độc đáo một biện pháp xuất dung nhan. Đây là vị trí bạn sẽ biết làm nạm làm sao để can thiệp request và trả về cabít đã có chế tạo ra (với sinh sản mới).

Xem thêm: Không Tham Gia In English - Tại Sao Nên Tham Gia Trại Hè Tiếng Anh

Sau Lúc Service Worker thiết lập hoàn thành cùng user điều hướng đến page khác hoặc refresh lại page bây giờ, Service Worker đang nhận được sự kiện fetch. Đây là 1 ví dụ miêu tả làm cho núm như thế nào nhằm trả về đầy đủ asmix vẫn cache hoặc triển khai một request new với cađậy kết quả:

event.respondWith() vẫn xác minh làm nắm làm sao bọn họ đánh giá với việc khiếu nại fetch. Ta truyền một promise từ caches.match(), hàm đã đánh giá request với kiếm tìm tìm trường hợp bao gồm ngẫu nhiên kết quả đã làm được cache sẵn như thế nào từ phần đa cache đã được sản xuất trước kia.Nếu bao gồm cađậy, response được lôi ra.trái lại, fetch được tiến hành.Kiểm tra giả dụ tâm lý là 200. Chúng ta đang khám nghiệm kiểu dáng response là cơ phiên bản, nghĩa là nó đang chỉ ra request trường đoản cú origin của chúng ta. Request cho những asphối của bên trang bị 3 cấp thiết cabít được vào trường hòa hợp này.Response được cung ứng cache.

Request với response phải được nhân bạn dạng (clone) vì bọn chúng là stream. Thân (body) của một stream chỉ hoàn toàn có thể áp dụng 1 lần. Và Khi ta đề nghị dùng nó, ta cần nhân bạn dạng nó bởi vì trình coi ngó cũng cần phải sử dụng nó nữa.

Cập nhật Service Worker

Lúc một user gạnh thăm webứng dụng của bạn, trình duyệt vẫn demo tải về lại file .js cất code Service Worker. Tác vụ này sẽ được chạy nền.

Nếu có một chút ít khác biệt dù duy nhất byte thân file Service Worker mới tải về về với tệp tin cũ thì trình chuẩn y cũng trở nên trả định rằng gồm sự biến đổi và Service Worker bắt đầu phải tạo lại.

Service Worker new sẽ bắt đầu khởi tạo thành cùng cài đặt. Tuy nhiên vào thời điểm đó, Service Worker cũ vẫn đang kiểm soát và điều hành page bên trên webapp của người tiêu dùng, tức thị Service Worker bắt đầu đang phía trong tâm trạng mong chờ.

Một khi trang vẫn mnghỉ ngơi được đóng góp lại, Service Worker cũ sẽ bị hủy do trình lưu ý với Service Worker mới thiết đặt đã chỉ chiếm quyền kiểm soát toàn bộ. Đây là khi sự khiếu nại kích hoạt của chính nó được kích hoạt.

Tại sao lại rất cần phải làm cho tất cả điều này? Là nhằm rời vụ việc Khi gồm 2 phiên phiên bản webphầm mềm chạy đôi khi trong những tab khác biệt. Việc này diễn ra một cách siêu phổ biến và có thể tạo ra mọi lỗi tệ hại (ví dụ: chúng ta gồm schema khác nhau trong những lúc tàng trữ tài liệu local trên trình duyệt).

Xóa dữ liệu vào cache

Bước thông dụng tốt nhất trong callbaông xã kích hoạt là cai quản cache. quý khách hàng đang rất cần được làm cho điều đó tức thì cũng chính vì nếu khách hàng lau chùi và vệ sinh cache cũ trong bước cài đặt, Service Worker cũ đang tạm dừng một bí quyết bất ngờ đột ngột và quan yếu phân phối những tệp tin từ bỏ cađậy đó nữa.

Dưới đây là ví dụ cách chúng ta cũng có thể xóa vài ba file không bên trong danh sách an ninh vào cache (trong trương thích hợp này là có chữ page-1 với page-2 vào tên của nó)

1234567891011121314151617181920

self.addEventListener("activate", function(event) var cacheWhitemenu = <"page-1", "page-2">; event.waitUntil( // Lấy tất cả key từ cache. caches.keys().then(function(cacheNames) return Promise.all( // Lặp qua mảng những tệp tin. cacheNames.map(function(cacheName) // Nếu file vào cabịt ko nằm trong danh sách bình an // thì nó có khả năng sẽ bị xóa. if (cacheWhitelist.indexOf(cacheName) === -1) return caches.delete(cacheName); ) ); ) ););
Yêu cầu HTTPSKhi phát hành webtiện ích, bạn có thể áp dụng Service Worker qua localhost nhưng một Khi vẫn deploy nó lên production, bạn phải chuẩn bị HTTPS (cùng đó cũng là nguyên do cuối cùng bạn cần cho HTTPS).

Sử dụng Service Worker, bạn có thể chiếm phần quyền kết nối cùng ngụy chế tạo response. Nếu không dùng HTTPS, webphầm mềm của khách hàng vươn lên là đối tượng của bí quyết tiến công kẻ-trung-gian (man-in-the-middle).

Để an ninh rộng, bạn phải đăng ký Service Worker với page được phân pân hận qua HTTPS nhằm chúng ta biết được Service Worker nào trình để mắt tới thừa nhận về mà không biến thành biến hóa Khi lưu thông qua mạng.

Các trình coi sóc hỗ trợ

Sự hỗ trợ mang lại Service Worker ngày càng được cải thiện:

*

Quý Khách rất có thể quan sát và theo dõi tiến trình đến tất cả các trình xem xét trên đây: https://jakearchibald.vuialo.net.io/isserviceworkerready/

Service Workers xuất hiện thêm chân trời mới

Một số khả năng lạ mắt mà Service Worker cung cấp:

Push notifications : được cho phép user tđê mê gia vào lắng tai cập nhật theo thời gianĐồng bộ bên dưới nền (background sync): được cho phép chúng ta nhất thời hoãn những hành động cho tới khi user có kết nối bình ổn. Bằng bí quyết này chúng ta có thể bảo đảm an toàn rằng bất kỳ sản phẩm gì cơ mà user phải gửi thì chắc chắn rằng nó sẽ tiến hành gửi đi.Đồng cỗ thời hạn (periodic sync - tương lai): API cung cấp năng lực làm chủ đồng nhất bên dưới nền theo chu kỳ luân hồi.Ranh giới ảo (Geofencing - tương lai): bạn có thể định nghĩa params, nói một cách khác là đầy đủ geofence bảo phủ một khoanh vùng. Webứng dụng sẽ nhận thông báo lúc bao gồm một đồ vật vượt qua geofence, vấn đề đó có thể chấp nhận được chúng ta cung ứng trả nghiệm có ích dựa vào vị trí địa lý của user.

Mỗi mục này sẽ tiến hành bàn luận cụ thể hơn trong các nội dung bài viết khác.

Team tác giả đang nỗ lực ko hoàn thành để mang đến những hiểu biết UX mềm mại nhất rất có thể đến SessionStack, về tối ưu hóa thời hạn download trang với thời hạn phản hồi.

Lúc chúng ta replay lại 1 session của user bên trên SessionStachồng (hoặc xem nó vào thời hạn thực), phần SessionStaông xã front-end sẽ không còn xong đem tài liệu tự VPS về để tạo nên một trải nghiệm tức khắc mạch như lưu giữ vào buffer. Một khi chúng ta gắn vào tlỗi viện của SessionStaông chồng vào vào webứng dụng, nó đang bắt đầu tích lũy tài liệu tiếp tục về biến đổi trên DOM, tác động người dùng, request mạng, biệt lệ không được xử lý và thông báo lỗi.

Khi một phiên thao tác làm việc được replay hoặc stream theo thời hạn thực thì SessionStachồng phục vụ toàn bộ tài liệu được cho phép các bạn thấy đầy đủ thứ về đề nghị người tiêu dùng nghỉ ngơi góc độ trình chú ý của user (cả về phương diện chuyên môn lẫn hình ảnh). Những quá trình này rất cần phải được tiến hành cực nkhô nóng nhằm ko tạo cho user nên mong chờ.

Xem thêm: Total Asset Turnover Là Gì, Vòng Quay Tổng Tài Sản (Total Asset Turnover)

Bởi vì dữ liệu được front-over kéo về nên đó là một sân khấu hoàn hảo và tuyệt vời nhất mang lại Service Worker rất có thể “tỏa sáng” cơ mà cách xử lý phần đông trường phù hợp nhỏng reload player cùng stream phần đa thứ thêm vài đợt tiếp nhữa. Xử lý kết nối mạng bị chậm cũng rất là đặc biệt.

Source: https://blog.sessionstaông xã.com/how-javascript-works-service-workers-their-life-cycle-and-use-cases-52b19ad98b58