Xây dựng ứng dụng hoạt động ngoại tuyến

Sep 14, 2025

Cách

Trong một thời gian dài, chức năng ngoại tuyến, đồng bộ hóa nền và thông báo đẩy có các ứng dụng gốc khác biệt từ các đối tác web của họ. Các Công nhân dịch vụ API. là một công nghệ thay đổi trò chơi phát triển sân chơi. Trong hướng dẫn này, chúng tôi sẽ sử dụng nó để xây dựng một trang có thể phục vụ nội dung ngay cả khi không có kết nối internet.

Tải mã từ filesilo

01. Một máy chủ HTTPS

Cách dễ nhất để nghĩ về các công nhân dịch vụ là một đoạn mã được cài đặt bởi một trang web trên máy khách, chạy trong nền và sau đó cho phép các yêu cầu được gửi đến trang web đó sẽ bị chặn và thao tác. Bởi vì đây là một khả năng mạnh mẽ như vậy, để làm việc với các nhân viên dịch vụ trong một môi trường sống, bạn cần phải chạy qua HTTPS. Điều này đảm bảo chúng không thể được khai thác, bằng cách đảm bảo công nhân dịch vụ trình duyệt nhận được từ một trang là chính hãng.

Tuy nhiên, đối với mục đích phát triển, chúng ta có thể chạy mà không cần HTTPS kể từ đó http: // localhost / được phép là một ngoại lệ cho quy tắc này. Cách đơn giản nhất để bắt đầu là với NPM http-server. gói.

 NPM Cài đặt HTTP-Server -G
http-server -p 8000 -c-1

02. Thiết lập một trang cơ bản

Hiện tại không có gì trên máy chủ, vì vậy hãy tạo một trang cơ bản để phục vụ. Chúng tôi sẽ tạo một tệp index.html mới và khi chúng ta chạy máy chủ, bây giờ nó sẽ có thể truy cập được tại http: // localhost: 8000 .

Ở giai đoạn này, bạn sẽ thấy rằng nếu bạn chấm dứt máy chủ HTTP và làm mới trang trong trình duyệt, bạn sẽ nhận được một trang lỗi kể từ khi trang web không thể đạt được. Điều này hoàn toàn được mong đợi vì chúng tôi chưa lưu trữ bất kỳ nội dung ngoại tuyến nào.

 & lt;! DocType HTML & GT;
& lt; html & gt;
  & lt; Head & GT;
  & lt; meta charset = "utf-8" / & gt;
  & lt; Tiêu đề & GT; Công nhân dịch vụ & LT; / Tiêu đề & GT;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "biểu định kiểu" type = "text / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; tiêu đề & gt;
  & lt; H1 & GT; CHÀO MỪNG & LT; / H1 & GT;
  & lt; / tiêu đề & gt;
  & lt; div id = "nội dung" & gt;
  & lt; p & gt; nội dung ở đây & lt; / p & gt;
  & lt; img src = "kitty.jpg" width = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Đăng ký một công nhân dịch vụ

Bây giờ chúng tôi đã có một trang khá tuyệt vời đang chạy, và đã đến lúc bắt đầu suy nghĩ về việc triển khai một nhân viên dịch vụ. Trước khi chúng tôi nhận được mã hóa, đáng để mất một chút thời gian để hiểu vòng đời của người lao động dịch vụ.

Quá trình khởi động với 'Đăng ký' của nhân viên dịch vụ trong JavaScript của bạn, điều này cho biết trình duyệt bắt đầu cài đặt công nhân - bước đầu tiên của vòng đời. Trong suốt vòng đời của mình, một công nhân dịch vụ sẽ ở một trong những trạng thái sau:

Cài đặt: Khi một công nhân dịch vụ đã được đăng ký, việc cài đặt của nó thường được sử dụng để tải xuống và lưu trữ nội dung tĩnh
Cài đặt: Công nhân đã sẵn sàng để sử dụng nhưng không kích hoạt ngay lập tức
Kích hoạt: Một công nhân dịch vụ đã cài đặt sẽ tự kích hoạt nếu không có nhân viên dịch vụ hiện tại hoặc các điều kiện nhất định dẫn đầu hiện tại sẽ hết hạn; Kích hoạt thường được sử dụng để xóa các tệp cũ khỏi nội dung offline được lưu trong bộ nhớ cache
Kích hoạt: Công nhân dịch vụ hiện có quyền kiểm soát tài liệu và có thể xử lý các yêu cầu
Dư thừa: Nếu công nhân dịch vụ không cài đặt hoặc kích hoạt hoặc nếu nó được thay thế bởi một nhân viên dịch vụ mới hơn

