प्रोग्रेसिव वेब ऐप्लिकेशन: अपने PWA को बेहतर बनाना

1. आपका स्वागत है

इस लैब में, आपको किसी मौजूदा वेब ऐप्लिकेशन को बेहतर बनाने का तरीका बताया जाएगा. यह प्रोग्रेसिव वेब ऐप्लिकेशन वर्कशॉप के लिए, साथ में इस्तेमाल किए जाने वाले कोडलैब की सीरीज़ का छठा कोडलैब है. पिछला कोडलैब प्रॉम्प्ट करना और इंस्टॉल को मेज़र करना था. इस सीरीज़ में दो और कोडलैब हैं.

आपको क्या सीखने को मिलेगा

  • File System Access API का इस्तेमाल करके, उपयोगकर्ता के फ़ाइल सिस्टम से फ़ाइलें खोलना और सेव करना
  • इंस्टॉल किए गए पीडब्ल्यूए को, फ़ाइल हैंडलिंग एपीआई के साथ फ़ाइल हैंडलर के तौर पर रजिस्टर करना
  • मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई का इस्तेमाल करके, विंडो खोलने के लिए सही स्क्रीन चुनना
  • Screen Wake Lock API का इस्तेमाल करके, स्क्रीन को स्लीप मोड में जाने से रोकना

आपको क्या पता होना चाहिए

  • JavaScript

आपको इन चीज़ों की ज़रूरत होगी

  • ऐसा ब्राउज़र जो ऊपर दिए गए एपीआई के साथ काम कर सके. कुछ एपीआई के लिए, आपको ऐसे ब्राउज़र का इस्तेमाल करना पड़ सकता है जिसमें डेवलपर ट्रायल या ऑरिजिन ट्रायल चालू हो.

2. सेट अप करना

इस कोडलैब को पूरा करने के लिए, ज़रूरी स्टार्टर कोड को क्लोन करें या डाउनलोड करें:

अगर आपको रेपो को क्लोन करना है, तो पक्का करें कि आप pwa05--empowering-your-pwa ब्रांच पर हों. ZIP फ़ाइल में उस ब्रांच का कोड भी होता है.

इस कोडबेस के लिए, Node.js 14 या उसके बाद का वर्शन ज़रूरी है. कोड उपलब्ध होने के बाद, कोड के फ़ोल्डर में कमांड लाइन से npm ci चलाएं. इससे, आपको ज़रूरी सभी डिपेंडेंसी इंस्टॉल करने में मदद मिलेगी. इसके बाद, कोडलैब के लिए डेवलपमेंट सर्वर शुरू करने के लिए, npm start चलाएं.

सोर्स कोड की README.md फ़ाइल में, डिस्ट्रिब्यूट की गई सभी फ़ाइलों के बारे में जानकारी दी गई है. इसके अलावा, यहां कुछ ऐसी मुख्य फ़ाइलें दी गई हैं जिन पर आपको इस कोडलैब के दौरान काम करना होगा:

मुख्य फ़ाइलें

  • js/lib/actions.js - यह मेन्यू के लिए एक बेसिक क्लास उपलब्ध कराता है

आर्किटेक्चर से जुड़ी अहम जानकारी

इस कोडलैब में, आपको js/lib/action.js में बदलाव करना होगा. यह ऐप्लिकेशन के मेन्यू में मौजूद अलग-अलग बटन के लिए कार्रवाइयों को मैनेज करता है. शुरू किए गए मेन्यू के कंस्ट्रक्टर में, किसी भी प्रॉपर्टी को ऐक्सेस किया जा सकता है. इसमें मुख्य टेक्स्ट एडिटर के इंस्टेंस के लिए this.editor शामिल होगा. इस कोडलैब में, आपको एडिटर के इन दो अहम तरीकों का इस्तेमाल करना होगा:

  • this.editor.setContent(content) - इससे एडिटर के कॉन्टेंट को, कॉन्टेंट आर्ग्युमेंट के तौर पर दिए गए कॉन्टेंट पर सेट किया जाता है
  • this.editor.content() - इससे एडिटर का मौजूदा कॉन्टेंट मिलता है

3. फ़ाइलें मैनेज करना

File System Access API की मदद से, अब किसी व्यक्ति के कंप्यूटर पर नई फ़ाइलें खोली, सेव की, और बनाई जा सकती हैं. File Handling API के साथ मिलकर काम करने की वजह से, उपयोगकर्ता सीधे तौर पर आपके PWA में फ़ाइलें खोल सकते हैं. इससे आपका PWA, उपयोगकर्ताओं की रोज़मर्रा की ज़िंदगी में आसानी से शामिल हो सकता है.

ऐप्लिकेशन में जाकर खोलें

