पब्लिश करने की तारीख: 2 दिसंबर, 2020
भरोसेमंद वेब गतिविधि की सुविधा लॉन्च होने के बाद, Chrome की टीम ने इसे Bubblewrap के साथ इस्तेमाल करना आसान बना दिया है. हमने इसमें कुछ और सुविधाएं जोड़ी हैं. जैसे, Google Play बिलिंग इंटिग्रेशन. साथ ही, इसे ChromeOS जैसे ज़्यादा प्लैटफ़ॉर्म पर काम करने के लिए उपलब्ध कराया है.
Bubblewrap और भरोसेमंद वेब गतिविधि की सुविधाएं
Bubblewrap की मदद से, ऐसे ऐप्लिकेशन बनाए जा सकते हैं जो भरोसेमंद वेब गतिविधि की मदद से आपके पीडब्ल्यूए लॉन्च करते हैं. इसके लिए, किसी प्लैटफ़ॉर्म के हिसाब से बने टूल की ज़रूरत नहीं होती.
आसान सेटअप फ़्लो
पहले, Bubblewrap का इस्तेमाल करने के लिए, Java Development Kit और Android SDK टूल को मैन्युअल तरीके से सेट अप करना पड़ता था. इन दोनों में गड़बड़ी होने की संभावना होती है. अब टूल पहली बार चलाए जाने पर, बाहरी डिपेंडेंसी अपने-आप डाउनलोड हो जाती हैं.
हालांकि, आपके पास अब भी डिपेंडेंसी के मौजूदा इंस्टॉलेशन का इस्तेमाल करने का विकल्प है.
साथ ही, doctor का नया कमांड, समस्याओं को ढूंढने में मदद करता है और कॉन्फ़िगरेशन में सुधार करने के सुझाव देता है. कॉन्फ़िगरेशन को अब updateConfig कमांड का इस्तेमाल करके, कमांड लाइन से अपडेट किया जा सकता है.
बेहतर विज़र्ड
init का इस्तेमाल करके प्रोजेक्ट बनाते समय, Bubblewrap को Android ऐप्लिकेशन जनरेट करने के लिए जानकारी की ज़रूरत होती है. यह टूल, वेब ऐप्लिकेशन मेनिफ़ेस्ट से वैल्यू निकालता है और जहां भी हो सके, डिफ़ॉल्ट वैल्यू उपलब्ध कराता है.
नया प्रोजेक्ट बनाते समय, उन वैल्यू को बदला जा सकता है. हालांकि, पहले हर फ़ील्ड का मतलब साफ़ तौर पर नहीं बताया गया था. हर इनपुट फ़ील्ड की पुष्टि करने और बेहतर जानकारी देने के साथ, शुरू करने के डायलॉग बॉक्स को फिर से तैयार किया गया.
फ़ुलस्क्रीन और ओरिएंटेशन की सुविधा दिखाना
कुछ मामलों में, हो सकता है कि आप अपने ऐप्लिकेशन को स्क्रीन का ज़्यादा से ज़्यादा इस्तेमाल करने की अनुमति देना चाहें. साथ ही, पीडब्ल्यूए बनाते समय यह प्रोसेस लागू की जा सकती है. इसके लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट से display फ़ील्ड को fullscreen पर सेट करें.
जब Bubblewrap, वेब ऐप्लिकेशन मेनिफ़ेस्ट में फ़ुलस्क्रीन विकल्प का पता लगाता है, तो यह Android ऐप्लिकेशन को फ़ुलस्क्रीन या इमर्सिव मोड में लॉन्च करने के लिए कॉन्फ़िगर करता है.
वेब ऐप्लिकेशन मेनिफ़ेस्ट का orientation फ़ील्ड तय करता है कि ऐप्लिकेशन को पोर्ट्रेट मोड में शुरू किया जाना चाहिए, लैंडस्केप मोड में या डिवाइस के मौजूदा ओरिएंटेशन में. बबल रैप अब वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ील्ड को पढ़ता है. साथ ही, Android ऐप्लिकेशन बनाते समय इसका इस्तेमाल डिफ़ॉल्ट के तौर पर करता है.
bubblewrap init फ़्लो के हिस्से के तौर पर, दोनों कॉन्फ़िगरेशन को पसंद के मुताबिक बनाया जा सकता है.
AppBundles आउटपुट
ऐप्लिकेशन बंडल, उन ऐप्लिकेशन के लिए पब्लिश किया जाने वाला फ़ॉर्मैट है जो APK जनरेट करने और Google Play पर साइन इन करने का ऐक्सेस देते हैं. इससे स्टोर से ऐप्लिकेशन डाउनलोड करते समय, उपयोगकर्ताओं को छोटी फ़ाइलें मिल सकती हैं.
Bubblewrap अब ऐप्लिकेशन को ऐप्लिकेशन बंडल के तौर पर पैकेज करता है. यह पैकेज, app-release-bundle.aab नाम की फ़ाइल में होता है. Play Store पर ऐप्लिकेशन पब्लिश करते समय, आपको इस फ़ॉर्मैट का इस्तेमाल करना चाहिए, क्योंकि 2021 से स्टोर के लिए यह ज़रूरी है.
जियोलोकेशन की जानकारी का ऐक्सेस देना
उपयोगकर्ताओं को उम्मीद होती है कि उनके डिवाइसों पर इंस्टॉल किए गए ऐप्लिकेशन, एक जैसा व्यवहार करें. भले ही, डिवाइस में इस्तेमाल की जा रही टेक्नोलॉजी कुछ भी हो. भरोसेमंद वेब गतिविधि में इस्तेमाल करने पर, जियोलोकेशन की अनुमति अब ऑपरेटिंग सिस्टम को दी जा सकती है. इसकी अनुमति चालू होने पर, उपयोगकर्ताओं को Kotlin या Java से बनाए गए ऐप्लिकेशन जैसे ही डायलॉग दिखते हैं. साथ ही, वे अनुमति को मैनेज करने के लिए एक ही जगह पर कंट्रोल पाते हैं.
इस सुविधा को Bubblewrap की मदद से जोड़ा जा सकता है. यह सुविधा, Android प्रोजेक्ट में अतिरिक्त डिपेंडेंसी जोड़ती है. इसलिए, आपको इसे सिर्फ़ तब चालू करना चाहिए, जब वेब ऐप्लिकेशन जगह की जानकारी की अनुमति का इस्तेमाल कर रहा हो.
ऑप्टिमाइज़ की गई बाइनरी
दुनिया के कुछ इलाकों में, कम स्टोरेज वाले डिवाइस आम तौर पर मिलते हैं. ऐसे डिवाइसों के मालिक अक्सर छोटे ऐप्लिकेशन इस्तेमाल करना पसंद करते हैं. भरोसेमंद वेब गतिविधि का इस्तेमाल करने वाले ऐप्लिकेशन, छोटे बिनेरी बनाते हैं. इससे, उपयोगकर्ताओं को कुछ हद तक सुरक्षा का एहसास होता है.
ज़रूरी Android लाइब्रेरी की सूची को कम करके, Bubblewrap को ऑप्टिमाइज़ किया गया है. इससे जनरेट की गई बाइनरी 800 हज़ार छोटी हो गई हैं. असल में, यह पिछले वर्शन से जनरेट किए गए औसत साइज़ के आधे से कम है. छोटी बाइनरी का फ़ायदा पाने के लिए, आपको बस अपने ऐप्लिकेशन को अपडेट करना होगा. इसके लिए, Bubblewrap के नए वर्शन का इस्तेमाल करें.
किसी मौजूदा ऐप्लिकेशन को अपडेट करने का तरीका
Bubblewrap से जनरेट किया गया ऐप्लिकेशन, एक वेब ऐप्लिकेशन और एक हल्का Android रैपर से बना होता है. यह रैपर, पीडब्ल्यूए को खोलता है. भरोसेमंद वेब गतिविधि में खोला गया पीडब्ल्यूए, किसी भी वेब ऐप्लिकेशन की तरह ही अपडेट साइकल का पालन करता है. हालांकि, नेटिव रैपर को अपडेट किया जा सकता है और उसे अपडेट करना चाहिए.
आपको अपने ऐप्लिकेशन को अपडेट करना चाहिए, ताकि यह पक्का किया जा सके कि वह वॉटरमार्क के नए वर्शन का इस्तेमाल कर रहा है. इसमें, गड़बड़ी को ठीक करने के नए तरीके और सुविधाएं शामिल हैं. बबल रैप का नया वर्शन इंस्टॉल होने पर, update निर्देश किसी मौजूदा प्रोजेक्ट पर रैपर का नया वर्शन लागू करता है:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
इन ऐप्लिकेशन को अपडेट करने की एक और वजह यह है कि वेब मेनिफ़ेस्ट में किए गए बदलाव, ऐप्लिकेशन पर लागू हो जाएं. उसके लिए, merge के नए निर्देश का इस्तेमाल करें:
bubblewrap merge
bubblewrap update
bubblewrap build
क्वालिटी की शर्तों में अपडेट
Chrome 86 ने भरोसेमंद वेब गतिविधि की क्वालिटी से जुड़ी ज़रूरी शर्तों में बदलाव किए हैं. इनके बारे में भरोसेमंद वेब गतिविधि का इस्तेमाल करके, पीडब्ल्यूए की क्वालिटी से जुड़ी शर्तों में होने वाले बदलाव में पूरी जानकारी दी गई है.
कम शब्दों में यह ध्यान रखें कि आपको अपने ऐप्लिकेशन को इन स्थितियों में क्रैश होने से रोकने के लिए, पक्का करना चाहिए:
- ऐप्लिकेशन लॉन्च करते समय डिजिटल ऐसेट लिंक की पुष्टि नहीं की जा सकी
- ऑफ़लाइन नेटवर्क संसाधन के अनुरोध के लिए, एचटीटीपी 200 कोड नहीं दिखाना
- ऐप्लिकेशन में एचटीटीपी 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;
}
वर्कबॉक्स को बनाने में, सबसे सही तरीकों का इस्तेमाल किया जाता है और सर्विस वर्कर का इस्तेमाल करते समय बॉयलरप्लेट को हटा दिया जाता है. इसके अलावा, इन स्थितियों को मैनेज करने के लिए, Workbox प्लग इन का इस्तेमाल करें:
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,
});
}
}