Frontend इंटरव्यू: action.navigate को click fallback के साथ कैसे तालमेल बिठाना चाहिए?

1. प्रॉम्प्ट और दायरा

एक ऑर्डर-स्टेटस नोटिफिकेशन View order, Confirm delivery और Contact support एक्शन्स प्रदान करता है। ऐप बंद हो सकता है, कोई विंडो पहले से मौजूद हो सकती है, या सेशन समाप्त हो सकता है। Notification एक्शन्स के साथ फ़्लो डिज़ाइन करें और समझाएं कि ब्राउज़र नेविगेशन notificationclick के साथ कैसे तालमेल बिठाता है।

2. इंटरव्यूअर क्या टेस्ट कर रहा है

• यह समझना कि बॉडी navigate और एक्शन navigate अलग-अलग URLs हैं, जहाँ एक्शन URL कस्टम हैंडलिंग पर प्राथमिकता लेता है।
• यह जानना कि बिना URL वाला एक्शन notificationclick तक पहुँचता है, और असिंक्रोनस कार्य को event.waitUntil के साथ चालू रखना।
• समान-ऑरिजिन URLs, अनुमतियों, ऑथेंटिकेशन स्थिति और Service Worker के जीवनकाल को वैलिडेट करना।
• डुप्लिकेट कन्फर्मेशन्स या विंडोज़ से बचने के लिए टैग, बिज़नेस आइडेम्पोटेंसी कीज़ और क्लाइंट रिकवरी का उपयोग करना।

3. पहले स्पष्ट करने योग्य प्रश्न

1. क्या Confirm delivery एक GET नेविगेशन हो सकता है, या यह कन्फर्मेशन के साथ एक POST API होना चाहिए?
2. क्या समाप्त हो चुके सेशन को पहले लॉगिन खोलना चाहिए और बाद में एक्शन फिर से शुरू करना चाहिए?
3. क्या सपोर्ट एक्शन किसी बाहरी ग्राहक-सेवा डोमेन को लक्षित कर सकता है?
4. क्या किसी मौजूदा विंडो को फ़ोकस किया जाना चाहिए, मैसेज भेजा जाना चाहिए, या एक नई विंडो खोली जानी चाहिए?

4. तीस-सेकंड का उत्तर

मैं केवल-पढ़ने योग्य view और help एक्शन्स को अनुमति-सूचीबद्ध समान-ऑरिजिन URLs पर मैप करूँगा, जबकि साइड-इफेक्ट वाले कन्फर्मेशन एक्शन को बिना navigate के रखूँगा। Service Worker उस एक्शन को एक आइडेम्पोटेंट API के माध्यम से हैंडल करता है और फिर परिणाम पृष्ठ पर रूट करता है। प्रत्येक URL की जाँच की जाती है, असिंक्रोनस कार्य को waitUntil में लपेटा जाता है, और फ़ॉलबैक खोलने से पहले मौजूदा नियंत्रित विंडो को फ़ोकस किया जाता है।

5. चरण-दर-चरण गहन विश्लेषण

चरण 1: बॉडी और एक्शन URLs घोषित करें

await self.registration.showNotification("Order #123", {
  body: "Choose an action",
  tag: "order-123",
  navigate: "/orders/123",
  data: { orderId: "123", version: 4 },
  actions: [
    { action: "view", title: "View order", navigate: "/orders/123" },
    { action: "confirm", title: "Confirm delivery" },
    { action: "help", title: "Contact support", navigate: "/support/orders/123" },
  ],
});

बॉडी और एक्शन URLs वैलिडेटेड समान-ऑरिजिन रूट्स होने चाहिए। एक ऑर्डर के लिए नोटिफिकेशन्स को अपडेट या संयोजित करने के लिए tag का उपयोग करें, और data को रिकवरी के लिए आवश्यक गैर-संवेदनशील पहचानकर्ताओं तक सीमित रखें।

चरण 2: केवल-पढ़ने योग्य और साइड-इफेक्ट वाले एक्शन्स को अलग करें

View और help एक्शन्स केवल नेविगेट करते हैं और ब्राउज़र द्वारा हैंडल किए जा सकते हैं। Confirm में कोई navigate नहीं है, इसलिए यह notificationclick तक पहुँचता है; इसे क्वेरी पैरामीटर्स में स्थिति परिवर्तन को एनकोड करने के बजाय एक आइडेम्पोटेंट सर्वर API को कॉल करना चाहिए।

चरण 3: notificationclick फ़ॉलबैक लागू करें

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  const { orderId, version } = event.notification.data ?? {};
  if (event.action !== "confirm" || !orderId) return;

  event.waitUntil(confirmDelivery(orderId, version).then(() =>
    focusOrOpen(`/orders/${encodeURIComponent(orderId)}?confirmed=1`)));
});

प्रोडक्शन कोड को नेटवर्क विफलता, पुराने वर्ज़न्स और अनऑथराइज़्ड रिस्पॉन्स को पकड़ना चाहिए और परिणाम पृष्ठ को रिकवरी प्रस्तुत करने देना चाहिए। waitUntil प्रॉमिस सेटल होने तक Service Worker इवेंट को चालू रखता है।

चरण 4: विंडोज़ और लॉगिन रिकवरी को हैंडल करें

