इंस्टॉल किए गए वेब ऐप्लिकेशन को फ़ाइल हैंडलर बनने की अनुमति दें

किसी ऐप्लिकेशन को ऑपरेटिंग सिस्टम के साथ फ़ाइल हैंडलर के तौर पर रजिस्टर करें.

Thomas Steiner

अब वेब ऐप्लिकेशन फ़ाइलें पढ़ और लिख सकते हैं. इसलिए, अगला तार्किक चरण यह है कि डेवलपर इन वेब ऐप्लिकेशन को उन फ़ाइलों के लिए फ़ाइल हैंडलर के तौर पर सेट करें जिन्हें उनके ऐप्लिकेशन बना और प्रोसेस कर सकते हैं. फ़ाइल मैनेज करने वाले एपीआई की मदद से, ऐसा किया जा सकता है. टेक्स्ट एडिटर ऐप्लिकेशन को फ़ाइल हैंडलर के तौर पर रजिस्टर करने और उसे इंस्टॉल करने के बाद, macOS पर .txt फ़ाइल पर राइट क्लिक करें. इसके बाद, "जानकारी पाएं" को चुनें. इससे ओएस को यह निर्देश दिया जा सकेगा कि वह हमेशा .txt फ़ाइलों को डिफ़ॉल्ट रूप से इस ऐप्लिकेशन से खोले.

File Handling API के इस्तेमाल के सुझाए गए उदाहरण

इस एपीआई का इस्तेमाल करने वाली साइटों के उदाहरण:

  • Office ऐप्लिकेशन, जैसे कि टेक्स्ट एडिटर, स्प्रेडशीट ऐप्लिकेशन, और स्लाइड शो बनाने वाले ऐप्लिकेशन.
  • ग्राफ़िक्स एडिटर और ड्रॉइंग टूल.
  • वीडियो गेम के लेवल एडिटर टूल.

फ़ाइल हैंडलिंग एपीआई का इस्तेमाल कैसे करें

प्रोग्रेसिव एन्हैंसमेंट

फ़ाइल मैनेज करने वाले एपीआई को पॉलीफ़िल नहीं किया जा सकता. हालांकि, वेब ऐप्लिकेशन से फ़ाइलें खोलने की सुविधा, दो अन्य तरीकों से भी पाई जा सकती है:

  • Web Share Target API की मदद से डेवलपर, अपने ऐप्लिकेशन को शेयर टारगेट के तौर पर सेट कर सकते हैं. इससे फ़ाइलों को ऑपरेटिंग सिस्टम की शेयर शीट से खोला जा सकता है.
  • File System Access API को फ़ाइल को खींचकर छोड़ने की सुविधा के साथ इंटिग्रेट किया जा सकता है. इससे डेवलपर, पहले से खुले हुए ऐप्लिकेशन में छोड़ी गई फ़ाइलों को मैनेज कर सकते हैं.

ब्राउज़र समर्थन

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

Source

सुविधा का पता लगाना

यह देखने के लिए कि फ़ाइल हैंडलिंग एपीआई काम करता है या नहीं, इसका इस्तेमाल करें:

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

फ़ाइल मैनेज करने वाले एपीआई का डिक्लेरेटिव हिस्सा

सबसे पहले, वेब ऐप्लिकेशन को अपनी वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल में यह बताना होगा कि वे किस तरह की फ़ाइलें हैंडल कर सकते हैं. फ़ाइल मैनेज करने वाला एपीआई, वेब ऐप्लिकेशन मेनिफ़ेस्ट को नई प्रॉपर्टी "file_handlers" के साथ बढ़ाता है. यह प्रॉपर्टी, फ़ाइल हैंडलर का एक कलेक्शन स्वीकार करती है. फ़ाइल हैंडलर, इन प्रॉपर्टी वाला एक ऑब्जेक्ट होता है:

  • "action" प्रॉपर्टी, जिसकी वैल्यू के तौर पर ऐप्लिकेशन के स्कोप में मौजूद यूआरएल होता है.
  • "accept" प्रॉपर्टी, जिसमें MIME-टाइप के ऑब्जेक्ट को कुंजियों के तौर पर और फ़ाइल एक्सटेंशन की सूचियों को उनकी वैल्यू के तौर पर इस्तेमाल किया जाता है.
  • ImageResource आइकॉन की एक कलेक्शन वाली "icons" प्रॉपर्टी. कुछ ऑपरेटिंग सिस्टम, फ़ाइल टाइप के साथ किसी ऐसे आइकॉन को जोड़ने की अनुमति देते हैं जो सिर्फ़ उससे जुड़े ऐप्लिकेशन का आइकॉन नहीं होता. इसके बजाय, यह एक खास आइकॉन होता है, जो ऐप्लिकेशन के साथ उस फ़ाइल टाइप के इस्तेमाल से जुड़ा होता है.
  • यह एक "launch_type" प्रॉपर्टी है. इससे यह तय होता है कि एक से ज़्यादा फ़ाइलों को एक ही क्लाइंट में खोला जाना चाहिए या अलग-अलग क्लाइंट में. डिफ़ॉल्ट वैल्यू "single-client" है. अगर उपयोगकर्ता एक से ज़्यादा फ़ाइलें खोलता है और फ़ाइल हैंडलर को "multiple-clients" के तौर पर एनोटेट किया गया है, तो एक से ज़्यादा ऐप्लिकेशन लॉन्च होंगे. साथ ही, हर लॉन्च के लिए LaunchParams.files ऐरे (नीचे देखें) में सिर्फ़ एक एलिमेंट होगा."launch_type"

