در دنیای امروز، اپلیکیشنهای وب پیشرونده (PWA) جایگاه ویژهای در توسعه وب پیدا کردهاند. یکی از قابلیتهای مهم این نوع اپلیکیشنها، پشتیبانی از **حالت آفلاین (Offline-Mode)** است که باعث میشود کاربران بتوانند بدون اتصال به اینترنت از بخشهایی از اپلیکیشن استفاده کنند. در این مقاله، نحوه طراحی و پیادهسازی معماری Offline-Mode در یک PWA مبتنی بر **Nuxt.js** را بررسی خواهیم کرد.
- **بهبود تجربه کاربری**: کاربران حتی بدون اینترنت میتوانند به برخی از بخشهای اپلیکیشن دسترسی داشته باشند.
- **کاهش مصرف دادههای اینترنتی**: دادههایی که قبلاً کش شدهاند، نیازی به بارگذاری مجدد ندارند.
- **افزایش سرعت و عملکرد اپلیکیشن**: اطلاعات ذخیرهشده بهصورت لوکال در دسترس کاربران قرار میگیرد.
ابتدا یک پروژه Nuxt.js جدید ایجاد کرده و ماژول PWA را به آن اضافه میکنیم:
sh
npx create-nuxt-app my-nuxt-pwa
cd my-nuxt-pwa
npm install @nuxtjs/pwa
سپس ماژول PWA را در فایل `nuxt.config.js` اضافه میکنیم:
javascript
export default {
modules: [
'@nuxtjs/pwa'
],
pwa: {
workbox: {
offline: true,
offlinePage: '/offline.html'
}
}
}
**Service Worker** یکی از مهمترین بخشهای PWA است که وظیفه ذخیرهسازی و مدیریت دادههای آفلاین را برعهده دارد. برای کنترل دقیقتر، میتوان فایل `static/sw.js` را ایجاد کرده و آن را در `nuxt.config.js` ثبت کرد:
javascript
export default {
pwa: {
workbox: {
importScripts: ['/sw.js'],
cachingExtensions: '@/plugins/workbox.js'
}
}
}
javascript
self.addEventListener('install', event => {
event.waitUntil(
caches.open('offline-cache').then(cache => {
return cache.addAll([
'/',
'/offline.html',
'/styles.css',
'/logo.png'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(event.request) || caches.match('/offline.html');
})
);
});
یک صفحه اختصاصی برای نمایش در صورت نبود اینترنت ایجاد میکنیم.
`pages/offline.vue`:
vue
<template>
<div class="offline-container">
<h1>شما آفلاین هستید</h1>
<p>لطفاً اتصال اینترنت خود را بررسی کنید.</p>
</div>
</template>
<style>
.offline-container {
text-align: center;
margin-top: 50px;
}
</style>
برای ذخیره دادههای داینامیک در حالت آفلاین، میتوان از **IndexedDB** استفاده کرد. یک پلاگین Vuex ایجاد میکنیم که هنگام اتصال اینترنت، دادهها را همگامسازی کند.
`plugins/indexedDB.js`:
javascript
import { openDB } from 'idb';
export default async function ({ store }) {
const db = await openDB('app-db', 1, {
upgrade(db) {
db.createObjectStore('posts', { keyPath: 'id' });
}
});
store.commit('setDB', db);
}
- اپلیکیشن را در **حالت آفلاین مرورگر** تست کنید.
- از **Lighthouse** برای بررسی عملکرد PWA استفاده کنید.
npm run devبا پیادهسازی معماری Offline-Mode در Nuxt.js، اپلیکیشن شما بهبود عملکرد چشمگیری خواهد داشت و تجربه کاربری بهتری ارائه خواهد داد. استفاده از **Service Worker**، **IndexedDB** و **کشینگ هوشمند**، امکان ذخیره و بارگذاری دادهها را در حالت آفلاین فراهم میکند.
