Bài 34.4: PWA features trong Next.js-TypeScript

Chào mừng các bạn quay trở lại với chuỗi bài viết về Lập trình Web Front-end! Hôm nay, chúng ta sẽ đào sâu vào một chủ đề cực kỳ thú vị và quan trọng trong việc nâng cao trải nghiệm người dùng: Progressive Web App (PWA). Đặc biệt, chúng ta sẽ tìm hiểu cách triển khai các tính năng PWA mạnh mẽ ngay trong dự án Next.js của mình, tận dụng lợi thế của TypeScript để code an toàn và dễ bảo trì hơn.

PWA không phải là một công nghệ riêng lẻ, mà là một tập hợp các tiêu chuẩn và kỹ thuật web hiện đại cho phép các trang web mang lại trải nghiệm người dùng gần gũi với ứng dụng native hơn: đáng tin cậy (reliable), nhanh chóng (fast), và hấp dẫn (engaging).

Next.js, với khả năng Server-Side Rendering (SSR), Static Site Generation (SSG), tối ưu hóa hiệu suất và cấu trúc dựa trên file system, đã là một nền tảng tuyệt vời để xây dựng các ứng dụng web hiện đại. Khi kết hợp với các tính năng PWA, chúng ta có thể biến ứng dụng Next.js của mình thành một trải nghiệm liền mạch, có thể cài đặt trực tiếp lên thiết bị của người dùng, hoạt động ngoại tuyến và tương tác như một ứng dụng native thực thụ.

Việc sử dụng TypeScript trong dự án Next.js PWA không chỉ giúp bạn bắt kịp xu hướng phát triển hiện đại mà còn mang lại sự an toàn kiểu dữ liệu, giúp phát hiện lỗi sớm ngay trong quá trình phát triển và làm cho code dễ đọc, dễ hiểu, dễ bảo trì hơn, đặc biệt khi làm việc với các cấu hình phức tạp của PWA.

Vậy làm thế nào để chúng ta biến một ứng dụng Next.js TypeScript thành một PWA? Chúng ta cần tập trung vào các thành phần cốt lõi sau:

Web App Manifest: Một file JSON chứa thông tin về ứng dụng của bạn, cách nó sẽ xuất hiện khi được "cài đặt" lên thiết bị.
Service Worker: Một script chạy ngầm độc lập với trang web của bạn, đóng vai trò như một proxy mạng, cho phép caching tài nguyên, xử lý yêu cầu ngoại tuyến và kích hoạt các tính năng nâng cao khác như push notifications.
HTTPS: Bắt buộc phải có để sử dụng Service Worker, đảm bảo tính bảo mật cho dữ liệu người dùng.

Chúng ta sẽ đi sâu vào cách tích hợp và cấu hình từng thành phần này trong dự án Next.js TypeScript.

Tích hợp PWA vào Next.js với `next-pwa`

Cách phổ biến và được khuyến nghị để thêm tính năng PWA (đặc biệt là Service Worker) vào Next.js là sử dụng plugin next-pwa. Plugin này tận dụng thư viện mạnh mẽ Workbox của Google để tự động tạo và quản lý Service Worker cho ứng dụng của bạn.

Đầu tiên, hãy cài đặt next-pwa:

npm install next-pwa @imbios/next-pwa --save-dev
# Hoặc
yarn add next-pwa @imbios/next-pwa -D

Giải thích: Chúng ta cần cài đặt cả next-pwa và @imbios/next-pwa. Phiên bản @imbios/next-pwa là một fork được duy trì tích cực hơn và thường được sử dụng trong các dự án mới hoặc khi cần các bản sửa lỗi/tính năng mới nhất.

Sau khi cài đặt, chúng ta cần cấu hình plugin này trong file next.config.js (hoặc next.config.mjs tùy thuộc vào cấu hình dự án của bạn). Lưu ý rằng file cấu hình Next.js thường là JavaScript, ngay cả trong dự án TypeScript.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // Các cấu hình Next.js khác của bạn ở đây
  // i18n: { ... }
}

const withPWA = require('@imbios/next-pwa')({
  dest: 'public', // Thư mục output cho Service Worker và Workbox files
  disable: process.env.NODE_ENV === 'development', // Tắt PWA trong môi trường dev để dễ debug
  register: true, // Tự động đăng ký Service Worker
  skipWaiting: true, // Kích hoạt Service Worker mới ngay lập tức khi có update
  // workboxOptions: { ... } // Các tùy chọn Workbox nâng cao (sẽ nói sau)
})

