ওয়েব ইন প্লে এর জন্য নতুন কি

André Cipriani Bandarra

Adriana Jara

প্রকাশিত: 2 ডিসেম্বর, 2020

যেহেতু বিশ্বস্ত ওয়েব অ্যাক্টিভিটি চালু হয়েছে, Chrome টিম এটিকে বাবল র‍্যাপের সাথে ব্যবহার করা আরও সহজ করেছে৷ আমরা অতিরিক্ত বৈশিষ্ট্য যোগ করেছি, যেমন Google Play বিলিং ইন্টিগ্রেশন , এবং ChromeOS এর মতো আরও প্ল্যাটফর্মে কাজ করার জন্য এটি সক্ষম করেছি।

Bubblewrap এবং বিশ্বস্ত ওয়েব কার্যকলাপ বৈশিষ্ট্য

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

সরলীকৃত সেটআপ প্রবাহ

পূর্বে, Bubblewrap ব্যবহার করার জন্য জাভা ডেভেলপমেন্ট কিট এবং Android SDK ম্যানুয়ালি সেট আপ করতে হবে, উভয়ই ত্রুটি প্রবণ। টুলটি এখন প্রথমবার চালানোর সময় বাহ্যিক নির্ভরতা স্বয়ংক্রিয়ভাবে ডাউনলোড করার প্রস্তাব দেয়।

আপনি এখনও নির্ভরতাগুলির একটি বিদ্যমান ইনস্টলেশন ব্যবহার করতে বেছে নিতে পারেন, যদি আপনি এটি করতে পছন্দ করেন, এবং নতুন doctor কমান্ড সমস্যাগুলি খুঁজে পেতে সহায়তা করে এবং কনফিগারেশনের সমাধানের সুপারিশ করে, যা এখন updateConfig কমান্ড ব্যবহার করে কমান্ড লাইন থেকে আপডেট করা যেতে পারে।

উন্নত উইজার্ড

init দিয়ে একটি প্রজেক্ট তৈরি করার সময়, Android অ্যাপ তৈরি করতে Bubblewrap-এর তথ্য প্রয়োজন। টুলটি ওয়েব অ্যাপ ম্যানিফেস্ট থেকে মান বের করে এবং যেখানে সম্ভব ডিফল্ট প্রদান করে।

একটি নতুন প্রকল্প তৈরি করার সময় আপনি সেই মানগুলি পরিবর্তন করতে পারেন, তবে আগে প্রতিটি ক্ষেত্রের অর্থ পরিষ্কার ছিল না। প্রারম্ভিক ডায়ালগগুলি প্রতিটি ইনপুট ক্ষেত্রের জন্য আরও ভাল বিবরণ এবং বৈধতা দিয়ে পুনর্নির্মাণ করা হয়েছিল।

পূর্ণস্ক্রীন এবং অভিযোজন সমর্থন প্রদর্শন করুন

কিছু ক্ষেত্রে, আপনি আপনার অ্যাপ্লিকেশনটিকে যতটা সম্ভব স্ক্রীন ব্যবহার করতে চাইতে পারেন এবং PWAs তৈরি করার সময়, ওয়েব অ্যাপ ম্যানিফেস্ট থেকে fullscreen display ক্ষেত্র সেট করে এটি প্রয়োগ করা হয়।

যখন Bubblewrap ওয়েব অ্যাপ ম্যানিফেস্টে পূর্ণস্ক্রীন বিকল্পটি সনাক্ত করে, তখন এটি Android অ্যাপ্লিকেশনটিকে সম্পূর্ণ স্ক্রীনে, বা নিমজ্জিত মোডে , Android নির্দিষ্ট শর্তে চালু করার জন্য কনফিগার করে।

