PWA হিসাবে সান্তা ট্র্যাকার

সাইট দেখুন

সারাংশ

সান্তা ট্র্যাকারকে 2016 সালের ছুটির মরসুমের জন্য একটি অফলাইন প্রগ্রেসিভ ওয়েব অ্যাপে দ্রুত আপগ্রেড করা হয়েছে, আমাদের বিদ্যমান দৃশ্যের নকশার জন্য ধন্যবাদ।

ফলাফল

• সান্তা হল একটি প্রোগ্রেসিভ ওয়েব অ্যাপ (PWA) যা হোম স্ক্রীনে অ্যাড (ATHS) এবং অফলাইনে সমর্থন করে
• 10% যোগ্য সেশন ATHS আইকনের মাধ্যমে শুরু হয়
• 75% ব্যবহারকারী নেটিভভাবে কাস্টম উপাদান এবং ছায়া DOM সমর্থিত, ওয়েব উপাদানের দুটি মূল অংশ
• লাইটহাউস স্কোর 81
• অফলাইন, সার্ভিস ওয়ার্কার API-এর মাধ্যমে, শুধুমাত্র ক্যাশে পরিদর্শন করা দৃশ্যগুলিতে অলস লোডিং এবং নীরবে নতুন রিলিজে সেগুলি আপগ্রেড করার সাথে সংযুক্ত

পটভূমি

সান্তা ট্র্যাকার এখানে Google-এ একটি ছুটির ঐতিহ্য। প্রতি বছর, আপনি ডিসেম্বর জুড়ে গেমস এবং শিক্ষাগত অভিজ্ঞতার সাথে ঋতু উদযাপন করতে পারেন। এবং যখন সান্তা একটি উপযুক্ত বিরতি নেয়, তখন এলভস সান্তা ট্র্যাকারকে ওয়েব এবং অ্যান্ড্রয়েড উভয়ের জন্য ওপেন সোর্স হিসাবে প্রকাশ করার জন্য কাজ করে৷

ওয়েবে, সান্তা ট্র্যাকার হল একটি বৃহৎ, ইন্টারেক্টিভ সাইট যেখানে অনেকগুলি অনন্য 'দৃশ্য'- পলিমার ব্যবহার করে লেখা—যা বেশিরভাগ আধুনিক ব্রাউজার সমর্থন করে। একটি ব্যবহারকারীর ব্রাউজার 'আধুনিক' কিনা তার মূল্যায়ন বৈশিষ্ট্য সনাক্তকরণের মাধ্যমে নির্ধারিত হয়: সান্তার প্রয়োজন Set এবং ওয়েব পারফরমেন্স API , অন্যদের মধ্যে।

2016 সালে, বেশিরভাগ দৃশ্যের জন্য অফলাইন অভিজ্ঞতা সমর্থন করতে আমরা সান্তা ট্র্যাকারের পিছনে ইঞ্জিন আপগ্রেড করেছি। এটি YouTube ভিডিওগুলির দ্বারা সমর্থিত দৃশ্যগুলি বা সান্তার লাইভ অবস্থানের সাথে ডিল করা দৃশ্যগুলিকে বাদ দেয়, যা অবশ্যই শুধুমাত্র উত্তর মেরুতে সরাসরি সংযোগের সাথে উপলব্ধ! 📶☃️

একটি অ্যান্ড্রয়েড ডিভাইসে সান্তা ট্র্যাকার

চ্যালেঞ্জ

সান্তা একটি প্রতিক্রিয়াশীল ডিজাইন অন্তর্ভুক্ত করে যা ফোন, ট্যাবলেট এবং ডেস্কটপ জুড়ে ভাল কাজ করে। স্টাইলাইজড ভিজ্যুয়াল এবং হলিডে-থিমযুক্ত অডিও সহ দুর্দান্ত মাল্টিমিডিয়ার সাথে সাইটটি আনন্দিত। তবে সান্তা ট্র্যাকারের একটি নিয়মিত বিল্ড কয়েকশ মেগাবাইট! এটি কয়েকটি কারণে:

