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