DevWebnextProgressive Web Apps

Progressive Web Apps (PWA)

  1. Cài đặt tại địa chỉ: https://www.npmjs.com/package/next-pwa
npm i next-pwa
  1. Cấu hình
/** @type {import('next').NextConfig} */
 
const prod = process.env.NODE_ENV === "production";
const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  skipWaiting: true,
  disable: prod ? false : true,
});
 
const nextConfig = {};
 
module.exports = withPWA(nextConfig);
  1. Chạy next build, thao tác này sẽ tạo hai tệp workbox-*.js và sw.js trong thư mục public.

  2. Kiểm tra Service workers ở tab Application của Dev Tool

  3. Tham khảo thêm tại: https://github.com/shadowwalker/next-pwa