• সান্তা 35টিরও বেশি ভাষায় সমর্থিত, তাই অনেক সম্পদ অবশ্যই নকল করতে হবে।
• বিভিন্ন প্ল্যাটফর্মের বিভিন্ন মিডিয়া সমর্থন রয়েছে (যেমন, mp3 বনাম ogg)।
• মাল্টিমিডিয়া ফাইল কখনও কখনও বিভিন্ন আকার এবং রেজোলিউশন প্রদান করা হয়.

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

এই চ্যালেঞ্জগুলি:

• বিভিন্ন 'দৃশ্য'-এর জন্য বড় মাল্টিমিডিয়া সংস্থান
• পরিবর্তনগুলি সারা মাস জুড়ে প্রকাশিত হয়েছে

…একটি নিষ্পাপ অফলাইন কৌশলের অনুপযুক্ততার ফলে।

সান্তা, পলিমার দিয়ে নির্মিত

আমরা কীভাবে এটিকে অফলাইন PWA-তে আপগ্রেড করেছি সে সম্পর্কে ডাইভ করার আগে এটি পিছনে ফিরে আসা এবং সান্তার সামগ্রিক নকশা সম্পর্কে কথা বলা মূল্যবান।

সান্তা হল একটি একক-পৃষ্ঠার অ্যাপ্লিকেশন, মূলত পলিমার 0.5-এ লেখা, এবং এখন পলিমার 1.7-এ আপগ্রেড করা হয়েছে। সান্তা কোডের একটি ভাগ করা সেট নিয়ে গঠিত—রাউটার, ভাগ করা নেভিগেশন সম্পদ ইত্যাদি। এতে অনেক অনন্য 'দৃশ্য' রয়েছে।

প্রতিটি দৃশ্য একটি ভিন্ন URL- /village.html , /codelab.html এবং /boatload.html -এর মাধ্যমে অ্যাক্সেসযোগ্য এবং এটি তার নিজস্ব ওয়েব উপাদান। যখন একজন ব্যবহারকারী একটি দৃশ্য খোলে, আমরা তার সমস্ত প্রয়োজনীয় এইচটিএমএল এবং সম্পদ (ছবি, অডিও, সিএসএস, জেএস) প্রিলোড করি, যা সান্তা ট্র্যাকার সংগ্রহস্থলে /scenes/[[sceneName]] এর অধীনে বিদ্যমান। এটি হওয়ার সময়, ব্যবহারকারীরা একটি বন্ধুত্বপূর্ণ প্রিলোডার দেখতে পান যা অগ্রগতি দেখায়।

এই পদ্ধতির অর্থ হল ব্যবহারকারীরা যে দৃশ্যগুলি দেখেন না (যা অনেক ডেটা) তার জন্য আমাদের অপ্রয়োজনীয় সম্পদ লোড করতে হবে না। এর মানে হল যে আমাদের প্রতিটি দৃশ্যের জন্য প্রয়োজনীয় সমস্ত সম্পদের একটি অভ্যন্তরীণ 'ক্যাশে ম্যানিফেস্ট' রাখতে হবে। ক্যাশে ম্যানিফেস্ট হল একটি JSON ফাইল যা ফাইলের নাম থেকে এর বিষয়বস্তুর একটি MD5 হ্যাশে ম্যাপিং সংরক্ষণ করে।

আপনি যা ব্যবহার করেন তা লোড করুন

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

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

সান্তা ট্র্যাকার একটি দৃশ্য লোড করার জন্য নিম্নলিখিত পদক্ষেপগুলি গ্রহণ করে, যেমন, boatload-scene :