सबसे पहले, उपयोगकर्ता के फ़ाइल सिस्टम से किसी फ़ाइल को ऐप्लिकेशन में खोलने की सुविधा को हुक अप किया जाता है. js/lib/actions.js में, Actions क्लास के open तरीके में, ऐसा कोड लिखें जो यह काम करे:

  • फ़ाइल चुनने वाला ऐसा टूल खोलें जो text/markdown एक्सटेंशन वाली .md या .markdown फ़ाइल को चुन सके
  • पेज के टाइटल को खुली हुई फ़ाइलों के नाम पर सेट करें. साथ ही, PWA Edit जोड़ें
  • फ़ाइल हैंडलर को this.handler में सेव करें
  • एडिटर के कॉन्टेंट को फ़ाइल के टेक्स्ट कॉन्टेंट पर सेट करता है
  • हैंडलर को settings IndexedDB डेटाबेस में मौजूद settings-store ऑब्जेक्ट स्टोर में सेव करें.

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

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

पहले टास्क को पूरा करने के लिए, js/lib/actions.js में मौजूद Actions क्लास के कंस्ट्रक्टर में यह तरीका अपनाएं:

  • settings-store डेटाबेस खोलें
  • settings ऑब्जेक्ट स्टोर से सेव किया गया हैंडलर पाएं
  • अगर कोई सेव किया गया हैंडलर मौजूद है, तो this.handler को वापस लाई गई वैल्यू पर सेट करें. साथ ही, पेज के टाइटल को हैंडलर की फ़ाइल के नाम (साथ ही, PWA Edit) पर सेट करें

ऐप्लिकेशन की स्थिति को रीसेट करने के लिए (इसे CTRL/CMD+Shift+R की मदद से पूरा किया जा सकता है), js/lib/actions.js में Actions क्लास के reset तरीके को अपडेट करें, ताकि ये काम किए जा सकें:

  • दस्तावेज़ के टाइटल को PWA Edit पर सेट करें
  • एडिटर के कॉन्टेंट को खाली स्ट्रिंग पर सेट करना
  • this.handler को null पर सेट करें
  • settings ऑब्जेक्ट स्टोर से सेव किया गया हैंडलर मिटाता है

उपयोगकर्ता के फ़ाइल सिस्टम से खोला गया

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

नकारात्मक : इस सुविधा को इस्तेमाल करने के लिए, आपको डेवलपर या ऑरिजिन ट्रायल की सुविधा चालू करनी पड़ सकती है. अगर आपको डेवलपर ट्रायल चालू करना है, तो हमारा सुझाव है कि आप इसे अपने सामान्य ब्राउज़र के बजाय, Chrome Canary की कॉपी में चालू करें. अगर आपको ऑरिजिन ट्रायल चालू करना है, तो इसके लिए सामान्य तरीके से रजिस्टर करें और index.html में टैग जोड़ें

शुरू करने के लिए, manifest.json में file_handlers एंट्री जोड़ें. इसमें ये काम होने चाहिए:

  • / पर खुलेगा
  • यह .md या .markdown फ़ाइल एक्सटेंशन वाले text/markdown को स्वीकार करता है.

इससे उपयोगकर्ताओं को आपके ऐप्लिकेशन से फ़ाइलें खोलने की अनुमति मिलेगी. हालांकि, फ़ाइलें आपके ऐप्लिकेशन में नहीं खुलेंगी. ऐसा करने के लिए, js/lib/actions.js में Actions क्लास में जाकर, यह तरीका अपनाएं:

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

ऊपर दिए गए दोनों काम करने के बाद, अपना PWA इंस्टॉल करें. इसके बाद, फ़ाइल सिस्टम से कोई फ़ाइल खोलकर देखें!

फ़ाइल सेव करना

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

js/lib/actions.js में मौजूद Actions क्लास में, save तरीके का इस्तेमाल करके ये काम करें:

  • हैंडलर को this.handler से पाएं. अगर यह मौजूद नहीं है, तो सेव किए गए हैंडलर को डेटाबेस से पाएं
  • फ़ाइल हैंडलर का FileSystemWritableFileStream बनाएं
  • एडिटर के कॉन्टेंट को स्ट्रीम में लिखना
  • स्ट्रीम बंद करना

फ़ाइल सेव करने की सुविधा चालू होने के बाद, 'इस रूप में सेव करें' सुविधा लागू करें. इसके लिए, js/lib/actions.js में मौजूद Actions क्लास में saveAs तरीके का इस्तेमाल करके, यह तरीका अपनाएं:

  • सेव की गई फ़ाइल चुनने वाला टूल दिखाओ. इसे Markdown File के तौर पर दिखाओ और इसमें .md एक्सटेंशन वाली text/markdown फ़ाइलें स्वीकार की जानी चाहिए
  • this.handler को लौटाए गए हैंडलर पर सेट करें
  • हैंडलर को settings ऑब्जेक्ट स्टोर में सेव करें
  • नई फ़ाइल में कॉन्टेंट सेव करने के लिए, this.save के पूरा होने का इंतज़ार करें

