প্রগতিশীল ওয়েব অ্যাপস: আপনার PWA ক্ষমতায়ন

1. স্বাগতম

এই ল্যাবে, আপনি একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশন নেবেন এবং এতে উন্নত ক্ষমতা যোগ করবেন। প্রগ্রেসিভ ওয়েব অ্যাপ ওয়ার্কশপের জন্য সহচর কোডল্যাবগুলির একটি সিরিজের মধ্যে এটি ষষ্ঠ ৷ আগের কোডল্যাবটি ছিল প্রম্পটিং এবং মেজারিং ইন্সটল । এই সিরিজে আরও দুটি কোডল্যাব রয়েছে।

আপনি কি শিখবেন

  • ফাইল সিস্টেম অ্যাক্সেস API ব্যবহার করে ব্যবহারকারীর ফাইল সিস্টেম থেকে ফাইলগুলি খুলুন এবং সংরক্ষণ করুন
  • ফাইল হ্যান্ডলিং এপিআই-এর সাথে ফাইল হ্যান্ডলার হিসাবে আপনার ইনস্টল করা PWA নিবন্ধন করুন
  • মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API ব্যবহার করে একটি উইন্ডো খুলতে সঠিক স্ক্রীনটি বেছে নিন
  • স্ক্রীন ওয়েক লক এপিআই ব্যবহার করে একটি স্ক্রীনকে ঘুমিয়ে পড়া থেকে আটকান

আপনি কি জানতে হবে

  • জাভাস্ক্রিপ্ট

আপনি কি প্রয়োজন হবে

  • একটি ব্রাউজার যা উপরের API গুলিকে সমর্থন করে৷ কিছু API-এর জন্য, আপনাকে সম্পূর্ণ করার জন্য একটি সক্রিয় বিকাশকারী ট্রায়াল বা অরিজিন ট্রায়াল সহ একটি ব্রাউজার ব্যবহার করতে হতে পারে।

2. সেট আপ করুন

এই কোডল্যাবটি সম্পূর্ণ করার জন্য প্রয়োজনীয় স্টার্টার কোডটি ক্লোনিং বা ডাউনলোড করে শুরু করুন:

আপনি যদি রেপো ক্লোন করেন, নিশ্চিত করুন যে আপনি pwa05--empowering-your-pwa শাখায় আছেন। জিপ ফাইলটিতে সেই শাখার কোডও রয়েছে।

এই কোডবেসের জন্য 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. ফাইল পরিচালনা করুন

ব্যবহারকারীর কম্পিউটারে নতুন ফাইল খোলা, সংরক্ষণ এবং তৈরি করা এখন সম্ভব ফাইল সিস্টেম অ্যাক্সেস API-এর জন্য। ফাইল হ্যান্ডলিং API-এর সাথে একত্রিত, ব্যবহারকারীদের সরাসরি আপনার PWA-তে ফাইলগুলি খুলতে দেয়, আপনার PWA আপনার ব্যবহারকারীর প্রতিদিনের জীবনে নির্বিঘ্নে একত্রিত হতে পারে।

অ্যাপের মধ্যে থেকে খুলুন

হুক আপ করার প্রথম ক্রিয়াটি অ্যাপের মধ্যে থেকে ব্যবহারকারীর ফাইল সিস্টেম থেকে একটি ফাইল খুলতে সক্ষম হচ্ছে। js/lib/actions.js এ, Actions ক্লাসের open পদ্ধতিতে, কোড লিখুন যা নিম্নলিখিতগুলি করে:

  • একটি ফাইল পিকার খুলুন যা এক্সটেনশন .md বা .markdown সহ text/markdown ফাইল নেবে
  • পৃষ্ঠার শিরোনাম ওপেন ফাইলের নামের সাথে PWA Edit
  • this.handler অধীনে ফাইল হ্যান্ডলার সংরক্ষণ করুন
  • ফাইলের পাঠ্য সামগ্রীতে সম্পাদকের বিষয়বস্তু সেট করুন
  • হ্যান্ডলারটিকে settings-store ইনডেক্সডডিবি ডাটাবেসের settings অবজেক্ট স্টোরে সংরক্ষণ করুন।

পজিটিভ: মনে রাখবেন: ক্লাস কনস্ট্রাক্টররা 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 সেট করুন
  • সম্পাদকের বিষয়বস্তু একটি খালি স্ট্রিং এ সেট করুন
  • null this.handler handler সেট করুন
  • 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 ইনস্টল করুন এবং ফাইল সিস্টেম থেকে এটি দিয়ে একটি ফাইল খোলার চেষ্টা করুন!

একটি ফাইল সংরক্ষণ করা হচ্ছে

ব্যবহারকারীর জন্য দুটি ভিন্ন সংরক্ষণের পথ রয়েছে: ইতিমধ্যে খোলা ফাইলে পরিবর্তনগুলি সংরক্ষণ করা বা একটি নতুন ফাইলে সংরক্ষণ করা। ফাইল সিস্টেম অ্যাক্সেস API এর সাথে, একটি নতুন ফাইলে সংরক্ষণ করা সত্যিই একটি নতুন ফাইল তৈরি করছে এবং একটি ফাইল হ্যান্ডলারকে ফিরে পাচ্ছে, তাই শুরু করতে, আসুন একটি বিদ্যমান হ্যান্ডলার থেকে সংরক্ষণ করা যাক৷

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. একটি পূর্বরূপ দেখান

একটি মার্কডাউন সম্পাদকের সাথে, ব্যবহারকারীরা রেন্ডার করা আউটপুটের একটি পূর্বরূপ দেখতে চায়। উইন্ডো ম্যানেজমেন্ট 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 পদ্ধতিটি সম্পাদনা করে শুরু করুন:

  • উইন্ডো ম্যানেজমেন্ট API ব্যবহার করে উপলব্ধ স্ক্রিনগুলি পান
  • প্রাথমিক স্ক্রিন খুঁজে পেতে স্ক্রিনগুলি ফিল্টার করুন
  • Markdown preview এর শিরোনাম সহ /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 বিদ্যমান থাকে, wake লকটি ছেড়ে দিন এবং this.wakeLock পুনরায় সেট করুন
  • যদি এটি না হয়:
    • একটি ওয়েক লক সেন্টিনেল অনুরোধ করুন এবং এটি this.wakeLock wakeLock এ সেট করুন৷
    • নথির মূল অংশটি পূর্ণ পর্দায় যাওয়ার অনুরোধ করুন৷

6. অভিনন্দন!

আপনি শিখেছেন কিভাবে সিস্টেম ফাইলগুলি পরিচালনা করতে হয় এবং ফাইল সিস্টেম অ্যাক্সেস API এবং ফাইল হ্যান্ডলিং API ব্যবহার করে একটি সিস্টেমের সাথে আপনার PWA সংহত করতে হয়, উইন্ডো ম্যানেজমেন্ট API এর সাথে বিভিন্ন স্ক্রীন জুড়ে উইন্ডো খুলতে হয় এবং স্ক্রীন ওয়েক লক API এর সাথে একটি স্ক্রীনকে ঘুমোতে বাধা দেয়।

সিরিজের পরবর্তী কোডল্যাব হল সার্ভিস ওয়ার্কার ইনক্লুডস