Rails 8 sinh sẵn app/views/pwa/manifest.json.erb và service-worker.js cho ứng dụng mới, nhưng nội dung gần như trống và route vẫn đang bị comment. Để ứng dụng nghiệp vụ dùng được từ màn hình chính của điện thoại, cần thêm vài bước.
Bước 1: cho phép cài đặt
# config/routes.rb
get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
<%# app/views/layouts/application.html.erb %>
<link rel="manifest" href="<%= pwa_manifest_path(format: :json) %>">Trong manifest.json.erb, khai báo name, start_url, display: standalone, theme_color và chuẩn bị icon 192px, 512px. Có thể kiểm tra đã đủ điều kiện cài đặt hay chưa ở tab Application của Chrome DevTools.
Bước 2: hiển thị khi offline
// app/views/pwa/service-worker.js
const CACHE = "offline-v1";
self.addEventListener("install", (event) => {
event.waitUntil(caches.open(CACHE).then((c) => c.add("/offline.html")));
});
self.addEventListener("fetch", (event) => {
if (event.request.mode !== "navigate") return;
event.respondWith(fetch(event.request).catch(() => caches.match("/offline.html")));
});Chỉ áp dụng cho request chuyển trang, ưu tiên lấy từ mạng và trả về trang offline khi thất bại. Với màn hình có dữ liệu nghiệp vụ, an toàn nhất là chỉ cache trang tĩnh để tránh hiển thị dữ liệu cũ.
Lưu ý khi vận hành
- Khi cập nhật Service Worker, đổi tên cache và xóa cache cũ trong sự kiện activate
- Safari trên iOS không hiện gợi ý cài đặt, cần chuẩn bị hướng dẫn cho người dùng
- Nếu dùng thông báo đẩy, chỉ xin quyền sau một thao tác của người dùng