module.exports = withPWA(nextConfig)

Giải thích:

Chúng ta import withPWA từ plugin đã cài đặt.
withPWA là một Higher-Order Function (HOF) nhận vào cấu hình PWA và trả về một hàm cấu hình Next.js mới, sau đó nhận vào cấu hình Next.js ban đầu của bạn.
dest: 'public' chỉ định rằng các file liên quan đến PWA (như sw.js, workbox-*.js) sẽ được tạo và đặt trong thư mục public của bạn sau khi build.
disable: process.env.NODE_ENV === 'development' là một cấu hình quan trọng. Nó giúp bạn tắt Service Worker khi chạy ở chế độ development (npm run dev). Điều này rất tiện lợi vì Service Worker có thể gây khó khăn khi debug các thay đổi mã nguồn do cơ chế caching và cập nhật của nó. Khi build cho production (npm run build), process.env.NODE_ENV sẽ là 'production', và PWA sẽ được kích hoạt.
register: true nói với plugin tự động thêm mã đăng ký Service Worker vào ứng dụng của bạn.
skipWaiting: true là một tùy chọn Workbox. Khi có phiên bản Service Worker mới, tùy chọn này sẽ khiến nó được kích hoạt ngay lập tức, thay vì phải chờ tất cả client cũ được đóng. Điều này giúp người dùng nhận được bản cập nhật nhanh hơn (mặc dù có thể cần reload).

Sau khi thêm cấu hình này, mỗi khi bạn chạy npm run build, plugin next-pwa sẽ tạo ra file sw.js và các file Workbox cần thiết trong thư mục public.

Cấu hình Web App Manifest

Web App Manifest là một file JSON, thường được đặt tên là manifest.json, nằm trong thư mục public. Nó cung cấp các thông tin quan trọng cho trình duyệt và hệ điều hành để biết cách xử lý ứng dụng web của bạn khi người dùng muốn thêm nó vào màn hình chính (home screen) hoặc cài đặt nó.

Hãy tạo một file public/manifest.json với nội dung cơ bản sau:

// public/manifest.json
{
  "name": "Tên Ứng dụng PWA Tuyệt vời của bạn",
  "short_name": "PWA App",
  "description": "Mô tả ngắn gọn, hấp dẫn về ứng dụng PWA của bạn.",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
    // Bạn nên thêm nhiều kích thước icon khác nhau để tương thích tốt trên mọi thiết bị
    // Ví dụ: 72x72, 96x96, 128x128, 144x144, 152x152, 384x384
  ],
  "screenshots": [
    // Thêm ảnh chụp màn hình cho giao diện cài đặt
    // {
    //   "src": "/screenshots/screenshot1.png",
    //   "sizes": "1280x720",
    //   "type": "image/png"
    // },
    // {
    //   "src": "/screenshots/screenshot2.png",
    //   "sizes": "1280x720",
    //   "type": "image/png"
    // }
  ],
  "orientation": "any", // or "portrait", "landscape"
  "scope": "/"
}

Giải thích:

name và short_name: Tên đầy đủ và tên rút gọn hiển thị cho người dùng.
description: Mô tả ứng dụng, hiển thị trong giao diện cài đặt.
start_url: URL mà ứng dụng sẽ mở khi được khởi chạy từ màn hình chính. Thường là /.
display: Chế độ hiển thị. standalone sẽ hiển thị ứng dụng không có thanh địa chỉ trình duyệt, giống như ứng dụng native. Các tùy chọn khác bao gồm fullscreen, minimal-ui, browser.
theme_color: Màu sắc cho thanh tiêu đề cửa sổ (nếu có) hoặc thanh trạng thái của hệ điều hành.
background_color: Màu nền cho màn hình splash screen (màn hình chờ) khi ứng dụng khởi động.
icons: Một mảng các đối tượng mô tả các icon ứng dụng ở các kích thước khác nhau. Bạn cần tự tạo và đặt các file icon này vào thư mục tương ứng (ví dụ: public/icons/).
screenshots (tùy chọn): Giúp người dùng xem trước ứng dụng trước khi cài đặt.
orientation (tùy chọn): Hướng mặc định của ứng dụng (ví dụ: portrait hoặc landscape).