यहां दिए गए उदाहरण में, वेब ऐप्लिकेशन मेनिफ़ेस्ट का सिर्फ़ काम का हिस्सा दिखाया गया है. इससे आपको बेहतर तरीके से समझने में मदद मिलेगी:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

यह एक काल्पनिक ऐप्लिकेशन के लिए है, जो कॉमा से अलग की गई वैल्यू (.csv) वाली फ़ाइलों को /open-csv पर, स्केलेबल वेक्टर ग्राफ़िक्स (.svg) वाली फ़ाइलों को /open-svg पर, और बनाए गए Grafr फ़ाइल फ़ॉर्मैट को /open-graf पर हैंडल करता है. इस फ़ाइल फ़ॉर्मैट का एक्सटेंशन .grafr, .graf या .graph में से कोई भी हो सकता है. पहले दो विकल्प एक ही क्लाइंट में खुलेंगे. अगर एक से ज़्यादा फ़ाइलें मैनेज की जा रही हैं, तो आखिरी विकल्प कई क्लाइंट में खुलेगा.

फ़ाइल मैनेज करने वाले एपीआई का ज़रूरी हिस्सा

अब ऐप्लिकेशन ने यह एलान कर दिया है कि वह सिद्धांत के तौर पर, स्कोप में शामिल किस यूआरएल पर कौनसी फ़ाइलें हैंडल कर सकता है. इसलिए, उसे व्यवहार में आने वाली फ़ाइलों के साथ कुछ करना होगा. ऐसे में, launchQueue काम आता है. लॉन्च की गई फ़ाइलों को ऐक्सेस करने के लिए, किसी साइट को window.launchQueue ऑब्जेक्ट के लिए उपभोक्ता तय करना होगा. लॉन्च को तब तक कतार में रखा जाता है, जब तक कि उन्हें तय किए गए उपभोक्ता के ज़रिए हैंडल नहीं कर लिया जाता. इस उपभोक्ता को हर लॉन्च के लिए सिर्फ़ एक बार शुरू किया जाता है. इस तरह, हर लॉन्च को हैंडल किया जाता है. इससे कोई फ़र्क़ नहीं पड़ता कि उपभोक्ता को कब चुना गया था.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

DevTools की सहायता टीम

इस लेख को लिखते समय, DevTools के लिए कोई सहायता उपलब्ध नहीं है. हालांकि, मैंने सहायता जोड़ने के लिए सुविधा का अनुरोध किया है.

डेमो

मैंने कार्टून स्टाइल में ड्रॉइंग बनाने वाले ऐप्लिकेशन Excalidraw में फ़ाइल हैंडलिंग की सुविधा जोड़ी है. इसे आज़माने के लिए, आपको पहले Excalidraw इंस्टॉल करना होगा. इसके बाद, जब इससे कोई फ़ाइल बनाई जाती है और उसे अपने फ़ाइल सिस्टम में कहीं सेव किया जाता है, तो उस फ़ाइल को दो बार क्लिक करके खोला जा सकता है. इसके अलावा, उस पर राइट क्लिक करके कॉन्टेक्स्ट मेन्यू में "Excalidraw" को चुनकर भी खोला जा सकता है. सोर्स कोड में लागू करने का तरीका देखा जा सकता है.