1. সমস্ত দৃশ্য উপাদান ( <boatload-scene> সহ) প্রাথমিকভাবে অজানা এবং কিছু অতিরিক্ত বৈশিষ্ট্য সহ সবগুলিকে HTMLUnknownElement হিসাবে গণ্য করা হয়৷
2. নির্বাচিত দৃশ্য পরিবর্তন করা হলে, <lazy-pages> উপাদানটি অবহিত করা হয়।
3. <lazy-pages> উপাদানটি দৃশ্যের উপাদান এবং path বৈশিষ্ট্যের সমাধান করে, HTML import scenes/boatload/boatload-scene_en.html লোড করে। এতে পলিমার উপাদান এবং এর নির্ভরশীল উপাদান রয়েছে।
4. বন্ধুত্বপূর্ণ প্রিলোডার দেখানো হয়.
5. একবার এইচটিএমএল ইম্পোর্ট লোড এবং এক্সিকিউট হয়ে গেলে, <boatload-scene> স্বচ্ছভাবে একটি সত্যিকারের পলিমার উপাদানে আপগ্রেড হয়, ছুটির আনন্দে পূর্ণ। 🎄🎉

এই পদ্ধতির তার চ্যালেঞ্জ আছে. উদাহরণস্বরূপ, আমরা ডুপ্লিকেট ওয়েব উপাদান অন্তর্ভুক্ত করতে চাই না। যদি দুটি দৃশ্য একটি সাধারণ উপাদান ব্যবহার করে, যেমন, paper-button , আমরা আমাদের বিল্ড প্রক্রিয়ার অংশ হিসাবে এটিকে সরিয়ে ফেলি এবং পরিবর্তে এটিকে সান্তার শেয়ার করা কোডে অন্তর্ভুক্ত করি।

অফলাইন ডিজাইন

পলিমার এবং lazy-pages জন্য সান্তা ট্র্যাকার ইতিমধ্যেই সুন্দরভাবে দৃশ্যগুলিতে ভাগ করা হয়েছে; প্লাস প্রতিটি দৃশ্যের নিজস্ব ডিরেক্টরি আছে। আমরা সান্তা ট্র্যাকারের পরিষেবা কর্মী ডিজাইন করেছি, মূল অংশ যা অফলাইনে সক্ষম করে যা ব্যবহারকারীর ব্রাউজারে চলে, শেয়ার করা কোড বনাম 'দৃশ্য' পার্থক্য সম্পর্কে সচেতন হতে।

সেবা কর্মীর পিছনে তত্ত্ব কি? যখন একটি সমর্থিত ব্রাউজারে একজন ব্যবহারকারী আপনার সাইট লোড করে, তখন ফ্রন্টএন্ড HTML অনুরোধ করতে পারে যে পরিষেবা কর্মী ইনস্টল করা আছে। সান্তা ট্র্যাকারের জন্য, পরিষেবা কর্মী /sw.js এ থাকেন। এটি একটি install ইভেন্ট চালু করে যা সান্তার শেয়ার করা সমস্ত কোড প্রিক্যাচ করবে, তাই রানটাইমে কিছু আনার দরকার নেই৷

সার্ভিস ওয়ার্কার, একবার ইন্সটল করলে, সমস্ত HTTP অনুরোধ আটকাতে সক্ষম। সান্তা ট্র্যাকারের জন্য, সরলীকৃত সিদ্ধান্তের প্রবাহটি এইরকম দেখাচ্ছে:

1. অনুরোধটি কি ইতিমধ্যেই ক্যাশ করা হয়েছে?
   • দারুণ! ক্যাশে করা প্রতিক্রিয়া ফেরত দিন।
2. অনুরোধটি কি একটি দৃশ্য ডিরেক্টরির সাথে মেলে, যেমন "scenes/boatload/boatload-scene_en.html"?
   • একটি নেটওয়ার্ক অনুরোধ সম্পাদন করুন, এবং ব্যবহারকারীর কাছে ফেরত দেওয়ার আগে ফলাফলটি ক্যাশে সংরক্ষণ করুন৷
3. অন্যথায়, একটি নিয়মিত নেটওয়ার্ক অনুরোধ সম্পাদন করুন।

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