Lưu ý: Bạn cần đảm bảo rằng các file icon được tham chiếu trong manifest.json thực sự tồn tại trong thư mục public (ví dụ: public/icons/icon-192x192.png).

Liên kết Manifest và thêm các Meta Tags PWA

Để trình duyệt biết về file manifest.json và các cấu hình PWA khác, chúng ta cần thêm các thẻ <link> và <meta> vào phần <head> của trang HTML. Trong Next.js, nơi lý tưởng để làm điều này cho toàn bộ ứng dụng là file pages/_document.tsx.

Nếu bạn chưa có file _document.tsx, hãy tạo nó:

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="vi"> {/* Hoặc ngôn ngữ phù hợp với ứng dụng của bạn */}
        <Head>
          {/* Các thẻ meta và link head khác của bạn (ví dụ: favicon, SEO meta tags) */}
          {/* <meta name="description" content="..." /> */}
          {/* <link rel="icon" href="/favicon.ico" /> */}

          {/* Meta tags và link cho PWA */}
          {/* Liên kết đến file manifest.json */}
          <link rel="manifest" href="/manifest.json" />

          {/* Thêm các meta tag cần thiết cho PWA */}
          <meta name="application-name" content="Tên Ứng dụng PWA Tuyệt vời của bạn" />
          <meta name="apple-mobile-web-app-capable" content="yes" /> {/* Cho phép chạy ở chế độ full screen trên iOS */}
          <meta name="apple-mobile-web-app-status-bar-style" content="default" /> {/* Màu thanh trạng thái trên iOS */}
          <meta name="apple-mobile-web-app-title" content="PWA App" /> {/* Tên hiển thị trên iOS */}
          <meta name="description" content="Mô tả ngắn gọn, hấp dẫn về ứng dụng PWA của bạn." /> {/* Giống description trong manifest */}
          <meta name="format-detection" content="telephone=no" /> {/* Ngăn chặn tự động định dạng số điện thoại */}
          <meta name="mobile-web-app-capable" content="yes" /> {/* Cho phép chạy ở chế độ full screen trên Android/Chrome */}
          <meta name="msapplication-config" content="/icons/browserconfig.xml" /> {/* Tùy chọn cho Windows Tiles */}
          <meta name="msapplication-TileColor" content="#2B5797" /> {/* Màu cho Windows Tiles */}
          <meta name="msapplication-tap-highlight" content="no" /> {/* Ngăn chặn hiệu ứng tap highlight */}
          <meta name="theme-color" content="#000000" /> {/* Màu theme cho trình duyệt/hệ điều hành (thường trùng với manifest) */}

          {/* Liên kết đến các icon cho Apple touch icon */}
          <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
          {/* Bạn nên thêm các kích thước khác: apple-touch-icon-precomposed.png, apple-touch-icon-76x76.png, vv. */}

          {/* Các link icon khác (tùy chọn) */}
          <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" /> {/* Icon cho Safari pinned tabs */}
          <link rel="shortcut icon" href="/favicon.ico" /> {/* Favicon truyền thống */}

          {/* Link font nếu dùng (tùy chọn, nhưng nếu font là critical resource thì nên thêm vào đây hoặc preload) */}
          {/* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" /> */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Giải thích:

_document.tsx cho phép bạn tùy chỉnh cấu trúc HTML ban đầu của trang, bao gồm cả thẻ <html>, <head>, và <body>. Đây là nơi duy nhất bạn nên thêm các thẻ <link> và <meta> áp dụng cho toàn bộ ứng dụng mà không bị React unmount/remount.
Thẻ <link rel="manifest" href="/manifest.json" /> là quan trọng nhất để trình duyệt biết về file manifest của bạn.
Các thẻ <meta name="apple-mobile-web-app-..."> giúp tùy chỉnh trải nghiệm khi người dùng thêm PWA vào màn hình chính trên thiết bị iOS.
theme-color và application-name cũng quan trọng cho trải nghiệm người dùng trên các nền tảng khác.
apple-touch-icon là icon đặc biệt cho iOS khi được thêm vào màn hình chính.

Hiểu về Service Worker và Caching

Với plugin next-pwa và cấu hình next.config.js như trên, khi bạn chạy npm run build, plugin sẽ tự động tạo ra:

public/sw.js: File Service Worker chính.
public/workbox-*.js: Các thư viện Workbox cần thiết.

Service Worker (sw.js) sẽ được đăng ký bởi mã nguồn mà next-pwa tự động chèn vào ứng dụng của bạn (nhờ register: true). Một khi được cài đặt và kích hoạt, Service Worker sẽ nằm giữa trình duyệt và mạng. Nó có thể chặn các yêu cầu mạng từ trang web của bạn và quyết định cách xử lý chúng, thay vì để chúng đi thẳng ra mạng.

Khả năng chặn và xử lý yêu cầu mạng này là nền tảng cho các tính năng PWA cốt lõi:

Caching (Lưu trữ bộ nhớ đệm): Service Worker có thể lưu trữ các tài nguyên (HTML, CSS, JavaScript, hình ảnh, fonts, API responses, v.v.) vào Cache Storage API của trình duyệt. Khi cùng một tài nguyên được yêu cầu lần nữa, Service Worker có thể trả về phiên bản đã cache ngay lập tức mà không cần gọi ra mạng. Điều này làm cho ứng dụng rất nhanh khi người dùng truy cập lại.
Offline Support (Hỗ trợ ngoại tuyến): Bằng cách cache các tài nguyên quan trọng (giao diện người dùng, logic cơ bản), Service Worker có thể trả về chúng ngay cả khi thiết bị không có kết nối mạng. Điều này mang lại trải nghiệm đáng tin cậy, tránh trang "Không có kết nối internet" mặc định của trình duyệt.

next-pwa sử dụng Workbox để quản lý việc caching một cách thông minh. Workbox cung cấp các caching strategies (chiến lược cache) khác nhau:

Cache First (Cache-falling-back-to-Network): Thử lấy từ cache trước. Nếu không có trong cache, mới gọi mạng. Tốt cho các tài nguyên tĩnh ít thay đổi (CSS, JS, images).
Network First (Network-falling-back-to-Cache): Thử gọi mạng trước. Nếu mạng không khả dụng hoặc yêu cầu thất bại, mới thử lấy từ cache. Tốt cho các tài nguyên cần độ tươi mới nhưng vẫn muốn có fallback khi offline (API responses, HTML trang).
Stale While Revalidate: Trả về kết quả từ cache ngay lập tức (nếu có) trong khi vẫn gọi mạng ở chế độ nền để cập nhật cache cho lần sau. Tốt cho các tài nguyên cần được hiển thị nhanh nhưng vẫn muốn cập nhật (avatars người dùng, danh sách sản phẩm).
Network Only: Luôn gọi mạng. Không dùng cache. Tốt cho các yêu cầu POST hoặc các API cần dữ liệu thời gian thực.
Cache Only: Luôn lấy từ cache. Không gọi mạng. Chỉ hữu ích cho các tài nguyên đã được pre-cache (lưu sẵn vào cache khi cài đặt Service Worker) và không bao giờ thay đổi (app shell HTML/CSS/JS).

Mặc định, next-pwa/Workbox sẽ cấu hình các chiến lược caching hợp lý cho các tài nguyên tĩnh của Next.js. Nếu bạn cần tùy chỉnh sâu hơn (ví dụ: cache các API calls cụ thể), bạn có thể sử dụng tùy chọn workboxOptions trong cấu hình next.config.js. Tuy nhiên, đối với hầu hết các trường hợp cơ bản, cấu hình mặc định đã đủ tốt.

Ví dụ về cách tùy chỉnh workboxOptions (nâng cao):

// next.config.js (phần cấu hình next-pwa)
const withPWA = require('@imbios/next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true,
  // Tùy chỉnh Workbox
  workboxOptions: {
    // Định nghĩa các routes và chiến lược caching
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/your-api-url\.com\/api\//, // Regex khớp với URL API của bạn
        handler: 'NetworkFirst', // Hoặc 'StaleWhileRevalidate' tùy nhu cầu
        options: {
          cacheName: 'api-cache',
          expiration: {
            maxEntries: 50, // Số lượng mục tối đa trong cache
            maxAgeSeconds: 5 * 60, // Thời gian tối đa (5 phút) trước khi mục bị loại bỏ
          },
          cacheableResponse: {
            statuses: [0, 200] // Cache các response có status 0 (cross-origin opaque) hoặc 200
          }
        }
      },
      {
        urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/, // Regex khớp với các file hình ảnh
        handler: 'CacheFirst', // Lưu vào cache trước
        options: {
          cacheName: 'images-cache',
          expiration: {
            maxEntries: 60,
            maxAgeSeconds: 30 * 24 * 60 * 60, // 30 ngày
          }
        }
      }
    ]
  }
});