ওয়েব অ্যাপ ম্যানিফেস্টের orientation ক্ষেত্রটি সংজ্ঞায়িত করে যে অ্যাপ্লিকেশনটি পোর্ট্রেট মোড, ল্যান্ডস্কেপ মোডে বা ডিভাইসটি বর্তমানে ব্যবহার করা অভিযোজনে শুরু করা উচিত কিনা৷ Bubblewrap এখন ওয়েব অ্যাপ ম্যানিফেস্ট ক্ষেত্র পড়ে এবং Android অ্যাপ তৈরি করার সময় এটিকে ডিফল্ট হিসেবে ব্যবহার করে।

আপনি উভয় কনফিগারেশন কাস্টমাইজ করতে পারেন bubblewrap init প্রবাহের অংশ হিসাবে কাস্টমাইজ করা যেতে পারে।

AppBundles আউটপুট

অ্যাপ বান্ডেল হল অ্যাপগুলির জন্য একটি প্রকাশনার ফর্ম্যাট যা চূড়ান্ত APK প্রজন্মকে অর্পণ করে এবং Play-তে সাইন করে। অনুশীলনে, স্টোর থেকে অ্যাপটি ডাউনলোড করার সময় এটি ব্যবহারকারীদের কাছে ছোট ফাইল পরিবেশন করতে সক্ষম করে।

Bubblewrap এখন app-release-bundle.aab নামে একটি ফাইলে অ্যাপ্লিকেশনটিকে একটি অ্যাপ বান্ডেল হিসাবে প্যাকেজ করে। প্লে স্টোরে অ্যাপ প্রকাশ করার সময় আপনার এই ফর্ম্যাটটি পছন্দ করা উচিত, কারণ এটি 2021 সাল পর্যন্ত স্টোরের জন্য প্রয়োজনীয় ।

ভূ-অবস্থান প্রতিনিধি দল

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

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

অপ্টিমাইজ করা বাইনারি

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

Bubblewrap প্রয়োজনীয় Android লাইব্রেরির তালিকা কমিয়ে অপ্টিমাইজ করা হয়েছে, যার ফলে 800k ছোট বাইনারি তৈরি হয়েছে। অনুশীলনে, এটি পূর্ববর্তী সংস্করণগুলির দ্বারা উত্পন্ন গড় আকারের অর্ধেকেরও কম। ছোট বাইনারিগুলির সুবিধা নিতে, আপনাকে শুধুমাত্র Bubblewrap এর সর্বশেষ সংস্করণ ব্যবহার করে আপনার অ্যাপ আপডেট করতে হবে।

কিভাবে একটি বিদ্যমান অ্যাপ আপডেট করবেন

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

আপনার অ্যাপ আপডেট করা উচিত যাতে এটি লেটেস্ট বাগ ফিক্স এবং বৈশিষ্ট্য সহ র্যাপারের সর্বশেষ সংস্করণ ব্যবহার করছে। Bubblewrap এর সর্বশেষ সংস্করণ ইনস্টল করার সাথে, update কমান্ডটি একটি বিদ্যমান প্রকল্পে মোড়কের সর্বশেষ সংস্করণ প্রয়োগ করে:

npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build

সেই অ্যাপ্লিকেশনগুলিকে আপডেট করার আরেকটি কারণ হল ওয়েব ম্যানিফেস্টের পরিবর্তনগুলি অ্যাপ্লিকেশনটিতে প্রয়োগ করা হয়েছে তা নিশ্চিত করা৷ এর জন্য নতুন merge কমান্ড ব্যবহার করুন:

bubblewrap merge
bubblewrap update
bubblewrap build

গুণমানের মানদণ্ডের আপডেট

ক্রোম 86 বিশ্বস্ত ওয়েব অ্যাক্টিভিটি কোয়ালিটি ক্রাইটেরিয়াতে পরিবর্তন এনেছে, যা বিশ্বস্ত ওয়েব অ্যাক্টিভিটি ব্যবহার করে PWA-এর জন্য মানের মানদণ্ডের পরিবর্তনে সম্পূর্ণ ব্যাখ্যা করা হয়েছে।

