একটি অ্যাপ্লিকেশন শেল হল ন্যূনতম HTML, CSS, এবং JavaScript যা একটি ব্যবহারকারী ইন্টারফেসকে শক্তিশালী করে। অ্যাপ্লিকেশন শেল উচিত:
- দ্রুত লোড
- ক্যাশে করা
- গতিশীলভাবে বিষয়বস্তু প্রদর্শন
একটি অ্যাপ্লিকেশন শেল নির্ভরযোগ্যভাবে ভাল কর্মক্ষমতা গোপন. আপনার অ্যাপের শেলটিকে কোডের বান্ডিলের মতো মনে করুন আপনি যদি একটি স্থানীয় অ্যাপ তৈরি করেন তবে আপনি একটি অ্যাপ স্টোরে প্রকাশ করবেন। এটি মাটি থেকে নামার জন্য প্রয়োজনীয় লোড, কিন্তু পুরো গল্প নাও হতে পারে। এটি আপনার UI স্থানীয় রাখে এবং একটি API এর মাধ্যমে গতিশীলভাবে বিষয়বস্তু টানে।
পটভূমি
অ্যালেক্স রাসেলের প্রগ্রেসিভ ওয়েব অ্যাপস নিবন্ধটি বর্ণনা করে যে কীভাবে একটি ওয়েব অ্যাপ ধীরে ধীরে ব্যবহার এবং ব্যবহারকারীর সম্মতির মাধ্যমে পরিবর্তিত হতে পারে যাতে অফলাইন সমর্থন, পুশ বিজ্ঞপ্তি এবং হোম স্ক্রিনে যোগ করার ক্ষমতা সহ আরও নেটিভ-অ্যাপের মতো অভিজ্ঞতা প্রদান করা যায়। এটি পরিষেবা কর্মীদের কার্যকারিতা এবং কর্মক্ষমতা সুবিধা এবং তাদের ক্যাশিং ক্ষমতার উপর অনেকটাই নির্ভর করে৷ এটি আপনাকে গতিতে ফোকাস করতে দেয়, আপনার ওয়েব অ্যাপগুলিকে একই তাত্ক্ষণিক লোডিং এবং নিয়মিত আপডেটগুলি প্রদান করে যা আপনি নেটিভ অ্যাপ্লিকেশনগুলিতে দেখতে অভ্যস্ত৷
এই ক্ষমতাগুলির সম্পূর্ণ সদ্ব্যবহার করার জন্য আমাদের ওয়েবসাইটগুলি সম্পর্কে চিন্তা করার একটি নতুন উপায় প্রয়োজন: অ্যাপ্লিকেশন শেল আর্কিটেকচার ।
একটি পরিষেবা কর্মী বর্ধিত অ্যাপ্লিকেশন শেল আর্কিটেকচার ব্যবহার করে কীভাবে আপনার অ্যাপকে গঠন করতে হয় তা নিয়ে আসুন। আমরা ক্লায়েন্ট এবং সার্ভার-সাইড রেন্ডারিং উভয়ই দেখব এবং একটি এন্ড-টু-এন্ড নমুনা শেয়ার করব যা আপনি আজ চেষ্টা করতে পারেন।
পয়েন্টটি জোর দেওয়ার জন্য, নীচের উদাহরণটি এই আর্কিটেকচার ব্যবহার করে একটি অ্যাপের প্রথম লোড দেখায়। স্ক্রিনের নীচে 'অফলাইন ব্যবহারের জন্য অ্যাপ প্রস্তুত' টোস্টটি লক্ষ্য করুন। শেলের একটি আপডেট পরে উপলব্ধ হলে, আমরা ব্যবহারকারীকে নতুন সংস্করণের জন্য রিফ্রেশ করতে জানাতে পারি।
সেবা কর্মী আবার কি?
একটি পরিষেবা কর্মী হল একটি স্ক্রিপ্ট যা ব্যাকগ্রাউন্ডে চলে, আপনার ওয়েব পৃষ্ঠা থেকে আলাদা৷ এটি ইভেন্টগুলিতে সাড়া দেয়, যার মধ্যে এটি পরিবেশন করা পৃষ্ঠাগুলি থেকে করা নেটওয়ার্ক অনুরোধগুলি এবং আপনার সার্ভার থেকে বিজ্ঞপ্তিগুলি পুশ করে৷ একজন সেবাকর্মীর ইচ্ছাকৃতভাবে সংক্ষিপ্ত জীবনকাল থাকে। এটি যখন একটি ইভেন্ট পায় তখন এটি জেগে ওঠে এবং যতক্ষণ এটি প্রক্রিয়া করতে হবে ততক্ষণ পর্যন্ত চলে।
একটি সাধারণ ব্রাউজিং প্রসঙ্গে জাভাস্ক্রিপ্টের সাথে তুলনা করলে পরিষেবা কর্মীদেরও API-এর একটি সীমিত সেট থাকে। এটি ওয়েবে কর্মীদের জন্য আদর্শ। একজন পরিষেবা কর্মী DOM অ্যাক্সেস করতে পারে না কিন্তু ক্যাশে API এর মতো জিনিসগুলি অ্যাক্সেস করতে পারে এবং তারা ফেচ API ব্যবহার করে নেটওয়ার্ক অনুরোধ করতে পারে। IndexedDB API এবং postMessage() পরিষেবা কর্মী এবং এটি নিয়ন্ত্রণ করে এমন পৃষ্ঠাগুলির মধ্যে ডেটা স্থিরতা এবং বার্তা পাঠানোর জন্যও উপলব্ধ। আপনার সার্ভার থেকে প্রেরিত পুশ ইভেন্টগুলি ব্যবহারকারীর ব্যস্ততা বাড়াতে বিজ্ঞপ্তি API চালু করতে পারে।
একটি পরিষেবা কর্মী একটি পৃষ্ঠা থেকে করা নেটওয়ার্ক অনুরোধগুলিকে আটকাতে পারে (যা পরিষেবা কর্মীতে একটি ফেচ ইভেন্টকে ট্রিগার করে) এবং নেটওয়ার্ক থেকে পুনরুদ্ধার করা বা স্থানীয় ক্যাশে থেকে পুনরুদ্ধার করা বা এমনকি প্রোগ্রামগতভাবে তৈরি করা প্রতিক্রিয়া ফেরত দিতে পারে৷ কার্যকরভাবে, এটি ব্রাউজারে একটি প্রোগ্রামেবল প্রক্সি। পরিষ্কার অংশটি হল, প্রতিক্রিয়া যেখান থেকে আসে তা নির্বিশেষে, এটি ওয়েব পৃষ্ঠায় দেখায় যেন কোনও পরিষেবা কর্মী জড়িত ছিল না।
পরিষেবা কর্মীদের সম্পর্কে আরও গভীরভাবে জানতে, পরিষেবা কর্মীদের একটি ভূমিকা পড়ুন।
কর্মক্ষমতা সুবিধা
পরিষেবা কর্মীরা অফলাইন ক্যাশিংয়ের জন্য শক্তিশালী কিন্তু তারা আপনার সাইট বা ওয়েব অ্যাপে পুনরাবৃত্তি করার জন্য তাত্ক্ষণিক লোডিং আকারে উল্লেখযোগ্য কার্যক্ষমতা জয়ও অফার করে। আপনি আপনার অ্যাপ্লিকেশন শেল ক্যাশে করতে পারেন যাতে এটি অফলাইনে কাজ করে এবং জাভাস্ক্রিপ্ট ব্যবহার করে এর বিষয়বস্তু তৈরি করে।
বারবার ভিজিট করলে, এটি আপনাকে নেটওয়ার্ক ছাড়াই স্ক্রীনে অর্থপূর্ণ পিক্সেল পেতে দেয়, এমনকি যদি আপনার বিষয়বস্তু শেষ পর্যন্ত সেখান থেকে আসে। এটিকে টুলবার এবং কার্ডগুলি অবিলম্বে প্রদর্শন করার মত মনে করুন, তারপরে আপনার বাকি বিষয়বস্তু ধীরে ধীরে লোড হচ্ছে৷
বাস্তব ডিভাইসে এই আর্কিটেকচারটি পরীক্ষা করার জন্য, আমরা WebPageTest.org- এ আমাদের অ্যাপ্লিকেশন শেল নমুনা চালিয়েছি এবং নীচের ফলাফলগুলি দেখিয়েছি।
পরীক্ষা 1: ক্রোম ডেভ ব্যবহার করে Nexus 5 এর সাথে কেবলে পরীক্ষা করা হচ্ছে
অ্যাপটির প্রথম দৃশ্যের জন্য নেটওয়ার্ক থেকে সমস্ত সংস্থান আনতে হবে এবং 1.2 সেকেন্ডের মধ্যে একটি অর্থপূর্ণ পেইন্ট অর্জন করতে পারে না৷ পরিষেবা কর্মী ক্যাশিং এর জন্য ধন্যবাদ, আমাদের পুনরাবৃত্ত পরিদর্শন অর্থপূর্ণ পেইন্ট অর্জন করে এবং 0.5 সেকেন্ডের মধ্যে সম্পূর্ণরূপে লোডিং শেষ করে৷
পরীক্ষা 2: Chrome Dev ব্যবহার করে Nexus 5 এর সাথে 3G-এ পরীক্ষা করা হচ্ছে
আমরা একটু ধীরগতির 3G সংযোগ দিয়ে আমাদের নমুনা পরীক্ষা করতে পারি। এইবার আমাদের প্রথম অর্থপূর্ণ পেইন্টের জন্য প্রথম দর্শনে 2.5 সেকেন্ড সময় লাগে। পৃষ্ঠাটি সম্পূর্ণরূপে লোড হতে 7.1 সেকেন্ড সময় লাগে। পরিষেবা কর্মী ক্যাশিং সহ, আমাদের পুনরাবৃত্তি পরিদর্শন অর্থপূর্ণ পেইন্ট অর্জন করে এবং 0.8 সেকেন্ডে সম্পূর্ণরূপে লোডিং শেষ করে৷
অন্যান্য মতামত একটি অনুরূপ গল্প বলে. অ্যাপ্লিকেশন শেলটিতে প্রথম অর্থপূর্ণ পেইন্ট অর্জন করতে 3 সেকেন্ডের তুলনা করুন:
আমাদের পরিষেবা কর্মী ক্যাশে থেকে একই পৃষ্ঠা লোড হলে 0.9 সেকেন্ড সময় লাগে৷ আমাদের শেষ ব্যবহারকারীদের জন্য 2 সেকেন্ডের বেশি সময় সংরক্ষণ করা হয়।
অ্যাপ্লিকেশন শেল আর্কিটেকচার ব্যবহার করে আপনার নিজের অ্যাপ্লিকেশনের জন্য অনুরূপ এবং নির্ভরযোগ্য পারফরম্যান্স জয় সম্ভব।
পরিষেবা কর্মী কি আমাদের অ্যাপগুলিকে কীভাবে গঠন করি তা পুনর্বিবেচনা করতে চান?
পরিষেবা কর্মীরা অ্যাপ্লিকেশন আর্কিটেকচারে কিছু সূক্ষ্ম পরিবর্তন বোঝায়। আপনার সমস্ত অ্যাপ্লিকেশনকে একটি এইচটিএমএল স্ট্রিংয়ে স্কোয়াশ করার পরিবর্তে, AJAX-শৈলীতে কাজ করা উপকারী হতে পারে। এখানেই আপনার একটি শেল রয়েছে (যা সর্বদা ক্যাশে থাকে এবং সর্বদা নেটওয়ার্ক ছাড়াই বুট আপ করা যায়) এবং সামগ্রী যা নিয়মিত রিফ্রেশ করা হয় এবং আলাদাভাবে পরিচালিত হয়।
এই বিভাজনের প্রভাব অনেক বড়। প্রথম দর্শনে আপনি সার্ভারে সামগ্রী রেন্ডার করতে পারেন এবং ক্লায়েন্টে পরিষেবা কর্মী ইনস্টল করতে পারেন। পরবর্তী ভিজিটগুলিতে আপনাকে শুধুমাত্র ডেটার অনুরোধ করতে হবে।
প্রগতিশীল বর্ধন সম্পর্কে কি?
যদিও পরিষেবা কর্মী বর্তমানে সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়, অ্যাপ্লিকেশন সামগ্রী শেল আর্কিটেকচার প্রগতিশীল বর্ধিতকরণ ব্যবহার করে যাতে প্রত্যেকে সামগ্রী অ্যাক্সেস করতে পারে। উদাহরণস্বরূপ, আমাদের নমুনা প্রকল্প নিন।
নীচে আপনি Chrome, Firefox Nightly এবং Safari-এ রেন্ডার করা সম্পূর্ণ সংস্করণ দেখতে পাবেন। খুব বাম দিকে আপনি সাফারি সংস্করণটি দেখতে পারেন যেখানে কোনও পরিষেবা কর্মী ছাড়াই সার্ভারে সামগ্রীটি রেন্ডার করা হয়। ডানদিকে আমরা পরিষেবা কর্মী দ্বারা চালিত Chrome এবং Firefox Nightly সংস্করণগুলি দেখতে পাচ্ছি।
কখন এই স্থাপত্য ব্যবহার করার অর্থ হয়?
অ্যাপ্লিকেশান শেল আর্কিটেকচারটি গতিশীল অ্যাপ এবং সাইটগুলির জন্য সবচেয়ে বেশি অর্থবহ করে তোলে৷ যদি আপনার সাইটটি ছোট এবং স্থির হয়, তাহলে আপনার সম্ভবত একটি অ্যাপ্লিকেশন শেল প্রয়োজন নেই এবং oninstall ধাপে একজন পরিষেবা কর্মীতে পুরো সাইটটি ক্যাশে করতে পারেন। আপনার প্রকল্পের জন্য সবচেয়ে অর্থপূর্ণ যে পদ্ধতির ব্যবহার করুন। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের একটি সংখ্যা ইতিমধ্যেই বিষয়বস্তু থেকে আপনার অ্যাপ্লিকেশন লজিককে বিভক্ত করতে উৎসাহিত করে, এই প্যাটার্নটিকে প্রয়োগের জন্য আরও সোজা করে তোলে।
এখনও এই প্যাটার্ন ব্যবহার করে কোনো উত্পাদন অ্যাপ্লিকেশন আছে?
অ্যাপ্লিকেশন শেল আর্কিটেকচারটি আপনার সামগ্রিক অ্যাপ্লিকেশনের UI-তে মাত্র কয়েকটি পরিবর্তনের সাথে সম্ভব এবং এটি Google-এর I/O 2015 প্রগ্রেসিভ ওয়েব অ্যাপ এবং Google-এর ইনবক্সের মতো বড় আকারের সাইটগুলির জন্য ভাল কাজ করেছে৷
অফলাইন অ্যাপ্লিকেশান শেলগুলি একটি বড় পারফরম্যান্স জয় এবং জেক আর্কিবল্ডের অফলাইন উইকিপিডিয়া অ্যাপ এবং ফ্লিপকার্ট লাইটের প্রগতিশীল ওয়েব অ্যাপেও ভালভাবে প্রদর্শিত হয়।
স্থাপত্যের ব্যাখ্যা
প্রথম লোড অভিজ্ঞতার সময়, আপনার লক্ষ্য হল যত তাড়াতাড়ি সম্ভব ব্যবহারকারীর স্ক্রিনে অর্থপূর্ণ বিষয়বস্তু পাওয়া।
প্রথমে লোড করুন এবং অন্যান্য পেজ লোড করুন
সাধারণভাবে অ্যাপ্লিকেশন শেল আর্কিটেকচার হবে:
প্রাথমিক লোডকে অগ্রাধিকার দিন, কিন্তু পরিষেবা কর্মীকে অ্যাপ্লিকেশন শেল ক্যাশে করতে দিন যাতে বারবার ভিজিট করার জন্য শেলটিকে নেটওয়ার্ক থেকে পুনরায় আনার প্রয়োজন না হয়।
অলস-লোড বা ব্যাকগ্রাউন্ড লোড বাকি সবকিছু। একটি ভাল বিকল্প হ'ল গতিশীল সামগ্রীর জন্য রিড-থ্রু ক্যাশিং ব্যবহার করা।
পরিষেবা কর্মী সরঞ্জামগুলি ব্যবহার করুন, যেমন sw-precache , উদাহরণস্বরূপ নির্ভরযোগ্যভাবে ক্যাশে এবং পরিষেবা কর্মী আপডেট করতে যা আপনার স্ট্যাটিক সামগ্রী পরিচালনা করে৷ (পরে sw-precache সম্পর্কে আরও।)
এটি অর্জন করতে:
সার্ভার এইচটিএমএল কন্টেন্ট পাঠাবে যা ক্লায়েন্ট রেন্ডার করতে পারে এবং পরিষেবা কর্মী সমর্থন ছাড়াই ব্রাউজারগুলির অ্যাকাউন্টে সুদূর ভবিষ্যতের HTTP ক্যাশে মেয়াদ শেষ হওয়ার শিরোনাম ব্যবহার করতে পারে। এটি হ্যাশ ব্যবহার করে ফাইলের নাম পরিবেশন করবে যাতে 'সংস্করণ' এবং পরবর্তীতে অ্যাপ্লিকেশনের জীবনচক্রের জন্য সহজ আপডেট উভয়ই সক্ষম হয়।
অ্যাপ্লিকেশন শেলের একটি দ্রুত প্রথম পেইন্ট প্রদান করতে পৃষ্ঠা(গুলি) নথির
<head>মধ্যে একটি<style>ট্যাগে ইনলাইন CSS শৈলী অন্তর্ভুক্ত করবে। প্রতিটি পৃষ্ঠা বর্তমান দৃশ্যের জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট অ্যাসিঙ্ক্রোনাসভাবে লোড করবে। যেহেতু সিএসএস অ্যাসিঙ্ক্রোনাসভাবে লোড করা যায় না, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে শৈলীর জন্য অনুরোধ করতে পারি কারণ এটি পার্সার-চালিত এবং সিঙ্ক্রোনাস না হয়ে অ্যাসিঙ্ক্রোনাস। এছাড়াও আমরাrequestAnimationFrame()এর সুবিধা নিতে পারি এমন ঘটনা এড়াতে যেখানে আমরা দ্রুত ক্যাশে হিট পেতে পারি এবং স্টাইলগুলি দুর্ঘটনাক্রমে সমালোচনামূলক রেন্ডারিং পাথের অংশ হয়ে উঠতে পারি।requestAnimationFrame()শৈলী লোড করার আগে প্রথম ফ্রেমকে আঁকার জন্য জোর করে। আরেকটি বিকল্প হল জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাসিঙ্ক্রোনাসভাবে CSS-এর অনুরোধ করার জন্য ফিলামেন্ট গ্রুপের লোডসিএসএস- এর মতো প্রকল্পগুলি ব্যবহার করা।পরিষেবা কর্মী অ্যাপ্লিকেশন শেলের একটি ক্যাশ করা এন্ট্রি সংরক্ষণ করবে যাতে বারবার ভিজিট করার সময়, নেটওয়ার্কে একটি আপডেট উপলব্ধ না হওয়া পর্যন্ত শেলটি পরিষেবা কর্মী ক্যাশে থেকে সম্পূর্ণরূপে লোড করা যেতে পারে।
একটি বাস্তব বাস্তবায়ন
আমরা অ্যাপ্লিকেশন শেল আর্কিটেকচার, ক্লায়েন্টের জন্য ভ্যানিলা ES2015 জাভাস্ক্রিপ্ট এবং সার্ভারের জন্য Express.js ব্যবহার করে একটি সম্পূর্ণ কার্যকরী নমুনা লিখেছি। অবশ্যই ক্লায়েন্ট বা সার্ভারের অংশগুলির (যেমন পিএইচপি, রুবি, পাইথন) জন্য আপনার নিজস্ব স্ট্যাক ব্যবহার করতে আপনাকে বাধা দেওয়ার কিছু নেই।
সেবা কর্মীর জীবনচক্র
আমাদের অ্যাপ্লিকেশন শেল প্রকল্পের জন্য, আমরা sw-precache ব্যবহার করি যা নিম্নলিখিত পরিষেবা কর্মী জীবনচক্র অফার করে:
| ঘটনা | কর্ম |
|---|---|
| ইনস্টল করুন | অ্যাপ্লিকেশন শেল এবং অন্যান্য একক পৃষ্ঠা অ্যাপ্লিকেশন সংস্থান ক্যাশে করুন। |
| সক্রিয় করুন | পুরানো ক্যাশে সাফ করুন। |
| আনুন | URL-এর জন্য একটি একক পৃষ্ঠার ওয়েব অ্যাপ পরিবেশন করুন এবং সম্পদ এবং পূর্বনির্ধারিত আংশিকগুলির জন্য ক্যাশে ব্যবহার করুন। অন্যান্য অনুরোধের জন্য নেটওয়ার্ক ব্যবহার করুন. |
সার্ভার বিট
এই আর্কিটেকচারে, একটি সার্ভার সাইড কম্পোনেন্ট (আমাদের ক্ষেত্রে, এক্সপ্রেসে লেখা) বিষয়বস্তু এবং উপস্থাপনাকে আলাদাভাবে ব্যবহার করতে সক্ষম হওয়া উচিত। বিষয়বস্তু একটি HTML লেআউটে যোগ করা যেতে পারে যার ফলে পৃষ্ঠার একটি স্ট্যাটিক রেন্ডার হয়, অথবা এটি আলাদাভাবে পরিবেশন করা যেতে পারে এবং গতিশীলভাবে লোড করা যেতে পারে।
বোধগম্যভাবে, আপনার সার্ভার-সাইড সেটআপ আমাদের ডেমো অ্যাপের জন্য যেটি ব্যবহার করি তার থেকে ব্যাপকভাবে ভিন্ন হতে পারে। ওয়েব অ্যাপের এই প্যাটার্নটি বেশিরভাগ সার্ভার সেটআপ দ্বারা অর্জনযোগ্য, যদিও এটির জন্য কিছু পুনর্নির্মাণের প্রয়োজন হয় । আমরা খুঁজে পেয়েছি যে নিম্নলিখিত মডেলটি বেশ ভাল কাজ করে:
আপনার অ্যাপ্লিকেশানের তিনটি অংশের জন্য শেষ পয়েন্টগুলি সংজ্ঞায়িত করা হয়েছে: ইউআরএলের মুখোমুখি ব্যবহারকারী (সূচী/ওয়াইল্ডকার্ড), অ্যাপ্লিকেশন শেল (পরিষেবা কর্মী) এবং আপনার HTML আংশিকগুলি৷
প্রতিটি এন্ডপয়েন্টে একটি কন্ট্রোলার থাকে যা একটি হ্যান্ডেলবার লেআউটে টান দেয় যার ফলে হ্যান্ডেলবার আংশিক এবং ভিউ টানতে পারে। সহজভাবে বলতে গেলে, আংশিক হল এমন ভিউ যা HTML এর অংশ যা চূড়ান্ত পৃষ্ঠায় কপি করা হয়। দ্রষ্টব্য: জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা আরও উন্নত ডেটা সিঙ্ক্রোনাইজেশন করে সেগুলি প্রায়শই একটি অ্যাপ্লিকেশন শেল আর্কিটেকচারে পোর্ট করা সহজ। তারা আংশিকগুলির পরিবর্তে ডেটা-বাইন্ডিং এবং সিঙ্ক ব্যবহার করার প্রবণতা রাখে।
ব্যবহারকারীকে প্রাথমিকভাবে বিষয়বস্তু সহ একটি স্ট্যাটিক পৃষ্ঠা পরিবেশন করা হয়। এই পৃষ্ঠাটি একজন পরিষেবা কর্মীকে নিবন্ধন করে, যদি এটি সমর্থিত হয়, যা অ্যাপ্লিকেশন শেলকে ক্যাশে করে এবং এটির উপর নির্ভর করে (CSS, JS ইত্যাদি)।
অ্যাপ শেল তারপর একটি নির্দিষ্ট URL-এর জন্য সামগ্রীতে জাভাস্ক্রিপ্ট থেকে XHR ব্যবহার করে একটি একক পৃষ্ঠার ওয়েব অ্যাপ হিসেবে কাজ করবে। XHR কলগুলি একটি /partials* এন্ডপয়েন্টে করা হয় যা সেই বিষয়বস্তু প্রদর্শনের জন্য প্রয়োজনীয় HTML, CSS এবং JS-এর ছোট অংশ প্রদান করে। দ্রষ্টব্য: এটির সাথে যোগাযোগ করার অনেক উপায় রয়েছে এবং XHR তাদের মধ্যে একটি। কিছু অ্যাপ্লিকেশন প্রাথমিক রেন্ডারের জন্য তাদের ডেটা (সম্ভবত JSON ব্যবহার করে) ইনলাইন করবে এবং তাই সমতল HTML অর্থে "স্থির" নয়।
পরিষেবা কর্মী সমর্থন ছাড়া ব্রাউজারগুলি সর্বদা একটি পতন-ব্যাক অভিজ্ঞতা পরিবেশন করা উচিত। আমাদের ডেমোতে, আমরা বেসিক স্ট্যাটিক সার্ভার-সাইড রেন্ডারিং-এ ফিরে আসি, কিন্তু এটি অনেকগুলি বিকল্পের মধ্যে একটি মাত্র। পরিষেবা কর্মী দৃষ্টিভঙ্গি আপনাকে ক্যাশ করা অ্যাপ্লিকেশন শেল ব্যবহার করে আপনার একক-পৃষ্ঠা অ্যাপ্লিকেশন শৈলী অ্যাপ্লিকেশনটির কার্যকারিতা বাড়ানোর জন্য নতুন সুযোগ প্রদান করে।
ফাইল সংস্করণ
একটি প্রশ্ন উত্থাপিত হয় কিভাবে ফাইল সংস্করণ এবং আপডেট পরিচালনা করতে হয়. এটি অ্যাপ্লিকেশন নির্দিষ্ট এবং বিকল্পগুলি হল:
প্রথমে নেটওয়ার্ক এবং অন্যথায় ক্যাশে সংস্করণ ব্যবহার করুন।
শুধুমাত্র নেটওয়ার্ক এবং অফলাইনে ব্যর্থ হলে।
পুরানো সংস্করণ ক্যাশ করুন এবং পরে আপডেট করুন।
অ্যাপ্লিকেশন শেলের জন্য, আপনার পরিষেবা কর্মী সেটআপের জন্য একটি ক্যাশে-প্রথম পদ্ধতি গ্রহণ করা উচিত। আপনি যদি অ্যাপ্লিকেশন শেল ক্যাশে না করেন তবে আপনি সঠিকভাবে আর্কিটেকচার গ্রহণ করেননি।
টুলিং
আমরা অনেকগুলি বিভিন্ন পরিষেবা কর্মী হেল্পার লাইব্রেরি বজায় রাখি যা আপনার অ্যাপ্লিকেশনের শেল প্রিক্যাচ করার প্রক্রিয়া বা সাধারণ ক্যাশিং প্যাটার্নগুলি সেটআপ করা সহজ করে তোলে।
আপনার অ্যাপ্লিকেশন শেলের জন্য sw-precache ব্যবহার করুন
অ্যাপ্লিকেশন শেল ক্যাশে করতে sw-precache ব্যবহার করে ফাইল সংশোধন, ইনস্টল/অ্যাক্টিভেট প্রশ্ন এবং অ্যাপ শেলের জন্য আনার দৃশ্যের বিষয়ে উদ্বেগগুলি পরিচালনা করা উচিত। আপনার অ্যাপ্লিকেশানের বিল্ড প্রক্রিয়ায় sw-precache ড্রপ করুন এবং আপনার স্ট্যাটিক রিসোর্স নিতে কনফিগারযোগ্য ওয়াইল্ডকার্ড ব্যবহার করুন। আপনার পরিষেবা কর্মী স্ক্রিপ্ট ম্যানুয়ালি হাতে তৈরি করার পরিবর্তে, sw-precache কে এমন একটি তৈরি করতে দিন যা একটি ক্যাশে-ফার্স্ট ফেচ হ্যান্ডলার ব্যবহার করে আপনার ক্যাশে নিরাপদ এবং দক্ষভাবে পরিচালনা করে৷
আপনার অ্যাপে প্রাথমিক ভিজিট প্রয়োজনীয় সম্পদের সম্পূর্ণ সেটের প্রিক্যাচিং ট্রিগার করে। এটি একটি অ্যাপ স্টোর থেকে একটি নেটিভ অ্যাপ ইনস্টল করার অভিজ্ঞতার মতো। ব্যবহারকারীরা যখন আপনার অ্যাপে ফিরে আসে, তখন শুধুমাত্র আপডেট করা সম্পদ ডাউনলোড করা হয়। আমাদের ডেমোতে, আমরা ব্যবহারকারীদের জানিয়ে দিই যখন একটি নতুন শেল পাওয়া যায়, "অ্যাপ আপডেট। নতুন সংস্করণের জন্য রিফ্রেশ করুন।" এই প্যাটার্নটি ব্যবহারকারীদের জানানোর একটি কম-ঘর্ষণ উপায় যে তারা সর্বশেষ সংস্করণের জন্য রিফ্রেশ করতে পারে।
রানটাইম ক্যাশে করার জন্য sw-toolbox ব্যবহার করুন
সম্পদের উপর নির্ভর করে বিভিন্ন কৌশল সহ রানটাইম ক্যাশে করার জন্য sw-toolbox ব্যবহার করুন:
ছবির জন্য cacheFirst , একটি ডেডিকেটেড নামের ক্যাশে সহ যার একটি কাস্টম মেয়াদ শেষ হওয়ার নীতি রয়েছে N maxEntry এর।
নেটওয়ার্ক ফার্স্ট বা এপিআই অনুরোধের জন্য দ্রুততম, পছন্দসই বিষয়বস্তুর সতেজতার উপর নির্ভর করে। দ্রুততম ঠিক হতে পারে, কিন্তু যদি একটি নির্দিষ্ট API ফিড থাকে যা ঘন ঘন আপডেট হয়, তাহলে networkFirst ব্যবহার করুন।
উপসংহার
অ্যাপ্লিকেশান শেল আর্কিটেকচারগুলি বেশ কয়েকটি সুবিধার সাথে আসে তবে এটি কেবলমাত্র কিছু শ্রেণীর অ্যাপ্লিকেশনের জন্যই বোধগম্য হয়। মডেলটি এখনও তরুণ এবং এটি এই আর্কিটেকচারের প্রচেষ্টা এবং সামগ্রিক কর্মক্ষমতা বেনিফিট মূল্যায়ন মূল্যবান হবে।
আমাদের পরীক্ষায়, আমরা ক্লায়েন্ট এবং সার্ভারের মধ্যে টেমপ্লেট ভাগ করে নেওয়ার সুবিধা নিয়েছি যাতে দুটি অ্যাপ্লিকেশন স্তর তৈরির কাজ কম করা যায়। এটি নিশ্চিত করে যে প্রগতিশীল বর্ধন এখনও একটি মূল বৈশিষ্ট্য।
আপনি যদি ইতিমধ্যে আপনার অ্যাপে পরিষেবা কর্মীদের ব্যবহার করার কথা বিবেচনা করছেন, তাহলে আর্কিটেকচারটি একবার দেখুন এবং মূল্যায়ন করুন যে এটি আপনার নিজের প্রকল্পগুলির জন্য অর্থপূর্ণ কিনা।
আমাদের পর্যালোচকদের ধন্যবাদ সহ: জেফ পসনিক, পল লুইস, অ্যালেক্স রাসেল, সেথ থম্পসন, রব ডডসন, টেলর স্যাভেজ এবং জো মেডলি।