مدرن‌ترین روش اضافه کردن قابلیت PWA

عالیه 😁

اگر به دیزاین علاقه دارید ، پیشنهاد میکنم این آموزش فیگما رو ببینید. خوب و شفاف توضیح میده

Udemy - NEW Figma 2024 Getting started the Beginner to Pro Class 2025-5

روی دانلودلی هستش

ممکنه سوال پیش بیاد چرا از ابتدای شروع کانال تا الان ، هیچ وقت دوره فارسی معرفی نکردم؟

چند دلیل عمده داره:

۱- کلا مفاهیم انگلیسی وقتی به فارسی میاد ، هر چند که دقیق ترجمه شه ، باز هم اون شاکله اصلیش رو از دست میده

۲- فرقی نداره مدرس خارجی باشه یا ایرانی. وقتی میخواد دوره‌ای رو ضبط کنه ، محبوره بخشی از مفاهیم رو حذف کنه ولی متاسفانه ایرانی‌ها خیلی بیشتر حذف می‌کنن.

۳- سعی کنید بیشتر داکیومنت بخونید ولی برای یه چیزی مثل فیگا داکیومنت خوندن کمی بی‌معناست.

۴- ایرانی‌ها دیر‌به‌دیر ویدیو میسازن و این باعث میشه دوره‌شون خیلی بروز نباشه. دوره خوب ساختن خیلی کار سختیه و طرف اگر زیر ۴۰۰،۵۰۰ میلیون درنیاره به نظرم منطقی نیست براش.

بعد از ساعت ۶ عصر ، هیچ اتفاق مثبتی توی شرکت نمیفته. برو خونه دوست من.

این متن رو از روی قسمت ninja code سایت javanoscriptinfo حدود ۴ سال پیش نوشتم البته کاملا بومی سازی شده و میشه گفت تا ۵۰ درصد و بیشتر با متن اصلی فرق داره.

پیشنهاد میکنم بخونید.

چطوری یک برنامه‌نویس مزخرف باشیم؟

https://github.com/alithecodeguy/persian-javanoscript.info/blob/master/0026%20ninja%20code.pdf

اینم جالب بود

📜 قابلیت Web Worker در مرورگر چیست و چرا باید از آن استفاده کنیم؟

قابلیت Web Worker به شما اجازه می‌دهد که کدهای JavaScript را در یک thread جداگانه اجرا کنید، مستقل از thread اصلی مرورگر. این یعنی می‌توانید عملیات‌های سنگین را بدون تأثیر روی UI انجام دهید و رابط کاربری روان باقی بماند.

🔰 مزایای استفاده از Web Worker

• جلوگیری از هنگ کردن رابط کاربری در زمان انجام محاسبات سنگین
• اجرای عملیات پردازشی سنگین خارج از thread اصلی
• افزایش کارایی در اپلیکیشن‌هایی مانند:
- پردازش تصویر یا ویدیو
- تجزیه فایل‌های JSON حجیم
- مرتب‌سازی یا فیلتر داده‌ها
- انجام محاسبات بلادرنگ (Real-time)
- سینک شدن اطلاعات در پس‌زمینه

🌀 انواع Web Worker

1️⃣ نوع Dedicated Worker: مخصوص یک صفحه یا اسکریپت خاص است و فقط همان صفحه می‌تواند با آن ارتباط داشته باشد. مناسب برای پردازش تصویر و عملیات سنگین تک‌صفحه‌ای است.

- این نوع Worker برای اجرای عملیات پردازشی سنگین که نباید رابط کاربری (UI) را مختل کند، بسیار مناسب است.

- مثل یک نخ (thread) مجزاست که در پس‌زمینه اجرا می‌شود و از طریق ارسال و دریافت پیام با thread اصلی در ارتباط است.

ویژگی‌های اصلی Dedicated Worker

- فقط توسط اسکریپتی که آن را ساخته قابل دسترسی است
- در background اجرا می‌شود
- به DOM دسترسی ندارد
- با postMessage و onmessage داده رد و بدل می‌کند
- می‌توان از importScripts() برای بارگذاری اسکریپت‌های دیگر درون آن استفاده کرد
- هنگام اتمام کار می‌توان با terminate() آن را متوقف کرد
- باید از مسیر مجزا (URL) بارگذاری شود؛ نمی‌توان inline نوشت مگر با Blob
- می‌توان چند Worker همزمان ساخت
- می‌توان از structuredClone برای ارسال داده‌های پیچیده استفاده کرد