ऐसा करने के बाद, save तरीके पर वापस जाएं. देखें कि handler मौजूद है या नहीं. अगर मौजूद नहीं है, तो this.saveAs के पूरा होने का इंतज़ार करें.

4. झलक दिखाना

मार्कडाउन एडिटर की मदद से, उपयोगकर्ता रेंडर किए गए आउटपुट की झलक देखना चाहते हैं. Window Management API का इस्तेमाल करके, उपयोगकर्ता की मुख्य स्क्रीन पर रेंडर किए गए कॉन्टेंट की झलक दिखाई जाएगी.

शुरू करने से पहले, एक फ़ाइल js/preview.js बनाएं. इसके बाद, उसमें यह कोड जोड़ें, ताकि लोड होने पर उसका प्रीव्यू दिखे:

import { openDB } from 'idb';
import { marked } from 'marked';

window.addEventListener('DOMContentLoaded', async () => {
  const preview = document.querySelector('.preview');
  const db = await openDB('settings-store');
  const content = (await db.get('settings', 'content')) || '';

  preview.innerHTML = marked(content);
});

झलक इस तरह से काम करनी चाहिए:

  • जब कोई उपयोगकर्ता 'झलक देखें' बटन पर क्लिक करता है और झलक नहीं खुलती है, तो उसे झलक दिखनी चाहिए
  • जब कोई उपयोगकर्ता, 'झलक देखें' बटन पर क्लिक करता है और झलक खुल जाती है, तो उसे झलक बंद करनी चाहिए
  • जब उपयोगकर्ता PWA को बंद करता है या रीफ़्रेश करता है, तो झलक बंद हो जानी चाहिए

इनको क्रम से लागू करने के लिए, js/lib/actions.js में मौजूद Actions क्लास में preview तरीके में बदलाव करके, ये काम करें:

  • Window Management API का इस्तेमाल करके, उपलब्ध स्क्रीन पाना
  • प्राइमरी स्क्रीन ढूंढने के लिए, स्क्रीन को फ़िल्टर करें
  • /preview के लिए Markdown preview टाइटल वाली एक विंडो खोलो. यह विंडो, प्राइमरी स्क्रीन की आधी चौड़ाई और पूरी ऊंचाई में दिखेगी. इसे इस तरह से सेट किया गया है कि यह स्क्रीन के दाईं ओर के पूरे हिस्से में दिखे. उपलब्ध डाइमेंशन में, स्क्रीन के रिज़र्व किए गए हिस्से शामिल नहीं होते. जैसे, सिस्टम मेन्यूबार, टूलबार, स्टेटस या जगह की जानकारी.
  • इस खुली हुई विंडो को this.previewWindow में सेव करें
  • तरीके के सबसे ऊपर, देखें कि क्या this.previewWindow मौजूद है. अगर मौजूद है, तो विंडो बंद करें और विंडो का पूर्वावलोकन खोलने के बजाय this.previewWindow को हटाएं

आखिर में, js/lib/actions.js में Actions क्लास के कंस्ट्रक्टर के आखिर में यह काम करें:

  • beforeunload इवेंट के दौरान this.previewWindow बंद करना

5. फ़ोकस

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

वेक लॉक बटन, झलक बटन की तरह ही काम करेगा. इससे, वेक लॉक की सुविधा को चालू और बंद किया जा सकेगा. इसके लिए, js/lib/actions.js में Actions क्लास के focus तरीके में जाकर, यह तरीका अपनाएं:

  • देखें कि दस्तावेज़ में फ़ुल-स्क्रीन एलिमेंट है या नहीं
  • अगर ऐसा होता है, तो:
    • फ़ुल स्क्रीन मोड से बाहर निकलना
    • अगर this.wakeLock मौजूद है, तो वेक लॉक को रिलीज़ करें और this.wakeLock को रीसेट करें
  • अगर ऐसा नहीं होता है, तो:
    • वेक लॉक सेंटिनल का अनुरोध करें और उसे this.wakeLock पर सेट करें
    • दस्तावेज़ के मुख्य हिस्से को फ़ुल स्क्रीन पर दिखाने का अनुरोध करता है.

6. बधाई हो!

आपने सीखा कि सिस्टम फ़ाइलों को कैसे मैनेज किया जाता है. साथ ही, File System Access API और File Handling API का इस्तेमाल करके, अपने PWA को किसी सिस्टम के साथ कैसे इंटिग्रेट किया जाता है. आपने Window Management API की मदद से, अलग-अलग स्क्रीन पर विंडो खोलने और Screen Wake Lock API की मदद से, स्क्रीन को स्लीप मोड में जाने से रोकने का तरीका भी सीखा.

इस सीरीज़ का अगला कोड सीखने का तरीका सर्विस वर्कर शामिल हैं