Giải thích: workboxOptions.runtimeCaching là một mảng, nơi bạn định nghĩa các quy tắc cache cho các yêu cầu mạng không phải là tài nguyên tĩnh của Next.js build. Mỗi đối tượng trong mảng cần có urlPattern (regex để khớp URL) và handler (chiến lược cache). Bạn cũng có thể thêm các options cụ thể cho từng handler.

Trải nghiệm Cài đặt (Installation Prompt)

Khi ứng dụng web của bạn đáp ứng các tiêu chí cơ bản của PWA (có Manifest, Service Worker, chạy trên HTTPS) và người dùng tương tác đủ với trang (heuristic của trình duyệt), trình duyệt sẽ tự động hiển thị một banner hoặc nút "Add to Home Screen" / "Install App".

Bạn không cần phải tự code banner này. Tuy nhiên, bạn có thể muốn cung cấp một nút cài đặt tùy chỉnh ngay trong giao diện người dùng của mình. Để làm điều này, bạn cần lắng nghe sự kiện beforeinstallprompt của trình duyệt. Sự kiện này được bắn ra ngay trước khi trình duyệt hiển thị prompt cài đặt mặc định. Bạn có thể chặn prompt mặc định và lưu sự kiện này lại để gọi .prompt() sau đó khi người dùng click vào nút cài đặt tùy chỉnh của bạn.