একটি দ্রুত সারাংশ হল যে আপনার অ্যাপ্লিকেশনগুলিকে ক্র্যাশ হওয়া থেকে রক্ষা করার জন্য নিম্নলিখিত পরিস্থিতিগুলি পরিচালনা করে তা নিশ্চিত করা উচিত:

• অ্যাপ্লিকেশন লঞ্চের সময় ডিজিটাল সম্পদ লিঙ্ক যাচাই করতে ব্যর্থ
• একটি অফলাইন নেটওয়ার্ক সংস্থান অনুরোধের জন্য HTTP 200 ফেরত দিতে ব্যর্থ৷
• অ্যাপ্লিকেশনটিতে HTTP 404 বা 5xx ত্রুটির রিটার্ন।

অ্যাপ্লিকেশনটি ডিজিটাল সম্পদ লিঙ্কের বৈধতা পাস করেছে তা নিশ্চিত করার পাশাপাশি, অবশিষ্ট পরিস্থিতিগুলি একজন পরিষেবা কর্মী দ্বারা পরিচালনা করা যেতে পারে:

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    try {
      return await fetchAndHandleError(event.request);
    } catch {
      // Failed to load from the network. User is offline or the response
      // has a status code that triggers the Quality Criteria.
      // Try loading from cache.
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) {
        return cachedResponse;
      }
      // Response was not found on the cache. Send the error / offline
      // page. OFFLINE_PAGE should be pre-cached when the service worker
      // is activated.
      return await caches.match(OFFLINE_PAGE);
    }
  })());
});

async function fetchAndHandleError(request) {
  const cache = await caches.open(RUNTIME_CACHE);
  const response = await fetch(request);

  // Throw an error if the response returns one of the status
  // that trigger the Quality Criteria.
  if (response.status === 404 ||
      response.status >= 500 && response.status < 600) {
    throw new Error(`Server responded with status: ${response.status}`);
  }

  // Cache the response if the request is successful.
  cache.put(request, response.clone());
  return response;
}

ওয়ার্কবক্স সর্বোত্তম অনুশীলনে বেক করে এবং পরিষেবা কর্মীদের ব্যবহার করার সময় বয়লারপ্লেট সরিয়ে দেয়। বিকল্পভাবে, সেই পরিস্থিতিগুলি পরিচালনা করতে একটি ওয়ার্কবক্স প্লাগইন ব্যবহার করার কথা বিবেচনা করুন:

export class FallbackOnErrorPlugin {
  constructor(offlineFallbackUrl, notFoundFallbackUrl, serverErrorFallbackUrl) {
    this.notFoundFallbackUrl = notFoundFallbackUrl;
    this.offlineFallbackUrl = offlineFallbackUrl;
    this.serverErrorFallbackUrl = serverErrorFallbackUrl;
  }

  checkTrustedWebActivityCrash(response) {
    if (response.status === 404 || response.status >= 500 && response.status <= 600) {
      const type = response.status === 404 ? 'E_NOT_FOUND' : 'E_SERVER_ERROR';
      const error = new Error(`Invalid response status (${response.status})`);
      error.type = type;
      throw error;
    }
  }

  // This is called whenever there's a network response,
  // but we want special behavior for 404 and 5**.
  fetchDidSucceed({response}) {
    // Cause a crash if this is a Trusted Web Activity crash.
    this.checkTrustedWebActivityCrash(response);

    // If it's a good response, it can be used as-is.
    return response;
  }

  // This callback is new in Workbox v6, and is triggered whenever
  // an error (including a NetworkError) is thrown when a handler runs.
  handlerDidError(details) {
    let fallbackURL;
    switch (details.error.details.error.type) {
      case 'E_NOT_FOUND': fallbackURL = this.notFoundFallbackUrl; break;
      case 'E_SERVER_ERROR': fallbackURL = this.serverErrorFallbackUrl; break;
      default: fallbackURL = this.offlineFallbackUrl;
    }

    return caches.match(fallbackURL, {
      // Use ignoreSearch as a shortcut to work with precached URLs
      // that have _WB_REVISION parameters.
      ignoreSearch: true,
    });
  }
}