আগ্রহী পর্যবেক্ষকরা লক্ষ্য করতে পারেন যে আমাদের ক্যাশিং কৌশল সামগ্রীতে পরিবর্তনের অনুমতি দেয় না। একবার ব্যবহারকারীর ব্রাউজারে একটি ফাইল ক্যাশে করা হলে, এটি কখনই পরিবর্তন করা হবে না। পরে যে আরো.

আমরা এটা লাইভ করব

আমরা যেমন উল্লেখ করেছি, সান্তার এলভরা ডিসেম্বর জুড়ে কঠোর পরিশ্রম করে এবং তাদের প্রায়শই পুরো মাস জুড়ে নতুন আপডেট প্রকাশ করতে হয়। যখন সান্তা ট্র্যাকারের একটি রিলিজ তৈরি করা হয়, তখন এটিকে একটি অনন্য লেবেল দেওয়া হয়—যেমন, v20161204112055 , রিলিজের টাইমস্ট্যাম্প (4 ঠা ডিসেম্বর, 2016 তারিখে 11:20:55)।

এই লেবেলযুক্ত প্রকাশের জন্য, আমরা প্রতিটি ফাইলের একটি MD5 হ্যাশ তৈরি করি এবং এটিকে আমাদের 'ক্যাশে ম্যানিফেস্ট'-এ সংরক্ষণ করি। একটি আধুনিক সলিড-স্টেট ডিস্কে, এটি বিল্ড প্রক্রিয়ায় মাত্র কয়েক সেকেন্ড যোগ করে।

প্রতিটি রিলিজ Google এর স্ট্যাটিক ক্যাশিং সার্ভারে একটি অনন্য পাথে স্থাপন করা হয়। যে, পুরানো রিলিজ মুছে ফেলা হয় না. এর মানে হল যে একটি নতুন রিলিজের পরে, সমস্ত সম্পদের একটি আলাদা URL থাকবে—এমনকি যদি তারা পরিবর্তন না করেও—এবং ব্রাউজার বা পরিষেবা কর্মী দ্বারা ক্যাশে করা কিছু অকেজো হবে, যদি না আমরা কিছু অতিরিক্ত কাজ করি৷

আমরা যাকে "প্রোড" রিসোর্স বলে থাকি তার একটি নতুন সংস্করণও স্থাপন করি—সান্তার ইনডেক্স HTML এবং পরিষেবা কর্মী—যা https://santatracker.google.com/ এ লাইভ। এটি পুরানো সংস্করণটি ওভাররাইট করে।

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

এই মুহুর্তে, একজন ব্যবহারকারীর ব্রাউজারগুলি নতুন 'ক্যাশে ম্যানিফেস্ট' দেখবে। এটি ব্যবহারকারীর বিদ্যমান ক্যাশের সাথে তুলনা করা হবে এবং যদি সম্পদের একটি ভিন্ন MD5 হ্যাশ থাকে, তাহলে আমরা সেগুলিকে ক্যাশে থেকে মুছে ফেলি এবং ব্রাউজারকে এটি পুনরায় ফিরিয়ে আনতে বলি৷ যাইহোক, বেশিরভাগ ক্ষেত্রে, ক্যাশে করা বিষয়বস্তু মূলত একই বা সামান্য পার্থক্য রয়েছে।

সান্তা ট্র্যাকারে, পরিষেবা কর্মী আপগ্রেড করার ফলে ব্যবহারকারীর ব্রাউজার অবিলম্বে পুনরায় লোড হয়।

দ্রষ্টব্য: এটি একটি আক্রমণাত্মক কৌশল, এবং একটি গেম খেলার মাঝখানে থাকা ব্যবহারকারীকে ব্যাহত করতে পারে। আপনার অভিজ্ঞতার জন্য উপযুক্ত একটি রিলোড কৌশল বেছে নিন।

অফলাইন ব্রাউজিং অভিজ্ঞতা