Dưới đây là một ví dụ đơn giản sử dụng React hook trong ngữ cảnh TypeScript:

// hooks/usePWAInstallPrompt.ts hoặc một file tương tự
import { useEffect, useState } from 'react';

// Kiểu dữ liệu cho sự kiện beforeinstallprompt
interface BeforeInstallPromptEvent extends Event {
  readonly platforms: Array<string>;
  readonly userChoice: Promise<{
    outcome: 'accepted' | 'dismissed';
    platform: string;
  }>;
  prompt(): Promise<void>;
}

let deferredPrompt: BeforeInstallPromptEvent | null = null;

const usePWAInstallPrompt = () => {
  const [showInstallButton, setShowInstallButton] = useState(false);

  useEffect(() => {
    const handleBeforeInstallPrompt = (e: Event) => {
      // Ép kiểu sự kiện để truy cập thuộc tính prompt()
      const promptEvent = e as BeforeInstallPromptEvent;
      console.log('beforeinstallprompt fired');
      // Ngăn chặn trình duyệt hiển thị prompt mặc định
      promptEvent.preventDefault();
      // Lưu sự kiện để có thể kích hoạt sau
      deferredPrompt = promptEvent;
      // Cập nhật state để hiển thị nút cài đặt tùy chỉnh
      setShowInstallButton(true);
    };

    // Thêm event listener
    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);

    // Cleanup function
    return () => {
      // Xóa event listener khi component unmount
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    };
  }, []); // Dependency rỗng, chỉ chạy một lần khi mount

  const handleInstallClick = async () => {
    if (deferredPrompt) {
      // Ẩn nút cài đặt
      setShowInstallButton(false);
      // Hiển thị prompt cài đặt của trình duyệt
      deferredPrompt.prompt();
      // Chờ phản hồi từ người dùng (accepted hoặc dismissed)
      const { outcome } = await deferredPrompt.userChoice;
      console.log(`User response to the install prompt: ${outcome}`);
      // Xóa sự kiện đã lưu
      deferredPrompt = null;
    }
  };

  // Trả về trạng thái hiển thị nút và hàm xử lý click
  return { showInstallButton, handleInstallClick };
};

export default usePWAInstallPrompt;

// pages/_app.tsx hoặc component layout chính của bạn
import type { AppProps } from 'next/app';
import { useEffect } from 'react';
import usePWAInstallPrompt from '../hooks/usePWAInstallPrompt'; // Import hook vừa tạo