macOS की फ़ाइंडर विंडो में Excalidraw फ़ाइल दिख रही है.
अपने ऑपरेटिंग सिस्टम के फ़ाइल एक्सप्लोरर में किसी फ़ाइल पर दो बार क्लिक करें या उस पर राइट क्लिक करें.
किसी फ़ाइल पर राइट क्लिक करने पर दिखने वाला कॉन्टेक्स्ट मेन्यू. इसमें, Open with… Excalidraw आइटम को हाइलाइट किया गया है.
Excalidraw, .excalidraw फ़ाइलों के लिए डिफ़ॉल्ट फ़ाइल हैंडलर है.

सुरक्षा

Chrome टीम ने File Handling API को डिज़ाइन और लागू किया है. इसके लिए, वेब प्लैटफ़ॉर्म की बेहतर सुविधाओं के ऐक्सेस को कंट्रोल करना में बताए गए मुख्य सिद्धांतों का इस्तेमाल किया गया है. इनमें उपयोगकर्ता का कंट्रोल, पारदर्शिता, और एर्गोनॉमिक्स शामिल हैं.

अनुमतियां, अनुमतियों के बने रहने की सुविधा, और फ़ाइल हैंडलर से जुड़े अपडेट

उपयोगकर्ताओं का भरोसा बनाए रखने और उनकी फ़ाइलों को सुरक्षित रखने के लिए, File Handling API के किसी फ़ाइल को खोलने पर, अनुमति का अनुरोध करने वाला प्रॉम्प्ट दिखेगा. इसके बाद ही, कोई PWA किसी फ़ाइल को देख पाएगा. अनुमति मांगने वाला यह प्रॉम्प्ट, उपयोगकर्ता के फ़ाइल खोलने के लिए PWA चुनने के तुरंत बाद दिखेगा. इससे अनुमति, PWA का इस्तेमाल करके फ़ाइल खोलने की कार्रवाई से जुड़ी होगी. इससे उपयोगकर्ता को यह समझने में आसानी होगी कि अनुमति क्यों मांगी जा रही है और यह उसके लिए कितनी ज़रूरी है.

यह अनुमति तब तक दिखेगी, जब तक उपयोगकर्ता साइट के लिए फ़ाइल हैंडलिंग की सुविधा को अनुमति दें या ब्लॉक करें पर क्लिक नहीं करता. इसके अलावा, अगर उपयोगकर्ता तीन बार प्रॉम्प्ट को अनदेखा करता है, तो Chromium इस अनुमति को रोक देगा और ब्लॉक कर देगा. चुनी गई सेटिंग, PWA को बंद करने और फिर से खोलने पर भी बनी रहेगी.

मेनिफ़ेस्ट अपडेट होने और "file_handlers" सेक्शन में बदलावों का पता चलने पर, अनुमतियां रीसेट हो जाएंगी.

वेबसाइटों को फ़ाइलों का ऐक्सेस देने पर, हमला करने के कई तरीके खुल जाते हैं. इनके बारे में, File System Access API के बारे में जानकारी देने वाले लेख में बताया गया है. फ़ाइल मैनेज करने वाले एपीआई में, File System Access API के मुकाबले सुरक्षा से जुड़ी एक अतिरिक्त सुविधा मिलती है. यह सुविधा, ऑपरेटिंग सिस्टम के बिल्ट-इन यूज़र इंटरफ़ेस (यूआई) के ज़रिए कुछ फ़ाइलों को ऐक्सेस करने की अनुमति देने की सुविधा है. इसके उलट, File System Access API में वेब ऐप्लिकेशन की ओर से दिखाए गए फ़ाइल पिकर के ज़रिए फ़ाइलों को ऐक्सेस करने की अनुमति दी जाती है.

हालांकि, अब भी यह जोखिम बना हुआ है कि उपयोगकर्ता किसी फ़ाइल को खोलकर, गलती से किसी वेब ऐप्लिकेशन को उसका ऐक्सेस दे सकते हैं. हालांकि, आम तौर पर यह माना जाता है कि किसी फ़ाइल को खोलने से, उस फ़ाइल को खोलने वाले ऐप्लिकेशन को उसे पढ़ने और/या उसमें बदलाव करने की अनुमति मिल जाती है. इसलिए, किसी उपयोगकर्ता के पास यह विकल्प होता है कि वह किसी फ़ाइल को इंस्टॉल किए गए ऐप्लिकेशन में खोले. जैसे, "इससे खोलें…" कॉन्टेक्स्ट मेन्यू के ज़रिए. इसे ऐप्लिकेशन पर भरोसा करने का एक अहम सिग्नल माना जा सकता है.