অবশ্যই, অফলাইন অভিজ্ঞতাকে সমর্থন করার জন্য আমাদের UI-তেও কিছু পরিবর্তন করতে হয়েছিল—এবং এমন ব্যবহারকারীদের জন্য বোঝা সহজ করতে যারা একটি ওয়েবসাইট অফলাইনে কাজ করতে পারে বলে আশা করেন না।

আপনি যখন অফলাইনে ব্রাউজ করছেন তখন একটি ছোট ব্যানার আপনাকে বলে। ক্যাশে করা নয় এমন সমস্ত দৃশ্য "হিমায়িত" এবং ক্লিক করা যায় না৷ এইভাবে, ব্যবহারকারীরা উপলব্ধ নয় এমন সামগ্রী অ্যাক্সেস করতে পারবেন না।

সান্তা ট্র্যাকার সান্তার API এ নিয়মিত অনুরোধ করে। যদি এই অনুরোধগুলি ব্যর্থ হয় বা সময় শেষ হয়, আমরা ধরে নিই যে ব্যবহারকারী অফলাইন। আমরা ব্রাউজারের অন্তর্নির্মিত navigator.onLine প্রপার্টির পরিবর্তে এই API ব্যবহার করি : এটি শুধুমাত্র ব্যবহারকারী অনলাইন হতে পারে কিনা তা আমাদের জানাবে। (এটি লাই-ফাই নামেও পরিচিত)।

আন্তর্জাতিক সংযোগ

যদিও আমাদের ব্যবহারকারীদের অধিকাংশই ইংরেজিতে (জাপানি, পর্তুগিজ, স্প্যানিশ এবং ফ্রেঞ্চ অনুসরণ করে), সান্তা 35টিরও বেশি ভিন্ন ভাষায় নির্মিত এবং প্রকাশ করা হয়েছে।

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

এটিকে অন্যভাবে বলতে গেলে, পরিষেবা কর্মীর উদ্দেশ্যে সান্তা ট্র্যাকারের বর্তমান সংস্করণটি আসলে (বিল্ড,ভাষা) এর একটি টিপল।

হোম স্ক্রিনে যোগ করুন

যেহেতু সান্তা অফলাইনে কাজ করে এবং একজন পরিষেবা কর্মী প্রদান করে, যোগ্য ব্যবহারকারীদের তাদের হোম স্ক্রিনে এটি ইনস্টল করার জন্য অনুরোধ করা হয়। 2016 সালে, প্রায় 10% যোগ্য লোড হোম স্ক্রীন আইকন থেকে ছিল।

উপসংহার

আমরা দ্রুত সান্তা ট্র্যাকারকে একটি অফলাইন PWA-তে রূপান্তর করতে সক্ষম হয়েছি—একটি নির্ভরযোগ্য, আকর্ষক অভিজ্ঞতা সক্ষম করে—আমাদের বিদ্যমান দৃশ্য ডিজাইনের জন্য ধন্যবাদ, আমাদের পলিমার এবং ওয়েব উপাদানগুলির বিদ্যমান ব্যবহারের মাধ্যমে সহজ করা হয়েছে৷ এটি আমাদের বিল্ড সিস্টেমকে দক্ষ আপগ্রেড করতে, শুধুমাত্র পরিবর্তিত সম্পদকে অবৈধ করে।

যদিও সান্তা মূলত একটি কাস্টম-নির্মিত সমাধান, এর অনেক নীতি পলিমার প্রকল্পের অ্যাপ টুলবক্সে পাওয়া যাবে। আমরা আপনাকে স্ক্র্যাচ থেকে একটি নতুন PWA তৈরি করছেন কিনা তা পরীক্ষা করার পরামর্শ দিচ্ছি—অথবা, আপনি যদি একটি কাঠামো-অজ্ঞেয়বাদী পদ্ধতির সন্ধান করছেন, ওয়ার্কবক্স লাইব্রেরি চেষ্টা করুন৷