function MyApp({ Component, pageProps }: AppProps) {
  // Sử dụng hook PWA install
  const { showInstallButton, handleInstallClick } = usePWAInstallPrompt();

  // Bạn có thể đặt nút cài đặt ở đây hoặc trong một component riêng
  return (
    <>
      {/* Các layout components khác của bạn */}
      <main>
        {/* Render component trang hiện tại */}
        <Component {...pageProps} />
      </main>

      {/* Nút cài đặt PWA tùy chỉnh */}
      {showInstallButton && (
        <div style={{ textAlign: 'center', padding: '10px', backgroundColor: '#f0f0f0' }}>
          Ứng dụng này có thể cài đặt lên thiết bị của bạn!{' '}
          <button onClick={handleInstallClick}>
            **Cài đặt ứng dụng**
          </button>
        </div>
      )}

      {/* Các components khác (ví dụ: footer) */}
    </>
  );
}

export default MyApp;

Giải thích:

Hook usePWAInstallPrompt lắng nghe sự kiện beforeinstallprompt.
Khi sự kiện xảy ra, nó gọi e.preventDefault() để ngăn prompt mặc định và lưu sự kiện vào biến deferredPrompt.
Nó cập nhật state showInstallButton để component hiển thị nút cài đặt.
Hàm handleInstallClick kiểm tra nếu deferredPrompt tồn tại (tức là sự kiện đã xảy ra và chưa được xử lý), sau đó gọi deferredPrompt.prompt() để kích hoạt prompt cài đặt native của trình duyệt.
Trong _app.tsx (hoặc một component cha phù hợp), chúng ta gọi hook và hiển thị nút cài đặt chỉ khi showInstallButton là true. Khi nút được click, chúng ta gọi handleInstallClick.

Lưu ý quan trọng và Các bước tiếp theo

HTTPS Bắt Buộc: Nhắc lại, Service Worker chỉ hoạt động trên kết nối bảo mật (HTTPS), trừ môi trường localhost (để phát triển). Khi deploy, hãy đảm bảo hosting của bạn cung cấp HTTPS (Vercel, Netlify, các dịch vụ cloud khác đều hỗ trợ).
Testing với Lighthouse: Công cụ Lighthouse tích hợp trong Chrome DevTools là người bạn tốt nhất để kiểm tra khả năng PWA của ứng dụng. Chạy audit và xem các mục "Progressive Web App" để biết ứng dụng của bạn đã đáp ứng các tiêu chí nào và cần cải thiện những gì.
Cập nhật Service Worker: Khi bạn build lại ứng dụng Next.js, một Service Worker mới sẽ được tạo ra nếu có sự thay đổi trong các file cache. Nhờ skipWaiting: true trong cấu hình next-pwa, Service Worker mới sẽ kích hoạt nhanh hơn. Tuy nhiên, đôi khi người dùng vẫn cần reload lại trang để thấy phiên bản mới nhất do cơ chế hoạt động của Service Worker.
Push Notifications: Triển khai push notifications là một tính năng PWA nâng cao, cho phép bạn gửi thông báo đến người dùng ngay cả khi họ không mở ứng dụng. Điều này yêu cầu logic phức tạp hơn bao gồm việc đăng ký người dùng nhận thông báo, có một server để gửi thông báo đến dịch vụ đẩy của trình duyệt, và Service Worker để nhận và hiển thị thông báo. next-pwa cung cấp một số hỗ trợ cơ bản, nhưng bạn sẽ cần thêm mã nguồn và server-side logic để triển khai hoàn chỉnh.
Offline Fallback Page: Bạn có thể cấu hình Workbox (qua workboxOptions) để hiển thị một trang fallback tùy chỉnh khi người dùng ngoại tuyến và tài nguyên yêu cầu không có trong cache. Điều này mang lại trải nghiệm người dùng thân thiện hơn thay vì trang lỗi mặc định.
TypeScript Type Safety: Việc sử dụng TypeScript giúp bạn đảm bảo các cấu hình như workboxOptions hoặc các logic xử lý Service Worker (nếu viết tay) được gõ đúng, giảm thiểu lỗi runtime.

Việc biến một ứng dụng Next.js TypeScript thành PWA là một quá trình bổ sung các lớp tính năng mạnh mẽ. Bằng cách tận dụng next-pwa để quản lý Service Worker và cấu hình Manifest một cách chính xác, bạn có thể cải thiện đáng kể tốc độ, độ tin cậy và khả năng tương tác của ứng dụng, mang lại trải nghiệm tiệm cận native cho người dùng của mình.

Hãy bắt đầu thử nghiệm và xem PWA có thể mang lại những lợi ích gì cho dự án web của bạn nhé!

Comments

There are no comments at the moment.