এই ধাপে, আপনি শিখবেন:
- কিভাবে একটি নিরাপদ এবং স্যান্ডবক্সড উপায়ে আপনার অ্যাপের ভিতরে বাহ্যিক ওয়েব সামগ্রী দেখাবেন।
এই ধাপটি সম্পূর্ণ করার আনুমানিক সময়: 10 মিনিট।
এই ধাপে আপনি যা সম্পূর্ণ করবেন তার পূর্বরূপ দেখতে, এই পৃষ্ঠার নীচে ঝাঁপ দাও ↓ ।
ওয়েবভিউ ট্যাগ সম্পর্কে জানুন
কিছু অ্যাপ্লিকেশনকে সরাসরি ব্যবহারকারীর কাছে বহিরাগত ওয়েব সামগ্রী উপস্থাপন করতে হবে তবে সেগুলিকে অ্যাপ্লিকেশন অভিজ্ঞতার মধ্যে রাখতে হবে। উদাহরণ স্বরূপ, একজন নিউজ এগ্রিগেটর হয়তো মূল সাইটের সমস্ত ফরম্যাটিং, ছবি এবং আচরণ সহ বাহ্যিক সাইট থেকে খবর এম্বেড করতে চাইতে পারে। এই এবং অন্যান্য ব্যবহারের জন্য, Chrome Apps-এর একটি কাস্টম HTML ট্যাগ আছে যাকে বলা হয় ওয়েবভিউ ।
ওয়েবভিউ ট্যাগ প্রয়োগ করুন
টোডো আইটেম পাঠ্যে ইউআরএল অনুসন্ধান করতে এবং একটি হাইপারলিঙ্ক তৈরি করতে Todo অ্যাপটি আপডেট করুন। লিঙ্কটিতে ক্লিক করা হলে, বিষয়বস্তু উপস্থাপন করে একটি ওয়েবভিউ সহ একটি নতুন ক্রোম অ্যাপ উইন্ডো (একটি ব্রাউজার ট্যাব নয়) খোলে।
অনুমতি আপডেট করুন
manifest.json- এ, webview অনুমতির অনুরোধ করুন:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
একটি ওয়েবভিউ এমবেডার পৃষ্ঠা তৈরি করুন
আপনার প্রোজেক্ট ফোল্ডারের রুটে একটি নতুন ফাইল তৈরি করুন এবং সেটির নাম দিন webview.html । এই ফাইলটি একটি <webview> ট্যাগ সহ একটি মৌলিক ওয়েবপৃষ্ঠা:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
করণীয় আইটেমগুলিতে URL-এর জন্য পার্স করুন
controller.js এর শেষে, _parseForURLs() নামে একটি নতুন পদ্ধতি যোগ করুন :
Controller.prototype._getCurrentPage = function () {
return document.location.hash.split('/')[1];
};
Controller.prototype._parseForURLs = function (text) {
var re = /(https?:\/\/[^\s"<>,]+)/g;
return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
};
// Export to window
window.app.Controller = Controller;
})(window);
যখনই "http://" বা "https://" দিয়ে শুরু হওয়া একটি স্ট্রিং পাওয়া যায়, তখন URL এর চারপাশে মোড়ানোর জন্য একটি HTML অ্যাঙ্কর ট্যাগ তৈরি করা হয়।
করণীয় তালিকায় হাইপারলিঙ্ক রেন্ডার করুন
controller.js- এ showAll() খুঁজুন। পূর্বে যোগ করা _parseForURLs() পদ্ধতি ব্যবহার করে লিঙ্কগুলির জন্য পার্স করতে showAll() আপডেট করুন:
/**
* An event to fire on load. Will get all items and display them in the
* todo-list
*/
Controller.prototype.showAll = function () {
this.model.read(function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
showActive() এবং showCompleted() এর জন্য একই কাজ করুন:
/**
* Renders all active tasks
*/
Controller.prototype.showActive = function () {
this.model.read({ completed: 0 }, function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
/**
* Renders all completed tasks
*/
Controller.prototype.showCompleted = function () {
this.model.read({ completed: 1 }, function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
এবং অবশেষে, editItem() এ _parseForURLs() যোগ করুন :
Controller.prototype.editItem = function (id, label) {
...
var onSaveHandler = function () {
...
// Instead of re-rendering the whole view just update
// this piece of it
label.innerHTML = value;
label.innerHTML = this._parseForURLs(value);
...
}.bind(this);
...
}
এখনও editItem() এ, কোডটি ঠিক করুন যাতে এটি লেবেলের innerHTML innerText ব্যবহার করে:
Controller.prototype.editItem = function (id, label) {
...
// Get the innerHTML of the label instead of requesting the data from the
// Get the innerText of the label instead of requesting the data from the
// ORM. If this were a real DB this would save a lot of time and would avoid
// a spinner gif.
input.value = label.innerHTML;
input.value = label.innerText;
...
}
ওয়েবভিউ ধারণকারী নতুন উইন্ডো খুলুন
controller.js এ একটি _doShowUrl() পদ্ধতি যোগ করুন। এই পদ্ধতিটি উইন্ডোর উৎস হিসাবে webview.html সহ chrome.app.window.create() এর মাধ্যমে একটি নতুন Chrome অ্যাপ উইন্ডো খোলে:
Controller.prototype._parseForURLs = function (text) {
var re = /(https?:\/\/[^\s"<>,]+)/g;
return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
};
Controller.prototype._doShowUrl = function(e) {
// only applies to elements with data-src attributes
if (!e.target.hasAttribute('data-src')) {
return;
}
e.preventDefault();
var url = e.target.getAttribute('data-src');
chrome.app.window.create(
'webview.html',
{hidden: true}, // only show window when webview is configured
function(appWin) {
appWin.contentWindow.addEventListener('DOMContentLoaded',
function(e) {
// when window is loaded, set webview source
var webview = appWin.contentWindow.
document.querySelector('webview');
webview.src = url;
// now we can show it:
appWin.show();
}
);
});
};
// Export to window
window.app.Controller = Controller;
})(window);
chrome.app.window.create() কলব্যাকে, src ট্যাগ অ্যাট্রিবিউটের মাধ্যমে ওয়েবভিউ-এর URL কীভাবে সেট করা হয়েছে তা নোট করুন৷
সবশেষে, যখন কোনো ব্যবহারকারী কোনো লিঙ্কে ক্লিক করে তখন doShowUrl() কল করতে Controller কনস্ট্রাক্টরের ভিতরে একটি ক্লিক ইভেন্ট লিসেনার যোগ করুন:
function Controller(model, view) {
...
this.router = new Router();
this.router.init();
this.$todoList.addEventListener('click', this._doShowUrl);
window.addEventListener('load', function () {
this._updateFilterState();
}.bind(this));
...
}
আপনার সমাপ্ত টোডো অ্যাপ চালু করুন
আপনি ধাপ 4 সম্পন্ন! আপনি যদি আপনার অ্যাপটি পুনরায় লোড করেন এবং http:// বা https:// দিয়ে শুরু করে একটি সম্পূর্ণ URL সহ একটি টোডো আইটেম যোগ করেন, তাহলে আপনাকে এরকম কিছু দেখতে হবে:
আরো তথ্যের জন্য
এই ধাপে প্রবর্তিত কিছু API সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, পড়ুন:
পরবর্তী ধাপে চালিয়ে যেতে প্রস্তুত? ধাপ 5 এ যান - ওয়েব থেকে ছবি যোগ করুন »