04. Kiểm tra bạn đã đăng ký

Hãy đăng ký một công nhân dịch vụ. Điều này ảnh hưởng đến trình duyệt cho tệp JavaScript xác định hành vi của nhân viên dịch vụ. Đăng ký được thực hiện bằng cách sử dụng đối tượng Dịch vụ là điểm nhập vào API. Chúng tôi cũng sẽ kiểm tra API thực sự có trong trình duyệt trước khi cố gắng làm như vậy.

Các Đăng ký() Chức năng có thể được gọi một cách an toàn mỗi khi tải trang và trình duyệt sẽ xác định xem nhân viên dịch vụ đã được đăng ký hay chưa.

 Nếu ('ServiceWorker' trong Navigator) {
  window.addeventlistener ('tải', hàm () {
  Navigator.ServiceWorker.Register ('ServiceWorker.js', {Phạm vi: './'1). Sau đó (Thững chức năng Cha) {
  Console.log ("Công nhân dịch vụ đã đăng ký thành công.");
  }, chức năng (lỗi) {
  Console.log ("Lỗi đăng ký công nhân dịch vụ:" + Lỗi);
  });
  });
}

05. Thực hiện nhân viên dịch vụ

Tiếp theo chúng ta cần thực hiện chính công nhân dịch vụ. Công nhân dịch vụ có thể lắng nghe một loạt các sự kiện liên quan đến vòng đời và hoạt động của riêng họ trên trang. Những cái quan trọng nhất là cài đặt, kích hoạt và tìm nạp.

Hãy bắt đầu bằng cách tạo một người nghe cho Tải về sự kiện, mà kích hoạt một khi quá trình cài đặt của công nhân được hoàn thành. Điều này cho phép chúng tôi hướng dẫn nhân viên dịch vụ thêm một số nội dung ngoại tuyến trong thư mục hiện tại vào bộ đệm. Chúng tôi cũng cần đặt tên cho bộ nhớ cache của chúng tôi - vì bộ nhớ cache cũ có thể tồn tại, cập nhật / phiên bản tên bộ đệm này cho phép bạn phục vụ các phiên bản nội dung mới hơn sau này.

 var currentcache = 'demo-cache';
self.addeventlistener ('Cài đặt', sự kiện = & gt; {
  sự kiện.waituntil (
  cachees.open (currentcache). Sau đó (chức năng (bộ nhớ cache) {
  Console.log ("thêm nội dung vào bộ nhớ cache.");
  trả về cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  );
});

06. SỰ KIỆN FETCH.

Trang của chúng tôi bây giờ sẽ lưu trữ nội dung khi được tải, nhưng chúng tôi cần một số cơ chế để chặn các yêu cầu và chuyển hướng chúng vào bộ đệm này. Để làm điều này, chúng ta cần lắng nghe lấy các sự kiện, được kích hoạt khi một yêu cầu như lấy của chúng tôi index.html. tập tin được thực hiện trên mạng. Sau đó chúng tôi khớp yêu cầu đối với bộ đệm và phục vụ tài nguyên được lưu trong bộ nhớ cache nếu tìm thấy. Nếu không, chúng tôi đã quay trở lại một yêu cầu API tìm nạp cho máy chủ.

Đó là giá trị tại thời điểm này, lưu ý rằng chúng tôi có một sự phụ thuộc nặng nề vào JavaScript hứa hẹn sẽ làm việc. Đây có thể là một chút khó khăn, vì vậy rất đáng để làm quen với nếu bạn chưa sử dụng chúng trước đây.

 Self.addeventlistener ('Fetch', Event = & GT; {
  sự kiện.respondwith (
  caches.match (event.request). Sau đó (phản hồi = & gt; {
  Trả lại phản hồi ||. tìm nạp (sự kiện.request);
  })
   );
    });

07. Mở rộng sự kiện tìm nạp

Nếu bạn kiểm tra nó ngay bây giờ (chấm dứt máy chủ HTTP và làm mới trang), bạn sẽ thấy rằng trang của bạn hoạt động cả trực tuyến và ngoại tuyến. Tuy nhiên, có khả năng, bạn sẽ muốn có hành vi ngoại tuyến thông minh hơn, với các nội dung hoặc chức năng khác nhau khi máy chủ không khả dụng.

Để đạt được điều này, chúng ta có thể mở rộng lấy Phản hồi sự kiện hơn nữa để kiểm tra cụ thể cho các yêu cầu điều hướng và phản hồi với một trang ngoại tuyến khác khi được phát hiện. Điều này index_offline.html. Tệp có thể là một biến thể của trang trực tuyến của bạn hoặc một cái gì đó hoàn toàn khác nhau và cũng có thể sử dụng các tài nguyên khác mà bạn đã lưu trữ như Custom.css. .

 Self.addeventlistener ('Fetch', Event = & GT; {
  if (event.request.mode === 'Điều hướng') {
  sự kiện.respondwith (
  fetch (event.request) .catch (error = & gt; {
  Console.log ("Trang không khả dụng. Trả về nội dung ngoại tuyến.");
  trả về bộ nhớ cache.match ('./ index_offline.html');
  })
  );
  } other {
  sự kiện.respondwith (
  caches.match (event.request). Sau đó (phản hồi = & gt; {
  Trả lại phản hồi ||. tìm nạp (sự kiện.request);
  })
  );
  Không thể
});

08. Xóa bộ nhớ cache

Có một điều nữa chúng ta cần. Nếu bây giờ bạn thử sửa đổi nội dung ngoại tuyến của mình, bạn sẽ thấy nó không cập nhật khi bạn kiểm tra trang của mình - bạn vẫn nhận được phiên bản cũ! Điều này là do các tệp cũ hơn vẫn được lưu trong bộ nhớ cache.

Bạn cần thực hiện một cái gì đó để dọn sạch các tệp lỗi thời khỏi bộ đệm để ngăn chúng được phục vụ. Điều này được thực hiện bằng cách trả lời một kích hoạt sự kiện và xóa tất cả các bộ đệm nào không khớp với tên được chỉ định trong currentcache. Sau đó, bạn có thể thêm số phiên bản vào currentcache mỗi lần bạn sửa đổi nội dung ngoại tuyến của mình, để đảm bảo nó được làm mới.

[46 ].addeventlistener ('kích hoạt', sự kiện = & gt; { var Activecaches = [currentcache]; Console.log ("Công nhân dịch vụ được kích hoạt. Kiểm tra bộ đệm là cập nhật."); sự kiện.waituntil ( cachees.keys (). Sau đó (KeyList = & GT; { return Promise.all (KeyList.map (Key = & GT; { if (activecaches.indexof (Key) === -1) { Console.log ("xóa bộ nhớ cache cũ" + phím); trả lại bộ đệm.delete (chìa khóa); Không thể })); }) ); });

Bài viết này đã được xuất bản trong Vấn đề Tạp chí thiết kế web # 268. Theo dõi ngay.

Đọc thêm:

Hướng dẫn của Coder về API
Bắt đầu với WebGL bằng cách sử dụng ba.js
12 xu hướng thiết kế web lớn cho năm 2018

Xây dựng ứng dụng hoạt động ngoại tuyến

01. Một máy chủ HTTPS

02. Thiết lập một trang cơ bản

03. Đăng ký một công nhân dịch vụ

04. Kiểm tra bạn đã đăng ký

05. Thực hiện nhân viên dịch vụ

06. SỰ KIỆN FETCH.

07. Mở rộng sự kiện tìm nạp

08. Xóa bộ nhớ cache

Cách - Các bài báo phổ biến nhất

21 cách để tối ưu hóa CSS của bạn và tăng tốc trang web của bạn

Bắt đầu với nền tảng hoạt hình Greensock

Cách tạo Robot Papercraft

Tạo hiệu ứng văn bản lung lay với JavaScript

Cách bắt đầu vẽ tranh sơn dầu

Tạo hiệu ứng nước rót ở Realflow

Phát triển các kỹ năng biếm họa của bạn

Tăng tốc độ công việc kết cấu của bạn

Thể loại