کاربردهای متداول Dedicated Worker

- پردازش سنگین ریاضی (محاسبه، شبیه‌سازی، الگوریتم‌ها)
- فیلتر کردن داده‌ها (مثلاً لیست‌های بزرگ)
- رمزنگاری یا هش کردن
- پردازش تصویر (فیلتر، بلور، resize)
- پارس کردن JSON یا فایل‌های بزرگ

‍main.js

const worker = new Worker("worker.js");

worker.postMessage("Hello Worker!");

worker.onmessage = function (e) {
  console.log("Received from worker:", e.data);
};

worker.js

onmessage = function (e) {
  console.log("Received from main:", e.data);
  postMessage("Hi Main!");
};

2️⃣ نوع Shared Worker: چندین صفحه یا تب می‌توانند به یک Shared Worker دسترسی داشته باشند. مناسب برای چت‌های همزمان بین چند تب یا مدیریت داده‌های مشترک است.

می‌تونه بین چند تب، iframe یا حتی چند اسکریپت در یک صفحه مشترک استفاده بشه.

برخلاف Dedicated Worker که فقط یک ارتباط بین یک صفحه و یک Worker برقرار می‌کنه، Shared Worker می‌تونه بین چند بخش مختلف از برنامه ارتباط مشترک ایجاد کنه.

ویژگی‌های اصلی Shared Worker

- قابلیت اشتراک‌گذاری بین چند تب یا iframe
- مدیریت داده‌ی مشترک بین چند بخش از یک یا چند صفحه
- ارتباط از طریق پورت (port) انجام می‌شه
- فقط یک نمونه در مرورگر ساخته می‌شه و همه‌ی تب‌ها از همون استفاده می‌کنن
- به DOM دسترسی نداره
- به‌درد اپلیکیشن‌های real-time یا multi-tab خیلی می‌خوره
- می‌تونی آرایه‌ای از portها رو درون Worker نگه داری و پیام‌ها رو به همه broadcast کنی
- از BroadcastChannel API هم می‌شه به‌صورت ترکیبی استفاده کرد
- فقط اولین بار که تب باز می‌شه Worker جدید ساخته می‌شه، بقیه تب‌ها به همون متصل می‌شن
- در برخی نسخه‌های قدیمی Safari و IE پشتیبانی نمی‌شه
ارتباط کمی پیچیده‌تر از Dedicated Worker داره چون از port استفاده می‌کنه
- باید حواست باشه که Worker ممکنه از قبل در حال اجرا باشه (shared lifecycle)

کاربردهای واقعی Shared Worker

- چت real-time بین تب‌ها
- هماهنگ‌سازی لاگین یا لاگ‌اوت بین تب‌ها
- نگهداری وضعیت session به‌صورت مرکزی
- اشتراک‌گذاری connection به WebSocket بین تب‌ها (صرفه‌جویی در منابع)
- اعمال throttle یا debouncing روی درخواست‌های همزمان از چند تب

shared-worker.js

onconnect = function (e) {
  const port = e.ports[0];
  port.onmessage = function (e) {
    port.postMessage("Shared: " + e.data);
  };
};

main.js

const worker = new SharedWorker("shared-worker.js");
worker.port.start();
worker.port.postMessage("Hi Shared Worker");

worker.port.onmessage = (e) => {
  console.log(e.data);
};

#worker @danceswithcode

ادامه در پست بعد

3️⃣ نوع Service Worker: مثل یک پروکسی بین مرورگر و شبکه عمل می‌کند. کاربرد آن بیشتر در PWAها، کش کردن منابع، و پشتیبانی از حالت آفلاین است.

ویژگی‌های کلیدی Service Worker

- در پس‌زمینه اجرا می‌شود
- مستقل از تب‌ها و صفحات است
- فقط از طریق HTTPS یا localhost کار می‌کند
- رویدادمحور (event-driven) است
- به DOM دسترسی ندارد
- می‌تواند حتی وقتی تب بسته است هم کار کند (مثلاً Push Notification)

Lifecycle (چرخه‌ی عمر)

۱. Install
برای اولین بار که Service Worker ثبت می‌شود، فایل آن نصب می‌شود. در این مرحله می‌توان منابع لازم را cache کرد.

۲. Activate
بعد از نصب موفق، فعال می‌شود. این مرحله برای پاک‌سازی cacheهای قدیمی هم کاربرد دارد.

۳. Fetch
هر بار که مرورگر درخواستی (مثلاً fetch یا load) ارسال می‌کند، Service Worker آن را رهگیری می‌کند و می‌تواند پاسخ را از cache یا شبکه بدهد.

