Làm cho ứng dụng của bạn hoạt động ngoại tuyến với công nhân dịch vụ

Công nhân dịch vụ có thể được sử dụng để cải thiện thời gian tải và hỗ trợ ngoại tuyến cho các trang web và ứng dụng web của bạn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tăng cường nâng cao ứng dụng web với công nhân dịch vụ. Trước tiên, chúng tôi sẽ bao gồm một nhân viên dịch vụ là gì và cách thức hoạt động của LIFECYCLE, sau đó chúng tôi sẽ chỉ cho bạn cách sử dụng sau đó để tăng tốc trang web của mình (trang này) và cung cấp nội dung ngoại tuyến (trang 2).

Sau đó chúng tôi sẽ chỉ cho bạn cách Cách xây dựng một ứng dụng với công nhân dịch vụ. Bạn sẽ tìm hiểu cách thiết lập một công nhân xương trần sẽ lưu trữ và phục vụ các tài sản tĩnh (cung cấp một hiệu suất lớn tăng cường tải trọng tiếp theo), sau đó cách lưu trữ các phản hồi API động và cung cấp cho ứng dụng demo hỗ trợ toàn diện của chúng tôi. Đầu tiên, hãy xem những gì chính xác nhân viên phục vụ, và cách chúng hoạt động.

Xây dựng một trang web? Hợp lý hóa quá trình của bạn với một tuyệt vời người tạo ra trang web và duy trì nó với một đàng hoàng web hosting dịch vụ. Và nhận được lưu trữ của bạn được sắp xếp với những lưu trữ đám mây tùy chọn.

Công nhân dịch vụ là gì?

Vậy một công nhân dịch vụ là gì? Đó là một tập lệnh, được viết bằng JavaScript, trình duyệt của bạn chạy trong nền. Nó không ảnh hưởng đến luồng chính (trong đó JavaScript thường chạy trên một trang web) và sẽ không xung đột với mã ứng dụng của bạn hoặc ảnh hưởng đến hiệu suất thời gian chạy.

Một công nhân dịch vụ không có quyền truy cập trực tiếp vào DOM hoặc sự kiện và tương tác người dùng đang xảy ra trong chính trang web. Hãy nghĩ về nó như một lớp nằm giữa trang web và mạng, cho phép nó chặn và thao tác các yêu cầu mạng (ví dụ: yêu cầu Ajax) được thực hiện bởi trang của bạn. Điều này làm cho nó trở nên lý tưởng để quản lý bộ nhớ cache và hỗ trợ sử dụng ngoại tuyến.

Nhân viên phục vụ vòng đời

Cuộc sống của một công nhân dịch vụ theo dòng chảy đơn giản, nhưng có thể hơi khó hiểu khi bạn đã quen với các kịch bản JS chỉ hoạt động ngay lập tức:

Cài đặt & GT; Chờ đợi (đã cài đặt) & GT; Kích hoạt & GT; HOẠT ĐỘNG & GT; Dư thừa

Khi trang của bạn được tải đầu tiên, mã đăng ký chúng tôi đã thêm vào index.html. Bắt đầu cài đặt công nhân dịch vụ. Khi không có công nhân hiện tại, công nhân dịch vụ mới sẽ được kích hoạt ngay sau khi cài đặt. Một trang web chỉ có thể có một công nhân dịch vụ hoạt động tại một thời điểm.

Nếu một công nhân đã được cài đặt, công nhân dịch vụ mới sẽ được cài đặt và sau đó ngồi ở bước chờ cho đến khi trang được đóng hoàn toàn và sau đó tải lại. Đơn giản là sảng khoái là không đủ vì bạn có thể có các tab khác mở. Bạn cần đảm bảo tất cả các phiên bản của trang được đóng nếu không nhân viên mới sẽ không kích hoạt. Bạn không cần phải đóng các tab, bạn chỉ có thể điều hướng đến một trang web khác và trả lại.

Cả hai Tải về và kích hoạt Các sự kiện sẽ chỉ xảy ra một lần mỗi nhân viên. Sau khi được kích hoạt, nhân viên dịch vụ sau đó sẽ có quyền kiểm soát trang và có thể bắt đầu xử lý các sự kiện như tìm nạp để thao tác các yêu cầu.

