Giới thiệu về Ứng dụng web tiến bộ (PWA): Service Worker & Manifest
Nhờ các công nghệ như Service worker , các trang web và ứng dụng web ngày càng có thể hoạt động giống như các ứng dụng root trên các trình duyệt hỗ trợ nó. Đó là những gì sau đó ta gọi là ứng dụng web tiến bộ (PWA).
Các ứng dụng web tiến bộ cho phép bạn thực hiện những việc như cài đặt vào màn hình chính và giúp ứng dụng của bạn có thể truy cập khi offline . Hãy dùng thử, nếu bạn đang sử dụng Chrome hoặc Firefox, hãy tắt Wi-Fi của bạn và reload trang này. Bạn sẽ thấy rằng trang tải tốt vì nó đã được lưu vào bộ nhớ cache và version đã lưu trong bộ nhớ cache được phân phát từ Service Worker.
Để ứng dụng web được coi là ứng dụng web tiến bộ, cần có một số điều sau:
Danh sách kiểm tra ứng dụng web tiến bộ
3 điều quan trọng nhất sau đây để có một ứng dụng web tiến bộ cơ bản hoạt động:
- Trang web phải được phân phát qua https
- Ứng dụng của bạn phải có file Tệp kê khai ứng dụng web
- Ứng dụng của bạn phải có một Service Worker hoạt động
Bao gồm ba điều này, bạn sẽ có một Ứng dụng web tiến bộ cơ bản có thể khả dụng offline và tải nội dung tĩnh từ bộ nhớ cache. Bạn có thể sử dụng trình mở rộng Lighthouse Chrome để chạy kiểm tra và xem ứng dụng của bạn đang ở đâu trong phổ:
Tệp kê khai ứng dụng web
Tệp kê khai ứng dụng web là file Json có metadata về ứng dụng của bạn. Nội dung từ file kê khai đặc biệt quan trọng để cho phép các trình duyệt như Chrome trên điện thoại Android hiển thị tùy chọn để khách truy cập lặp lại cài đặt ứng dụng web trên màn hình chính của họ.
Trình tạo file kê khai ứng dụng web này giúp dễ dàng tạo file kê khai.json. Nó thậm chí sẽ tạo ra tất cả các kích thước biểu tượng khác nhau chỉ từ một biểu tượng 512x512.
Sau khi bạn có file manifest.json của bạn , hãy đưa nó vào phần đầu của ứng dụng với thông tin như sau:
<link rel="manifest" href="/path/to/manifest.json"> Đây là ví dụ về nội dung của Tệp kê khai ứng dụng web cho trang web này:
{ "name": "Alligator.io", "short_name": "Alligator", "theme_color": "#138e69", "background_color": "#f8ea48", "display": "browser", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null } Nhân viên phục vụ
Service worker là một công nghệ mới có sẵn trong một số trình duyệt hiện đại cho phép kiểm soát các yêu cầu mạng. Service worker có thể lưu nội dung vào bộ nhớ cache và kiểm soát điều gì sẽ xảy ra khi không có quyền truy cập vào mạng hoặc khi truy cập rất chậm. Trong trường hợp ứng dụng web, nội dung cho phần vỏ của ứng dụng có thể được lưu vào bộ nhớ cache và sau đó luôn khả dụng khi offline hoặc trong tình trạng kết nối thấp.
Đăng ký Nhân viên Dịch vụ
Bước đầu tiên để có được một nhân viên dịch vụ tại chỗ là đăng ký nó.
Đây là tập lệnh mẫu mà bạn có thể sử dụng để đăng ký Service Worker. Lưu ý cách kiểm tra đầu tiên nếu Nhân viên dịch vụ được hỗ trợ:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { console.log('ServiceWorker registration successful!'); }).catch(function(err) { console.log('ServiceWorker registration failed: ', err); }); } Lưu ý cách Service Worker nằm trong folder root . Điều này nghĩa là nó sẽ được tìm đến toàn bộ ứng dụng web. Nếu nó nằm trong một folder con, thì nó sẽ được xác định phạm vi chỉ trong folder con đó theo mặc định.
Nhân viên dịch vụ
Bây giờ đối với bản thân service worker, nó có thể trở nên khá phức tạp và một công cụ như SW-Toolbox có thể giúp cắt mã tấm lò hơi cần thiết để cài đặt Service Worker. Mã hóa theo cách thủ công Service Worker liên quan đến việc cài đặt trình xử lý sự kiện cho quá trình cài đặt , kích hoạt và tìm nạp các sự kiện, nhưng SW-Toolbox sẽ đảm nhận việc đó đằng sau mức thấp .
Bạn có thể cài đặt SW-Toolbox từ npm như sau:
$ npm install --save sw-toolbox Sau đó, trong Service Worker mà bạn đã đăng ký (ví dụ: service-worker.js ), hãy sử dụng self.importScripts () để nhập SW-Toolbox:
self.importScripts('node_modules/sw-toolbox/sw-toolbox.js'); Đối với trang web này, tất cả những gì cần thiết ngoài việc nhập SW-Toolbox là những thứ sau:
self.toolbox.precache(['/images/logo-small.svg', '/images/web-icons/webicon-twitter.svg', '/images/web-icons/webicon-facebook.svg']); self.toolbox.router.get('/*', toolbox.networkFirst); Điều này sẽ loại bỏ một số nội dung và sau đó lưu trữ mọi thứ vào bộ nhớ cache, nhưng cố gắng lấy dữ liệu mới từ mạng trước khi đặt mặc định thành version đã lưu trong bộ nhớ cache nếu mạng không khả dụng.
Điều này hoạt động tốt cho một trang web tĩnh như trang này, nhưng mọi thứ trong bộ nhớ đệm sẽ không hoạt động với một ứng dụng web thực tế có dữ liệu động. Bạn có thể tìm hiểu kỹ những gì bạn có thể làm với SW-Toolbox với hướng dẫn sử dụng này và bài đăng trên blog này.
Nếu bạn muốn tìm hiểu kỹ về Nhân viên dịch vụ, Mozilla sẽ tổng hợp Sổ tay nấu ăn của Nhân viên dịch vụ với mã mẫu cho nhiều việc khác nhau mà nhân viên dịch vụ có thể làm.
Thử nghiệm
Khi đã có mọi thứ, bạn có thể kiểm tra Tệp kê khai ứng dụng web và Trình làm việc dịch vụ từ tab Ứng dụng của Chrome DevTools:
Bạn có thể thử với hộp kiểm Offline để kiểm tra xem ứng dụng của bạn sẽ phản ứng như thế nào khi offline . Khi thử nghiệm với các cấu hình Service Worker khác nhau, cũng rất hữu ích khi có thể hủy đăng ký service worker hiện tại để version mới của service worker được đăng ký.
Học nhiều hơn nữa
Vì đây chỉ là phần giới thiệu ngắn gọn, bạn có thể cần đi sâu hơn vào các ứng dụng web tiến bộ. Dưới đây là một số tài nguyên tốt:
- Danh sách kiểm tra Ứng dụng web tiến bộ chuyên sâu hơn từ Google.
- Cổng ứng dụng web tiến bộ của Google.
- Bản ghi này của Hội nghị thượng đỉnh về ứng dụng web tiến bộ năm 2016.
Các tin liên quan
Cách cài đặt Django Web Framework trên Ubuntu 16.042016-05-16
Cách triển khai ứng dụng web Clojure trên FreeBSD 10.2
2015-12-22
Cách triển khai ứng dụng web Clojure trên Ubuntu 14.04
2015-11-20
Cách thiết lập web server khả dụng cao với IP giữ và nổi trên Ubuntu 14.04
2015-10-20
Xây dựng cho Sản xuất: Ứng dụng Web - Tổng quan
2015-06-01
Xây dựng cho Sản xuất: Ứng dụng Web - Giám sát
2015-06-01
Xây dựng cho Sản xuất: Ứng dụng Web - backup
2015-06-01
Xây dựng cho Sản xuất: Ứng dụng Web - Triển khai
2015-06-01
Xây dựng cho sản xuất: Ứng dụng web - Ghi log tập trung
2015-06-01
Xây dựng cho Sản xuất: Ứng dụng Web - Lập kế hoạch khôi phục
2015-06-01