استراتژی‌های caching مهم

۱. Cache First: اول از cache بخون، اگر نبود برو سراغ شبکه
۲. Network First: اول از شبکه بیار، اگر قطع بود از cache استفاده کن
۳. Stale-While-Revalidate: از cache نشون بده، در پس‌زمینه یک نسخه جدید بگیر
۴. Cache Only: فقط از cache استفاده کن
۵. Network Only: فقط از شبکه استفاده کن

معرفی ابزار حرفه‌ای: Workbox

ابزار Workbox کتابخانه‌ای از گوگل هست که ساخت و مدیریت Service Workerها را خیلی راحت‌تر و حرفه‌ای‌تر می‌کنه.

مزایا:
- سادگی استفاده
- پشتیبانی از استراتژی‌های caching مختلف
- تولید اتوماتیک فایل cache در زمان build
- عالی برای پروژه‌های React، Vue، Next.js و …

قابلیت‌های ویژه Service Worker

- Push Notification
دریافت پیام از سرور حتی وقتی تب بسته‌ست
- Background Sync
ارسال داده به سرور زمانی که اینترنت وصل می‌شود
- App Shell Model
مناسب برای PWAها؛ صفحات سریع و آفلاین
- Offline fallback
وقتی اینترنت قطع بود، صفحه‌ای مخصوص نشون بده

محدودیت‌ها و نکات امنیتی

- فقط در HTTPS یا localhost کار می‌کند
- به DOM دسترسی ندارد
- باید در root domain ثبت شود (مثلاً /sw.js نه /pages/sw.js)
- نسخه‌های قدیمی باید مدیریت شوند و cacheها پاک شوند
- زمان‌بندی دقیقی برای اجرای آن نیست (مرورگر تصمیم می‌گیرد)

کاربردهای واقعی Service Worker

- ساخت اپلیکیشن آفلاین (مانند Google Docs)
- ارسال اعلان بدون باز بودن تب
- کاهش مصرف داده با cache هوشمند
- نمایش fallback page هنگام قطعی اینترنت
- پشتیبانی از background sync برای فرم‌های آفلاین

⸻

Register it:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log("SW Registered"));
}

sw.js

self.addEventListener('install', (event) => {
  console.log("Service Worker installing.");
});

self.addEventListener('fetch', (event) => {
  console.log("Intercepting fetch:", event.request.url);
});

#worker @danceswithcode

ادامه در پست بعد

4️⃣ نوع Module Worker: نوع جدیدی از Web Worker است که با type: "module" ساخته می‌شود و اجازه می‌دهد از import/export استفاده کنی. برای برنامه‌نویسی ماژولار در Web Worker بسیار مفید است.

- امکان استفاده از import/export در Worker
- سازگاری با معماری ماژولار (modular) و قابل نگهداری
- بدون نیاز به importScripts (که مخصوص اسکریپت‌های کلاسیکه)
- قابل استفاده در پروژه‌های مدرن با ابزارهایی مثل Vite، Webpack، Rollup و ESBuild
- پشتیبانی کامل در مرورگرهای مدرن (Chrome, Edge, Firefox, Safari)

math-worker.js

mport { heavySum } from './utils.js';

self.onmessage = (event) => {
  const n = event.data;
  const result = heavySum(n);
  self.postMessage(result);
};

utils.js

export function heavySum(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

main.js

const worker = new Worker('./math-worker.js', { type: 'module' });

worker.postMessage(1000000);

worker.onmessage = (e) => {
  console.log("✅ پاسخ از Module Worker:", e.data);
};

توجه: اگر type: "module" رو ننویسی، مرورگر فایل رو به‌صورت classic noscript تفسیر می‌کنه و استفاده از import/export باعث ارور syntax می‌شه.

- مسیر فایل باید نسبی یا مطلق صحیح باشه (./worker.js یا /js/worker.js)
- فایل‌ها باید از روی سرور (یا localhost) اجرا بشن — اجرا از فایل سیستمی (file://) معمولا خطا می‌ده
- اگر از ابزارهایی مثل Webpack یا Vite استفاده می‌کنی، باید loader مخصوص Web Worker یا plugin استفاده کنی
- نمی‌تونی از CDN (مثل unpkg) مستقیم توی Worker import کنی مگر اینکه CORS اجازه بده

const worker = new Worker("module-worker.js", { type: "module" });

module-worker.js

import { helper } from './helper.js';
onmessage = e => {
  postMessage(helper(e.data));
};

5️⃣ نوع Worklet: اسکریپت‌های بسیار سبک و کوچک که برای کارهایی مثل افکت‌های بصری (CSS Houdini) یا پردازش صدا (Web Audio API) به کار می‌روند. سریع و کم‌هزینه هستند ولی محدودتر از سایر Workerها.
مثل:
- 🎨 ‌CSS Houdini (Paint Worklet)
- 🔊 Web Audio API (Audio Worklet)
- 📐 Layout Worklet (درحال توسعه)

- نه thread جداگانه داره و نه access به اغلب APIهای معمول مرورگر
- در محیطی ultra-sandboxed اجرا می‌شه
- حتی خیلی از APIهای پایه (مثل fetch, setTimeout, console.log) هم در اون‌ها وجود نداره

مثال: Paint Worklet (CSS Houdini)

paint.js

registerPaint('circle', class {
  paint(ctx, geom, properties) {
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, 40, 0, 2 * Math.PI);
    ctx.fill();
  }
});

Register in main.js:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('paint.js');
}