Cuối cùng, một nhân viên dịch vụ sẽ trở nên dư thừa nếu trình duyệt phát hiện rằng chính tệp công nhân đã được cập nhật hoặc nếu cài đặt hoặc kích hoạt thất bại. Trình duyệt sẽ tìm kiếm sự khác biệt byte để xác định xem tập lệnh công nhân đã được cập nhật chưa.

Điều quan trọng cần lưu ý là bạn không bao giờ nên thay đổi (hoặc rev) tên của nhân viên dịch vụ của bạn. Bạn cũng không nên lưu trữ tệp công nhân trên máy chủ, vì bạn sẽ không thể cập nhật một cách dễ dàng, mặc dù các trình duyệt hiện đã đủ thông minh để bỏ qua các tiêu đề lưu trữ.

01. Sao chép ứng dụng demo

Được rồi, hãy bắt đầu học cách xây dựng một ứng dụng web với sự giúp đỡ từ nhân viên phục vụ. Đối với hướng dẫn này, bạn sẽ cần các phiên bản gần đây của Node.js và NPM được cài đặt trên máy tính của bạn.

Chúng tôi đã đánh bật một ứng dụng demo mà chúng tôi sẽ sử dụng làm cơ sở cho hướng dẫn này ( Bản sao ứng dụng demo ở đây ). Ứng dụng này là một dự án nhỏ thú vị tìm nạp dự báo thời tiết năm ngày dựa trên vị trí của người dùng. Sau đó, nó sẽ kiểm tra nếu mưa được dự báo trước cuối ngày và cập nhật giao diện người dùng theo đó.

Nó đã được xây dựng không hiệu quả (cố ý) sử dụng các thư viện lớn, không cần thiết như jQuery và Bootstrap, với hình ảnh lớn không cần thiết để chứng minh sự khác biệt về hiệu suất khi sử dụng một công nhân dịch vụ. Nó hiện nặng ở mức 4.1MB vô lý.

02. Lấy phím API của bạn

Để tìm nạp dữ liệu thời tiết từ API, bạn sẽ cần để có được một khóa API miễn phí từ Openweathermap. :

Khi bạn đã có chìa khóa, hãy mở ra index.html. và tìm kiếm window.api_key. biến trong & lt; Head & GT; . Dán chìa khóa của bạn vào giá trị:

    window.API_KEY = 'paste-your-key-here';

03. Bắt đầu máy chủ phát triển

Bây giờ chúng tôi đã sẵn sàng để bắt đầu làm việc trong dự án. Trước hết, hãy cài đặt các phụ thuộc bằng cách chạy:

    npm install

Có hai nhiệm vụ cho công cụ xây dựng. Chạy NPM bắt đầu Để bắt đầu máy chủ phát triển trên cổng 3000. Chạy NPM RUN BUILD. để chuẩn bị phiên bản 'sản xuất'. Hãy nhớ rằng đây chỉ là một bản demo, vì vậy không thực sự là một phiên bản sản xuất - không có việc thu nhỏ hoặc bất cứ thứ gì - các tệp chỉ nhận được 'sửa đổi'.

Một thuật toán được sử dụng để tạo một hàm băm, chẳng hạn như 9c616053e5, từ nội dung của tệp. Thuật toán sẽ luôn xuất cùng hàm băm cho cùng một nội dung, có nghĩa là miễn là bạn không sửa đổi tệp, băm sẽ không thay đổi. Cái băm sau đó được gắn vào tên tệp, vì vậy ví dụ các kiểu.css có thể trở thành kiểu-9c616053e5.css. HASH đại diện cho bản sửa đổi của tệp - do đó 'sửa đổi'.

Bạn có thể lưu bộ nhớ cache an toàn từng sửa đổi tệp trên máy chủ của mình mà không cần phải làm mất hiệu lực bộ nhớ cache của mình, rất tốn kém hoặc lo lắng về một số bộ đệm của bên thứ ba khác đang sử dụng phiên bản không chính xác.

04. Giới thiệu công nhân dịch vụ của bạn

