🚹 ⛲️ 💫 PWA आसान है। नमस्कार जूमला 👨‍👩‍👧 👶🏾 🏠

प्रगतिशील वेब अनुप्रयोगों का अध्ययन जारी है। सैद्धांतिक पहले भाग के बाद और दूसरे भाग हैलो हैलो के एक सरल व्यावहारिक उदाहरण के बाद, हम PWA वेबसाइट को CMS जूमला में स्थानांतरित करने का प्रयास करेंगे।

सर्वर फ्रेमवर्क का प्रकार महत्वपूर्ण नहीं है। इस लेख का उद्देश्य पीडब्ल्यूए में एक नियमित साइट के अनुवाद को एक अवधारणा के रूप में दिखाना है जो किसी भी ढांचे पर मनमाना साइटों पर लागू होता है।

आरंभ करने के लिए, जूमला डाउनलोड और इंस्टॉल करें। स्थापना के दौरान, हम इंगित करते हैं कि डेमो डेटा के साथ साइट को भरना आवश्यक है - "ब्लॉग" विकल्प चुनें। हमें यहाँ ऐसी साइट मिलती है - https://tetta.nut.cc/habr/hello-joomla/original/ । फिर सभी साइट फ़ाइलों को निर्देशिका https://tetta.nut.cc/habr/hello-joomla/ पर कॉपी करें - अब हमारे पास एक ही डेटाबेस पर जूमला साइट के दो कार्यशील उदाहरण हैं। हम पहले के रूप में छोड़ देंगे, और दूसरा हम PWA संस्करण में स्थानांतरित करेंगे।

इस लेख के उदाहरण के लिए स्रोत कोड GitHub-e पर देखा जा सकता है

जूमला की संरचना के बारे में थोड़ा सा

जूमला में एक टेम्पलेट की अवधारणा है - वेब संसाधनों का एक सेट जो प्रस्तुति स्तर के लिए जिम्मेदार है। टेम्प्लेट / टेम्प्लेट निर्देशिका में स्थित होते हैं, हमारे मानक "बॉक्स से बाहर" को प्रोटोस्टार कहा जाता है।

सामान्य स्थिति में, ब्राउज़र अनुरोध प्राप्त करने के बाद, जूमला इंजन को शुरू करता है, अपनी बात करता है, और फिर अनुरोध के निष्पादन को /templates/protostar/index.php पर स्थानांतरित करता है, जो पहले से ही क्लाइंट को HTML उत्पन्न कर रहा है। यह फ़ाइल एक साधारण PHP फ़ाइल है, जिसमें दो निर्देशों का उपयोग अतिरिक्त रूप से संभव है:
<jdoc:include type="component" /> <jdoc:include type="modules" name="position-id" style="..." /> 
पहला URL अनुरोधित URL (घटक) के अनुरूप मुख्य सामग्री के बजाय सम्मिलित करता है, दूसरा - निर्दिष्ट स्थिति के लिए व्यवस्थापक द्वारा निर्धारित मॉड्यूल। जूमला के किसी भी पृष्ठ में एक घटक और मॉड्यूल होते हैं।

यदि आप साइट टेम्पलेट को देखते हैं, तो आप पृष्ठ के मध्य भाग में मुख्य सामग्री के ब्लॉक को देख सकते हैं, और आसपास कोई मॉड्यूल नहीं हैं। शीर्ष मेनू स्थिति -1 है, दो मॉड्यूल "पुराने पोस्ट" और "अधिकांश रीड पोस्ट" के साथ सही कॉलम स्थिति -7 है, और इसी तरह।

जूमला की एक ख़ासियत है - अगर कुछ गेटेज मान के साथ प्राप्त GET अनुरोध में एक tmpl पैरामीटर है, तो Joomla अनुरोध निष्पादन को टेम्प्लेट फ़ाइल में index.php में ट्रांसमिट नहीं करता है, लेकिन somePage.php पर, यदि कोई हो। इसका उपयोग हम नीचे करते हैं।

एप्लिकेशन शेल

अब हमें साइट ऐप शेल से अलग करने की आवश्यकता है - एप्लिकेशन का शेल बनाया जा रहा है। खरोंच से पीडब्ल्यूए साइट विकसित करते समय, इसके लिए अलग-अलग रणनीति हो सकती है, लेकिन एक तैयार साइट पर विभाजन को अपने स्थिर और गतिशील भागों में उपयोग करना सुविधाजनक है।

स्टेटिक्स एक ऐसी चीज है जो शायद ही कभी बदलती है और ऐप शेल का हिस्सा हो सकती है। उदाहरण के लिए, हमारी साइट पर शीर्ष मेनू को स्थैतिक माना जा सकता है - इसे केवल व्यवस्थापक द्वारा बदल दिया जाता है, और वह इसे संपादित करने के बाद स्पष्ट रूप से क्लाइंट ब्राउज़र पर ऐप शेल अपडेट का आदेश दे सकता है।

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

1. सर्वर पर परिवर्तन

प्लेसहोल्डर के साथ सभी डायनामिक ब्लॉक्स को बदलें। टेम्प्लेट के index.php फ़ाइल में, निर्देश बदलें:

 <jdoc:include type="component" />  <div id="main-content"></div> <jdoc:include type="modules" name="position-id" style="..." />  <div id="module-id"></div>

हम टेम्प्लेट स्क्रिप्ट के अलावा हमारी जावास्क्रिप्ट फ़ाइल हैलो-जूमला.जेएस को भी index.php से जोड़ते हैं।

