Mặc dù vòng đời trình chạy dịch vụ đảm bảo quá trình cài đặt và cập nhật có thể dự đoán, nhưng nó có thể làm cho chu kỳ phát triển cục bộ phức tạp hơn một chút.
Trong chu kỳ phát triển cục bộ điển hình, nhà phát triển lưu thay đổi đối với tệp trong trình chỉnh sửa văn bản, sau đó chuyển sang trình duyệt để xác minh thay đổi và quy trình này lặp lại. Khi một trình chạy dịch vụ ở trong sự kết hợp, chu kỳ này phần lớn là giống nhau, nhưng có thể có sự khác biệt giữa những gì nhà phát triển mong đợi và những gì trình duyệt thực hiện.
Trường hợp ngoại lệ đối với hoạt động phát triển địa phương
Nói chung, API trình chạy dịch vụ chỉ có sẵn trên các trang được phân phát qua HTTPS,
nhưng có một số ngoại lệ đối với quy tắc này về việc các API đó có thể khả dụng qua HTTP.
Một trường hợp ngoại lệ đáng chú ý là đối với các trang được phân phát trên localhost (hoạt động tốt cho hoạt động phát triển cục bộ).
Tuy nhiên, các nhà phát triển không có gì lạ khi chỉ định các tên máy chủ cục bộ ngoài localhost trong tệp máy chủ lưu trữ.
Đây là yêu cầu bắt buộc trong môi trường phát triển cục bộ khi nhiều dự án yêu cầu tên máy chủ riêng biệt.
Trong những trường hợp này, bạn cần cấp phép chứng chỉ tự ký.
Một giải pháp thuận tiện hơn là hướng dẫn trình duyệt đưa ra các ngoại lệ kiểm thử trình chạy dịch vụ.
Đối với Chrome, hãy chuyển đến chrome://flags/#unsafely-treat-insecure-origin-as-secure
và chỉ định các nguồn gốc không an toàn để coi là nguồn gốc an toàn.
Firefox cung cấp một cách để kiểm tra trình chạy dịch vụ trên các nguồn gốc không an toàn thông qua chế độ cài đặt devtools.serviceWorkers.testing.enabled trong about:config.
Hỗ trợ phát triển trình chạy dịch vụ
Việc phát triển cục bộ với một trình chạy dịch vụ trong kết hợp có thể dẫn đến các hành vi dường như là không mong muốn.
Ví dụ: giả sử chiến lược chỉ dành cho bộ nhớ đệm được áp dụng cho các tài sản tĩnh không có phiên bản hoặc trang "bạn đang ngoại tuyến" được lưu trước vào bộ nhớ đệm và trang này dự kiến sẽ cập nhật khi tải lại sau khi thực hiện thay đổi.
Vì phiên bản cũ của các thành phần đó luôn được phân phát từ thực thể Cache,
nên chúng dường như không bao giờ cập nhật!
Điều này gây khó chịu vì trình chạy dịch vụ chỉ đang làm những gì nó được xây dựng để làm, nhưng có một số cách để giúp kiểm thử dễ dàng hơn.
Cho đến nay, cách hiệu quả nhất để kiểm thử một trình chạy dịch vụ là dựa vào các cửa sổ duyệt web ở chế độ riêng tư, chẳng hạn như cửa sổ ẩn danh trong Chrome hoặc tính năng Duyệt web riêng tư của Firefox.
Mỗi khi mở một cửa sổ duyệt web ở chế độ riêng tư, bạn sẽ bắt đầu lại từ đầu.
Không có trình chạy dịch vụ nào đang hoạt động và không có thực thể Cache nào đang mở. Quy trình cho loại kiểm thử này là:
- Mở một cửa sổ duyệt web ở chế độ riêng tư.
- Chuyển đến trang đăng ký một trình chạy dịch vụ.
- Xác minh xem trình chạy dịch vụ có hoạt động như bạn mong đợi hay không.
- Đóng cửa sổ ẩn danh.
- Lặp lại.
Với quy trình này, bạn đang mô phỏng trung thực vòng đời của trình chạy dịch vụ.
Các công cụ kiểm thử khác có trong bảng điều khiển Ứng dụng của Chrome cho nhà phát triển có thể trợ giúp bạn, mặc dù chúng có thể sửa đổi vòng đời của trình chạy dịch vụ theo một số cách.
Bảng điều khiển ứng dụng có một bảng điều khiển con gắn nhãn Service worker, hiển thị trình chạy dịch vụ đang hoạt động cho trang hiện tại. Bạn có thể cập nhật từng trình chạy dịch vụ đang hoạt động theo cách thủ công hoặc thậm chí huỷ đăng ký hoàn toàn. Ngoài ra còn có 3 nút bật/tắt ở trên cùng nhằm hỗ trợ quá trình phát triển.
- Offline (Ngoại tuyến) mô phỏng các điều kiện ngoại tuyến. Điều này hữu ích khi kiểm thử xem một trình chạy dịch vụ đang hoạt động có đang phân phối nội dung ngoại tuyến hay không.
- Cập nhật khi tải lại: khi được bật/tắt, sẽ tìm nạp lại và thay thế trình chạy dịch vụ hiện tại bất cứ khi nào trang được tải lại.
- Tính năng Bỏ qua cho mạng, khi được bật/tắt, sẽ tránh né mọi mã trong sự kiện
fetchcủa trình chạy dịch vụ và luôn tìm nạp nội dung từ mạng.
Đây là các nút bật/tắt hữu ích, đặc biệt là Bỏ qua cho mạng, rất hiệu quả khi bạn đang phát triển một dự án có một trình chạy dịch vụ đang hoạt động, nhưng cũng muốn đảm bảo rằng trải nghiệm hoạt động như mong đợi mà không cần trình chạy dịch vụ.
Firefox có bảng điều khiển ứng dụng tương tự trong các công cụ dành cho nhà phát triển, nhưng chức năng chỉ cho phép hiển thị trình chạy dịch vụ nào được cài đặt, cũng như khả năng huỷ đăng ký mọi trình chạy dịch vụ đang hoạt động cho trang hiện tại theo cách thủ công. Cách này cũng hữu ích nhưng sẽ đòi hỏi nhiều công sức hơn trong quá trình phát triển của địa phương.
Di chuyển và tải lại
Khi phát triển cục bộ bằng một trình chạy dịch vụ đang hoạt động mà không cần chức năng cập nhật khi làm mới hoặc bỏ qua cho mạng cung cấp, bạn nên giữ phím Shift rồi nhấn nút làm mới.
Quá trình này được gọi là buộc làm mới, bỏ qua bộ nhớ đệm HTTP cho mạng. Khi một trình chạy dịch vụ đang hoạt động, thao tác làm mới bắt buộc cũng sẽ bỏ qua hoàn toàn trình chạy dịch vụ này.
Chức năng này rất hữu ích nếu không chắc chắn về việc liệu một chiến lược lưu vào bộ nhớ đệm cụ thể có đang hoạt động như dự kiến hay không, và sẽ hữu ích nếu bạn lấy mọi thứ từ mạng để so sánh các hành vi có và không có trình chạy dịch vụ. Tốt hơn là đây là một hành vi được chỉ định, vì vậy, tất cả các trình duyệt hỗ trợ service worker sẽ theo dõi hành vi này.
Kiểm tra nội dung bộ nhớ đệm
Sẽ khó để biết liệu chiến lược lưu vào bộ nhớ đệm có đang hoạt động như dự kiến hay không nếu không thể kiểm tra bộ nhớ đệm.
Chắc chắn rồi, bạn có thể kiểm tra bộ nhớ đệm trong mã,
nhưng đó là quy trình liên quan đến các trình gỡ lỗi và/hoặc câu lệnh console khi một công cụ trực quan sẽ phù hợp hơn cho nhiệm vụ này.
Bảng điều khiển ứng dụng trong Công cụ của Chrome cho nhà phát triển cung cấp một bảng điều khiển con để kiểm tra nội dung của các phiên bản Cache.
Bảng con này giúp việc phát triển trình chạy dịch vụ trở nên dễ dàng hơn bằng cách cung cấp các chức năng như:
- Xem tên của thực thể
Cache. - Khả năng kiểm tra nội dung phản hồi của các tài sản đã lưu vào bộ nhớ đệm và các tiêu đề phản hồi liên quan.
- Loại bỏ một hoặc nhiều mục khỏi bộ nhớ đệm hoặc thậm chí xoá toàn bộ các thực thể
Cache.
Giao diện người dùng đồ hoạ này giúp bạn dễ dàng kiểm tra bộ nhớ đệm của trình chạy dịch vụ để xem các mục đã được thêm, cập nhật hoặc xoá hoàn toàn khỏi bộ nhớ đệm của trình chạy dịch vụ hay không. Firefox cung cấp trình xem bộ nhớ đệm riêng với chức năng tương tự, mặc dù trình xem này nằm trong bảng điều khiển Storage riêng.
Mô phỏng hạn mức bộ nhớ
Trên các trang web có nhiều tài sản tĩnh lớn (như hình ảnh có độ phân giải cao), bạn có thể đạt đến hạn mức bộ nhớ. Khi điều này xảy ra, trình duyệt sẽ loại bỏ các mục khỏi bộ nhớ đệm mà trình duyệt cho là lỗi thời hoặc đáng để hy sinh để nhường chỗ cho nội dung mới.
Việc xử lý hạn mức bộ nhớ phải là một phần của quá trình phát triển trình chạy dịch vụ và Workbox giúp quá trình đó đơn giản hơn so với việc bạn tự quản lý. Tuy nhiên, khi có hoặc không có Workbox, bạn nên mô phỏng hạn mức bộ nhớ tuỳ chỉnh để kiểm tra logic quản lý bộ nhớ đệm.
Bảng điều khiển Ứng dụng trong Công cụ cho nhà phát triển của Chrome có một bảng phụ Bộ nhớ cung cấp thông tin về hạn mức bộ nhớ hiện tại mà trang đang sử dụng. Nó cũng cho phép chỉ định hạn mức tùy chỉnh bằng megabyte. Khi có hiệu lực, Chrome sẽ thực thi hạn mức bộ nhớ tuỳ chỉnh để bạn có thể kiểm tra.
Ngoài ra, bảng điều khiển con này cũng chứa nút Xoá dữ liệu trang web và một loạt các hộp đánh dấu được liên kết cho biết những gì cần được xoá khi người dùng nhấp vào nút này.
Trong số này, có mọi thực thể Cache đang mở và khả năng huỷ đăng ký mọi trình chạy dịch vụ đang hoạt động đang kiểm soát trang.
Phát triển dễ dàng hơn, năng suất cao hơn
Khi không còn bị cản trở, nhà phát triển có thể làm việc tự tin hơn và đạt năng suất cao hơn. Việc phát triển cục bộ thông qua một trình chạy dịch vụ có thể thay đổi, nhưng việc này không nhất thiết phải gây đau đớn. Với các mẹo và thủ thuật này, việc phát triển thông qua một trình chạy dịch vụ tích cực sẽ trở nên minh bạch và dễ dự đoán hơn nhiều, qua đó mang lại trải nghiệm tốt hơn cho nhà phát triển.