css

.my-box {
  width: 100px;
  height: 100px;
  background: paint(circle);
}

مرورگر در لحظه‌ی رندر paint(circle)، تابع paint() رو از فایل paint.js اجرا می‌کنه.

مثال: Audio Worklet

processor.js

class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach(channel => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor('white-noise', WhiteNoiseProcessor);

main.js

const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule('processor.js');
const node = new AudioWorkletNode(audioContext, 'white-noise');
node.connect(audioContext.destination);

این کد یک نویز سفید تولید می‌کنه که مستقیماً به اسپیکر وصل می‌شه.

#worker @danceswithcode

این مطلب در قالب سه پست ، تکمیل شد

☝️☝️☝️
۳ تا پست بالا رو از دست ندید. صفر تا صد web workerها رو یاد میگیرید. پیش نیاز چیزهایی مثل PWA هستش و علاوه بر اون توی مصاحبه‌ها گاها سوال می‌پرسن ازش
☝️☝️☝️

در Next.js برای پیاده‌سازی قابلیت‌های مشترک (common functionality) بین صفحات یا کامپوننت‌ها، استراتژی‌های مختلفی وجود دارد که می‌توان بسته به نیاز، بهترین روش را انتخاب کرد:

1️⃣ HOC (Higher-Order Components)

برای اعمال یک منطق مشترک به چندین کامپوننت (مثلاً احراز هویت، theme، لاگ کردن، ردیابی و…) می‌توان از HOC استفاده کرد.

// withAuth.tsx
const withAuth = (Component) => {
  return function AuthComponent(props) {
    const isLoggedIn = useSessionCheck()
    if (!isLoggedIn) return <Login />
    return <Component {...props} />
  }
}

2️⃣ Custom Hooks

برای منطق‌های قابل استفاده مجدد مثل fetch داده، فرم‌ها، انیمیشن، ریسپانسیو بودن، و… می‌توان از هوک‌های سفارشی استفاده کرد.

// useFetchData.ts
export const useFetchData = (url: string) => {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData)
  }, [url])
  return data
}

3️⃣ Layout های مشترک

برای اشتراک یک ساختار پایه مثل هدر، سایدبار، فوتر، در تمام صفحات.

- در Next.js 13 به بعد (app router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        <Sidebar />
        <main>{children}</main>
      </body>
    </html>
  )
}

- در pages router (نسخه‌های قبل):

// _app.tsx
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

4️⃣ Middleware (برای درخواست‌های مشترک سمت سرور)

در نسخه‌های جدید Next، از Middleware برای انجام بررسی‌های مشترک قبل از رسیدن درخواست به صفحه استفاده می‌شود.

مثال: redirect کاربران مهمان، یا بررسی locale:

// middleware.ts
export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')
  if (!token) {
    return NextResponse.redirect('/login')
  }
}

5️⃣ API Handler های مشترک

 js
// lib/api.ts
export const fetchUser = async () => {
  return await fetch('/api/user').then(res => res.json())
}

6️⃣ Context API / Zustand / Redux

برای اشتراک state بین صفحات و کامپوننت‌ها. مثلاً برای مدیریت session، theme، زبان و…

// app/provider.tsx
export const GlobalContext = createContext()

export function GlobalProvider({ children }) {
  const [user, setUser] = useState(null)
  return (
    <GlobalContext.Provider value={{ user, setUser }}>
      {children}
    </GlobalContext.Provider>
  )
}