Bây giờ hãy bắt đầu với công nhân dịch vụ của chúng tôi. Tạo một tệp có tên sw.js trong thư mục gốc của SRC. danh mục. Sau đó thêm hai người nghe sự kiện này để đăng nhập Tải về và kích hoạt sự kiện:

 Self.addeventlistener ('Cài đặt', (sự kiện) = & gt; {
      Console.log (sự kiện);
    });

    tự.addeventlistener ('kích hoạt', (sự kiện) = & gt; {
      Console.log (sự kiện);
    }); 

Các tự mình. Biến ở đây đại diện cho phạm vi chỉ đọc chỉ đọc toàn cầu của công nhân dịch vụ. Nó hơi giống cửa sổ. đối tượng trong một trang web.

Tiếp theo chúng ta cần cập nhật tệp index.html của chúng tôi và thêm các lệnh để cài đặt trình làm việc. Thêm kịch bản này ngay trước khi kết thúc & lt; / body & gt; nhãn. Nó sẽ đăng ký công nhân của chúng tôi và đăng nhập trạng thái hiện tại của nó.

 & lt; script & gt;
     if ('ServiceWorker' trong Navigator) {
       Navigator.ServiceWorker.Register ('/ sw.js')
         .then (chức năng (reg) {
           if (reg.installing) {
             Console.log ('SW cài đặt');
           } khác nếu (reg.waiting) {
             Console.log ('SW Chờ');
           } khác nếu (reg.active) {
             Console.log ('SW được kích hoạt');
           Không thể
         }). Bắt (chức năng (lỗi) {
           // đăng ký thất bại
           Console.log ('Đăng ký thất bại với' + Lỗi);
         });
     Không thể
   & lt; / script & gt; 

Bắt đầu máy chủ phát triển của bạn bằng cách chạy NPM bắt đầu và mở trang trong một trình duyệt hiện đại. Chúng tôi khuyên bạn nên sử dụng Google Chrome vì nó có hỗ trợ nhân viên phục vụ tốt trong Devtools của nó, chúng tôi sẽ đề cập đến trong suốt hướng dẫn này. Bạn sẽ thấy ba điều được ghi vào bảng điều khiển của bạn; hai từ công nhân dịch vụ cho Tải về và kích hoạt sự kiện, và người kia sẽ là thông điệp từ đăng ký.

05. Kích hoạt công nhân

Chúng tôi sẽ nói với nhân viên của chúng tôi bỏ qua bước chờ và kích hoạt ngay bây giờ. Mở tệp SW.JS và thêm dòng này ở bất cứ đâu bên trong Tải về Người nghe sự kiện:

 self.skipwaiting (); 

Bây giờ, khi chúng tôi cập nhật tập lệnh công nhân, nó sẽ kiểm soát trang ngay sau khi cài đặt. Điều đáng để ghi nhớ rằng điều này có thể có nghĩa là công nhân mới sẽ kiểm soát một trang có thể đã được tải bởi phiên bản trước của nhân viên của bạn - nếu điều đó sẽ gây ra sự cố, đừng sử dụng tùy chọn này trong ứng dụng của bạn.

Bạn có thể xác nhận điều này bằng cách điều hướng khỏi trang và sau đó quay lại. Bạn sẽ thấy Tải về và kích hoạt Sự kiện cháy một lần nữa khi công nhân mới đã được cài đặt.

Chrome Devtools có một tùy chọn hữu ích có nghĩa là bạn có thể cập nhật công nhân của mình chỉ bằng cách tải lại. Mở DevTools và chuyển đến tab Ứng dụng, sau đó chọn Trình làm việc từ cột bên trái. Trên cùng của bảng điều khiển là một hộp đánh dấu có nhãn Cập nhật trên Tải lại, đánh dấu vào nó. Công nhân cập nhật của bạn bây giờ sẽ được cài đặt và kích hoạt để làm mới.

06. Xác nhận thay đổi

Hãy xác nhận điều này bằng cách thêm Console.log ('foo') Gọi trong một trong những người nghe sự kiện và làm mới trang. Điều này bắt chúng ta ra ngoài vì chúng tôi đang mong đợi được xem nhật ký trong giao diện điều khiển khi chúng tôi được làm mới, nhưng tất cả những gì chúng tôi đã thấy là thông điệp 'SW được kích hoạt'. Hóa ra Chrome làm mới trang hai lần khi tùy chọn Cập nhật trên Tải lại được đánh dấu.

Bạn có thể xác nhận điều này bằng cách đánh dấu vào hộp đánh dấu nhật ký bảo quản trong bảng cài đặt bảng điều khiển và làm mới một lần nữa. Bạn sẽ thấy việc cài đặt và kích hoạt các sự kiện được ghi lại, cùng với 'foo', theo sau là 'điều hướng đến http: // localhost: 3000 /' để chỉ ra rằng trang đã được tải lại và sau đó cuối cùng 'SW được kích hoạt'.

07. Theo dõi sự kiện tìm nạp

Thời gian để thêm một người nghe khác. Lần này chúng ta sẽ theo dõi lấy Sự kiện được kích hoạt mỗi khi trang tải một tài nguyên, chẳng hạn như tệp CSS, hình ảnh hoặc thậm chí là phản hồi API. Chúng tôi sẽ mở một bộ đệm, trả về phản hồi yêu cầu cho trang và sau đó - trong nền - bộ nhớ cache phản hồi. Trước hết, hãy thêm người nghe và làm mới để bạn có thể thấy những gì xảy ra. Trong bảng điều khiển bạn sẽ thấy nhiều Fetchevent. khúc gỗ.

 Self.addeventlistener ('Fetch', (sự kiện) = & gt; {
 Console.log (sự kiện);
}); 

Chế độ phục vụ của chúng tôi sử dụng trình duyệtSync, bổ sung tập lệnh riêng vào trang và khiến WebSocket yêu cầu. Bạn cũng sẽ thấy những người tự bốc hàng cho những thứ này, nhưng chúng tôi muốn bỏ qua những thứ này. Chúng tôi cũng chỉ muốn Cache nhận yêu cầu từ tên miền của chúng tôi. Vì vậy, hãy thêm một vài điều để bỏ qua các yêu cầu không mong muốn, bao gồm cả việc bỏ qua rõ ràng / Đường dẫn chỉ số:

 Self.addeventlistener ('Fetch', (sự kiện) = & gt; {
 // bỏ qua yêu cầu CrossDomain
 if (! event.request.url.startswith (self.location.origin)) {
   trở về;
 Không thể
 // bỏ qua các yêu cầu không nhận được
 if (event.request.method! == 'Get') {
   trở về;
 Không thể
 // bỏ qua trình duyệt đồng bộ hóa
 if (event.request.url.indexof ('sync' sync ') & gt; -1) {
   trở về;
 Không thể
 // ngăn chặn tuyến đường được lưu trong bộ nhớ cache
 if (event.request.url === (self.location.origin + '/')) {
   trở về;
 Không thể
 // Ngăn chặn index.html được lưu trong bộ nhớ cache
 if (event.request.url.endswith ('index.html')) {
   trở về;
 Không thể
 Console.log (sự kiện);
}); 

Bây giờ các bản ghi sẽ sạch hơn nhiều và an toàn để bắt đầu lưu trữ.

08. Bộ nhớ cache tài sản

Bây giờ chúng ta có thể bắt đầu lưu trữ các phản hồi này. Đầu tiên chúng ta cần cung cấp cho bộ nhớ cache của chúng tôi một tên. Hãy gọi chúng tôi tài sản v1. . Thêm dòng này vào đầu tệp SW.JS:

 Const AssetsCachename = 'V1-TÀI SẢN'; 

Sau đó, chúng ta cần chiếm đoạt các fetchevents để chúng ta có thể kiểm soát những gì được trả về trang. Chúng ta có thể làm điều đó bằng cách sử dụng sự kiện có trách nhiệm với phương pháp. Phương thức này chấp nhận một lời hứa để chúng ta có thể thêm mã này, thay thế Console.log. :

 // nói với tìm nạp để đáp ứng với chuỗi hứa hẹn này
 sự kiện.respondwith (
   // Mở bộ đệm
   bộ đệm.Open (Assetscachename)
     .then ((bộ nhớ cache) = & gt; {
       // Thực hiện yêu cầu đến mạng
       Trả lại Fetch (Event.Request)
         .Then ((phản hồi) = & gt; {
           // bộ đệm phản hồi
           cache.put (event.request, feeddle.clone ());
           // Trả về phản hồi ban đầu với trang
           đáp ứng trả lại;
         });
     })
 ); 

Điều này sẽ chuyển tiếp yêu cầu trên mạng sau đó lưu trữ phản hồi trong bộ đệm, trước khi gửi phản hồi ban đầu trở lại trang.

Điều đáng chú ý ở đây rằng phương pháp này sẽ không thực sự lưu trữ các phản hồi cho đến lần thứ hai người dùng tải trang. Lần đầu tiên sẽ cài đặt và kích hoạt công nhân, nhưng theo thời gian lấy Người nghe đã sẵn sàng, mọi thứ sẽ được yêu cầu.

Làm mới một vài lần và kiểm tra bộ đệm trong Devtools & GT; Tab ứng dụng. Mở rộng cây lưu trữ bộ đệm trong cột bên trái và bạn sẽ thấy bộ nhớ cache của mình với tất cả các phản hồi được lưu trữ.

09. Phục vụ từ bộ đệm

Mọi thứ đều được lưu trong bộ nhớ cache nhưng chúng tôi không thực sự sử dụng bộ đệm để phục vụ bất kỳ tệp nào. Hãy kết nối nó ngay bây giờ. Đầu tiên chúng ta sẽ tìm kiếm một trận đấu cho yêu cầu trong bộ đệm và nếu nó tồn tại, chúng tôi sẽ phục vụ điều đó. Nếu nó không tồn tại, chúng tôi sẽ sử dụng mạng và sau đó lưu trữ phản hồi.

// nói với tìm nạp để đáp ứng với chuỗi này
 sự kiện.respondwith (
   // Mở bộ đệm
   bộ đệm.Open (Assetscachename)
     .then ((bộ nhớ cache) = & gt; {
       // tìm yêu cầu phù hợp trong bộ đệm
       trả về bộ nhớ cache.match (event.request)
         .Then ((khớp) = & gt; {
           // Nếu một trận đấu được tìm thấy trả về phiên bản được lưu trong bộ nhớ cache trước
           Nếu (khớp) {
             Trở về phù hợp;
           Không thể
           // nếu không thì tiếp tục đến mạng
           Trả lại Fetch (Event.Request)
             .Then ((phản hồi) = & gt; {
               // bộ đệm phản hồi
               cache.put (event.request, feeddle.clone ());
               // Trả về phản hồi ban đầu với trang
               đáp ứng trả lại;
             });
         });
     })
); 

Lưu tệp và làm mới. Kiểm tra devtools & gt; Tab mạng và bạn sẽ thấy (từ trình dịch vụ) được liệt kê trong cột Kích thước cho mỗi tài sản tĩnh.

Phew, chúng ta đã hoàn thành. Đối với một lượng nhỏ mã nhỏ như vậy, có rất nhiều thứ để hiểu. Bạn sẽ thấy rằng làm mới trang sau khi tất cả các tài sản được lưu trữ khá linh tinh nhưng hãy thực hiện kiểm tra nhanh (không khoa học) về thời gian tải trên kết nối điều chỉnh (devtools & gt; tab mạng).

Không có công nhân dịch vụ, tải qua mạng 3G nhanh mô phỏng mất gần 30 giây để mọi thứ để tải. Với công nhân dịch vụ, với cùng một kết nối được điều chỉnh nhưng tải từ bộ đệm, chỉ cần chỉ trong một giây.

Kiểm tra hộp ngoại tuyến và làm mới và bạn cũng sẽ thấy rằng trang tải mà không có kết nối, mặc dù chúng tôi không thể có được dữ liệu dự báo từ API. Trên trang 2, chúng tôi sẽ quay lại điều này và tìm hiểu cách lưu trữ phản hồi API.

Trang tiếp theo: Sử dụng công nhân dịch vụ để cung cấp truy cập trực tuyến

• 1.
• 2.

Trang hiện tại: Trang 1: Đang tải nhanh hơn