डिफ़ॉल्ट हैंडलर ऐप्लिकेशन सेट करने से जुड़ी समस्याएं

हालांकि, अगर होस्ट सिस्टम पर किसी फ़ाइल टाइप के लिए कोई ऐप्लिकेशन मौजूद नहीं है, तो ऐसा नहीं होगा. इस मामले में, कुछ होस्ट ऑपरेटिंग सिस्टम, रजिस्टर किए गए नए हैंडलर को उस फ़ाइल टाइप के लिए डिफ़ॉल्ट हैंडलर के तौर पर अपने-आप प्रमोट कर सकते हैं. ऐसा वे चुपचाप और उपयोगकर्ता के किसी भी इंटरवेंशन के बिना करते हैं. इसका मतलब है कि अगर उपयोगकर्ता उस टाइप की किसी फ़ाइल पर दो बार क्लिक करता है, तो वह रजिस्टर किए गए वेब ऐप्लिकेशन में अपने-आप खुल जाएगी. ऐसे होस्ट ऑपरेटिंग सिस्टम पर, जब उपयोगकर्ता एजेंट यह तय करता है कि फ़ाइल टाइप के लिए कोई डिफ़ॉल्ट हैंडलर मौजूद नहीं है, तो उपयोगकर्ता की सहमति के बिना किसी वेब ऐप्लिकेशन को फ़ाइल का कॉन्टेंट गलती से भेजने से बचने के लिए, अनुमति का प्रॉम्प्ट दिखाना ज़रूरी हो सकता है.

उपयोगकर्ता के कंट्रोल

स्पेसिफ़िकेशन में बताया गया है कि ब्राउज़र को हर उस साइट को फ़ाइल हैंडलर के तौर पर रजिस्टर नहीं करना चाहिए जो फ़ाइलों को हैंडल कर सकती है. इसके बजाय, फ़ाइल हैंडलिंग के लिए रजिस्ट्रेशन, इंस्टॉलेशन के बाद होना चाहिए. साथ ही, उपयोगकर्ता की साफ़ तौर पर पुष्टि किए बिना ऐसा कभी नहीं होना चाहिए. ऐसा खास तौर पर तब होना चाहिए, जब किसी साइट को डिफ़ॉल्ट हैंडलर बनना हो. साइटों को अपने एक्सटेंशन बनाने चाहिए. उन्हें .json जैसे मौजूदा एक्सटेंशन को हाइजैक नहीं करना चाहिए. ऐसा हो सकता है कि उपयोगकर्ता ने पहले से ही इसके लिए डिफ़ॉल्ट हैंडलर रजिस्टर किया हो.

पारदर्शिता

सभी ऑपरेटिंग सिस्टम, उपयोगकर्ताओं को मौजूदा फ़ाइल असोसिएशन बदलने की अनुमति देते हैं. यह ब्राउज़र के दायरे से बाहर है.

सुझाव/राय दें या शिकायत करें

Chrome टीम, File Handling API के बारे में आपके अनुभव जानना चाहती है.

हमें एपीआई डिज़ाइन के बारे में बताएं

क्या एपीआई के बारे में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? इसके अलावा, क्या कोई ऐसा तरीका या प्रॉपर्टी है जो मौजूद नहीं है और आपको अपने आइडिया को लागू करने के लिए उसकी ज़रूरत है? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है?

  • GitHub repo पर, स्पेसिफ़िकेशन से जुड़ी समस्या की शिकायत करें या किसी मौजूदा समस्या के बारे में अपने विचार जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chrome के साथ काम करने में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?

  • new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके अलावा, कॉम्पोनेंट बॉक्स में UI>Browser>WebAppInstalls>FileHandling डालें.

एपीआई के लिए अपना सपोर्ट दिखाना

क्या आपको फ़ाइल हैंडलिंग एपीआई का इस्तेमाल करना है? सार्वजनिक तौर पर की गई आपकी मदद से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को सपोर्ट करना कितना ज़रूरी है.

  • WICG Discourse थ्रेड पर, हमें बताएं कि आपको इसका इस्तेमाल कैसे करना है.
  • @ChromiumDev को ट्वीट भेजें. इसके लिए, हैशटैग #FileHandling का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

काम के लिंक

Acknowledgements

फ़ाइल मैनेज करने वाले एपीआई को एरिक विलियर्स, जे हैरिस, और रेम्स खूरी ने बनाया है. इस लेख की समीक्षा जो मेडली ने की है.