7️⃣ Server Actions (در App Router)

در Next 13+ می‌توان logicهای server-side قابل اشتراک را به صورت تابع در فایل‌ها نوشت.

// app/actions/login.ts
export async function login(formData: FormData) {
  const res = await fetch('/api/login', { method: 'POST', body: formData })
  return res.json()
}

8️⃣ Utility Functions / Helpers

توابع کمکی مثل formatDate، validateEmail، calculateTotal و… را در پوشه‌ی lib/ یا utils/ تعریف کرده و در کل پروژه استفاده کنید.

// utils/format.ts
export const formatDate = (date: Date) =>
  new Intl.DateTimeFormat('fa-IR').format(date)

9️⃣ Shared Components

کامپوننت‌هایی مثل دکمه، مودال، فرم، toast notification و… را در یک پوشه components/shared/ نگه دارید.

🔟 Monorepo / Shared Packages (در پروژه‌های بزرگ یا microfrontend)

با استفاده از Turborepo یا Nx می‌توانید ماژول‌های مشترک بین چند پروژه را به شکل بسته مجزا نگه دارید.

#nextjs #commonfunctionality

کانال رقصنده با کد
@danceswithcode

قصد دارم یک دوره جامع از جاوااسکریپت برگزار کنم ، یعنی از صفر تا metaprogramming ولی نمیخوام اگر دوره‌ای هست که این کار رو انجام داده ، من مجددا تکرارش کنم.

ممنون میشم اگر دوره جاوااسکریپتی میشناسید که به نظرتون خیلی جامع و کامله ، همینجا معرفیش کنید تا برم سرفصل‌هاش رو بررسی کنم.

فقط خود pure javanoscript

پاورقی: دوره فارسی


سرفصل‌های مدنظرم خودم:

Session 1: Introduction to JavaScript
Session 2: Language Fundamentals
Session 3: Control Flow and Error Handling
Session 4: Functions (Basics)
Session 5: Advanced Functions (Context & Closures)
Session 6: Data Structures (Objects & Arrays)
Session 7: Prototypes and OOP in JS
Session 8: Built-in Objects & Advanced Types
Session 9: Asynchronous JS Part 1 – Event Loop & Callbacks
Session 10: Asynchronous JS Part 2 – Promises & Async/Await
Session 11: Iterators and Generators
Session 12: Metaprogramming (Proxies & Reflect)
Session 13: Modules (ES6 Modules and Old Modules)
Session 14: Advanced Topics & Best Practices
Session 15: JavaScript in the Browser – The DOM
Session 16: JavaScript on the Server – Node.js

چندتا تایم خالی در هفته برای بحث آموزش و منتورینگ وجود داره.
در صورت تمایل ، هستم در خدمتتون.

@alithecodeguy

به پست‌های که مورد موضوعات خیلی نادر یا نکته‌های عجیب غریبه ، اعتنا نکنید و اعتماد به نفستون رو زخمی نکنه که چرا شما کم بلدید یا بلد نیستید.

آدم‌هایی که کار واقعی انجام نمیدن ، دنبال اینجور چیزان. (معمولا)

یه مدت دارم خودخوری می‌کنم که آیا خدا رو خوش میاد ۱۰ تومن بگیرم برای ۱۶ جلسه یا ظلمه. برای دوره‌ای که کل جاوااسکریپت رو پوشش میده ( به معنای واقعی کلمه ، کل جاوااسکریپت رو) ، البته هم وقتی میگم ۱۶ جلسه احتمالا یعنی ۲۵ جلسه اینقدر باب‌های جدید برای صحبت باز میشه 😅

اونوقت برای ریکت با کمی خرده ریز از تایپ و اسکریپت و اینجور چیزا ، ۱۸ تومن میگیرن!

نوش جونشون ولی اخلاقی نیست. اونی که داره ورود می‌کنه ، نمیدونه داره هزینه‌ چی رو میده

میتونم به جرات بگم ، این مجموعه سوالات ، حداقل ۹۰ درصد سوالات یک مصاحبه معقول رو کاور میکنه 👌

جا داره حداقل نیم ساعت یک ساعت روی هر کدوم وقت بذارید.

اصلاً انتظار نداشتم اینطوری تموم بشه :)))))


@SixtyNinePercent

میپرسن کجا بریم کارآموزی؟

والا هندونه در بسته‌اس.

همونجور که کسی رو به کسی نباید معرفی کرد برای ازدواج ، شرکتی هم نباید به کارآموزی پیشنهاد داد.