focusOrOpen को एक नियंत्रित समान-ऑरिजिन विंडो से मेल खाना चाहिए, postMessage के माध्यम से एक वैलिडेटेड रूट भेजना चाहिए, और केवल तभी clients.openWindow को कॉल करना चाहिए जब कोई उपयुक्त विंडो मौजूद न हो। यदि लॉगिन समाप्त हो गया है, तो केवल अल्पकालिक लक्षित स्थिति ले जाएं; साइन-इन के बाद, पेज को ऑर्डर को फिर से फेच और ऑथराइज़ करना होगा।

चरण 5: सुरक्षा, अनुमति और आइडेम्पोटेंसी

नोटिफिकेशन अनुमति डिस्प्ले को नियंत्रित करती है, ऑर्डर ऑथराइजेशन को नहीं। प्रोटोकॉल, ऑरिजिन और पाथ को प्रतिबंधित करें; डुप्लिकेट कन्फर्मेशन्स को रोकने के लिए ऑर्डर ID, वर्ज़न या एक आइडेम्पोटेंसी की का उपयोग करें। डिसमिसल, डुप्लिकेट टैग और एक साथ डिवाइस क्लिक के लिए स्पष्ट सर्वर स्टेट-मशीन व्यवहार की आवश्यकता होती है।

6. मॉडल उच्च-गुणवत्ता वाला उत्तर

मैं view और help के लिए समान-ऑरिजिन navigate का उपयोग करूँगा, और notificationclick में Confirm delivery को हैंडल करूँगा क्योंकि इसका एक साइड इफेक्ट है। Service Worker ऑर्डर वर्ज़न और की के साथ एक आइडेम्पोटेंट API को कॉल करने के लिए waitUntil का उपयोग करता है, फिर किसी मौजूदा विंडो को फ़ोकस करता है या परिणाम रूट खोलता है। प्रत्येक URL अनुमति-सूचीबद्ध है, अनुमति ऑथराइजेशन नहीं है, और लॉगिन रिकवरी एक्सेस की फिर से जाँच करती है। टेस्ट्स बॉडी और एक्शन क्लिक्स, रीपीट्स, ऑफ़लाइन मोड, पुराने वर्ज़न्स और कई विंडोज़ को कवर करते हैं।

7. सामान्य गलतियाँ

• GET URL के माध्यम से कन्फर्मेशन ट्रिगर करना → प्रीफ़ेच या रीपीट्स साइड इफेक्ट्स का कारण बनते हैं → इवेंट से एक आइडेम्पोटेंट POST कॉल करें।
• यह मान लेना कि बिना URL वाला एक्शन बॉडी URL खोलता है → व्यवहार अस्पष्ट होता है → इसे notificationclick में स्पष्ट रूप से हैंडल करें।
• data में पूरा ऑर्डर डालना → संवेदनशील जानकारी लीक होती है → केवल एक पहचानकर्ता ले जाएं और ऑथराइज़्ड डेटा को फिर से फेच करें।
• असिंक्रोनस कार्य के आसपास waitUntil छोड़ना → Worker जल्दी समाप्त हो सकता है → प्रत्येक महत्वपूर्ण प्रॉमिस को मैनेज करें।
• हमेशा एक नई विंडो बनाना → स्थिति विभाजित होना → पहले एक समान-ऑरिजिन विंडो का मिलान करें और उसे फ़ोकस करें।

8. फ़ॉलो-अप प्रश्न

फ़ॉलो-अप 1: कौन सा जीतता है, action.navigate या notificationclick?

जब किसी एक्शन का अपना navigate होता है, तो ब्राउज़र उस URL का उपयोग कर सकता है। बिना इसके किसी एक्शन को कस्टम notificationclick हैंडलिंग की आवश्यकता होती है।

फ़ॉलो-अप 2: URL में कन्फर्मेशन क्यों नहीं डाला जाता?

नेविगेशन को प्रीफ़ेच किया जा सकता है, दोबारा चलाया जा सकता है, या बार-बार क्लिक किया जा सकता है और यह सुरक्षित रूप से किसी साइड इफेक्ट का प्रतिनिधित्व नहीं कर सकता है। कन्फर्मेशन एक ऑथराइज़्ड, आइडेम्पोटेंट सर्वर स्टेट ट्रांज़िशन से संबंधित है।

फ़ॉलो-अप 3: समाप्त हो चुके लॉगिन से आप कैसे रिकवर करते हैं?

लॉगिन खोलते समय अल्पकालिक, अखंडता-संरक्षित लक्षित स्थिति स्टोर करें। साइन-इन के बाद, पेज ऑर्डर को फेच करता है, ऑथराइजेशन की जाँच करता है, और फिर परिणाम रूट को पुनर्स्थापित करता है।

फ़ॉलो-अप 4: आप यह कैसे साबित करते हैं कि कोई डुप्लिकेट निष्पादन नहीं हुआ है?

समान ऑर्डर वर्ज़न और आइडेम्पोटेंसी की के साथ विंडोज़ और डिवाइसेस पर बार-बार बॉडी और एक्शन क्लिक्स को ट्रिगर करें, फिर यह सुनिश्चित करें कि सर्वर केवल एक कन्फर्मेशन ट्रांज़िशन करता है।