निम्नलिखित सामग्री के साथ मुख्य content.php फ़ाइल बनाएँ:

 <jdoc:include type="component" />

मॉड्यूल-2. एफपी फ़ाइल:

 <jdoc:include type="modules" name="position-2" style="none" />

और मॉड्यूल-7. एफपी फाइल:

 <jdoc:include type="modules" name="position-7" style="well" />

क्या किया गया था इसका अर्थ यह है कि जब आप https://tetta.nut.cc/habr/hello-joomla/index.php/5-your-modules?tmpl=module-7 से अनुरोध करते हैं, तो हमें केवल पोस्टऑन में स्थित मॉड्यूल का कोड मिलेगा- 7। सामग्री के साथ एक ही बात।

ये सभी साइट के "सर्वर" भाग में परिवर्तन हैं। अन्य रूपरेखाओं में, ये ऑपरेशन (ऐप शेल को उजागर करना) शायद थोड़ा अधिक जटिल होगा, लेकिन यहां हम भाग्यशाली हैं।

2. ग्राहक पक्ष

हैलो-जूमला.जज में, हमें सामग्री और मॉड्यूल के गतिशील लोडिंग को लागू करने की आवश्यकता है। इसके अलावा, आपको सभी <A> टैग के व्यवहार को बदलने की आवश्यकता है ताकि लिंक पर क्लिक करने से पृष्ठ डेटा की गतिशील लोडिंग शुरू हो जाए। दाएं हाथ के कॉलम मॉड्यूल को एक बार लोड किया जाएगा जब साइट ब्राउज़र में खोली जाएगी, और आंतरिक लिंक पर क्लिक करने पर हर बार ब्रेडक्रंब और सामग्री लोड हो जाएगी।
यह भी आसान है:

हैलो-joomla.js

 //   url  HTML  el function loadData(el, url){ url.indexOf("?") >= 0 ? url += "&" : url += "?"; url = url + 'mode=nocache&tmpl=' + el; fetch(url) .then( function(response) { if (response.status == 200) { response.text().then(function(data) { document.getElementById(el).innerHTML = data; }); } }) .catch(); return false; } //    <a>    function handleLinks() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; ++i) { links[i].removeEventListener("click", handleLink); links[i].addEventListener("click", handleLink); } } //   function handleLink(e) { e.preventDefault(); loadData("main-content", this.href); loadData("module-2", this.href); handleLinks(); return false; } //      function DOMLoaded() { loadData("main-content", location.pathname); loadData("module-2", location.pathname); loadData("module-7", location.pathname); handleLinks(); } document.addEventListener('DOMContentLoaded', DOMLoaded, true);

फिलहाल, हमने अपनी साइट को पूर्णरूपेण एसपीए - सिंगल पेज एप्लीकेशन - एप्लीकेशन में बदल दिया है। बायीं ओर पॉलिशिंग है - लिंक "बैक टू टॉप", शीर्ष मेनू की शैलियाँ, खोज फ़ॉर्म, एनिमेटेड प्रीलोडर, आदि।
एसपीए मोड में साइट की एक प्रति https://tetta.nut.cc/habr/hello-joomla/spa/ पर उपलब्ध है।

3. एसपीए -> पीडब्ल्यूए

हम index.php में पिछले उदाहरण से प्रकट और sw.js कनेक्ट करते हैं। सेवा कार्यकर्ताओं को गतिशील अनुरोधों को रोकने के लिए, लोड मोड में हेलो-जूमला.जेएस में यूआरएल में "मोड = नोचे" जोड़ें।

वह सब है। होम स्क्रीन पर तय किया जा सकता है।

निष्कर्ष

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

अगले लेख में, उपयोगी युक्तियों के रूप में, हम कार्यात्मक रूप से साइट को उत्पादन में रिलीज के स्तर पर लाएंगे। एसपीए के मानक सुधार बाकी हैं - ब्राउज़र में पृष्ठ का शीर्षक, Google विश्लेषक, यह सत्यापित करते हैं कि खोज इंजन के लिए मूल्यवान कुछ भी नहीं निकला। हम सेवा कार्यकर्ता के लिए सुविधाजनक कैशिंग प्रबंधन करेंगे- ऐप शेल तत्वों को जल्दी से अपडेट करने के लिए। इसके अलावा, साइट के संपादक और टिप्पणीकार इंटरनेट से साइट की सामग्री में HTTP प्रोटोकॉल के माध्यम से चित्र सम्मिलित करने में सक्षम होना चाहते हैं।

पीडब्ल्यूए अवधारणा की एक महान विशेषता यह है कि यह कई सर्वर और ब्राउज़र फ्रेमवर्क में लंबे समय से खोए हुए एमवीसी प्रतिमान को जीवंत करता है। "दृश्य" अब क्लाइंट पर रहता है, और ब्राउज़र डेटा के लिए सर्वर तक पहुंचता है, न कि इसकी प्रस्तुति के लिए ।

और, पारंपरिक एसपीए के विपरीत, PWA इस "व्यू" को भारी जावास्क्रिप्ट फ्रेमवर्क के साथ नहीं, बल्कि अच्छे पुराने तेज और स्पष्ट html + सीएसएस के साथ बनाता है।

PWA आसान है। नमस्कार जूमला

एप्लिकेशन शेल

1. सर्वर पर परिवर्तन

2. ग्राहक पक्ष

3. एसपीए -> पीडब्ल्यूए

निष्कर्ष

More articles: