ভ্যু সিএলআই 3 দিয়ে পিডব্লিউএ তৈরি করা (পরিষেবা কর্মীরা / হোম স্ক্রিনে যুক্ত করুন / বিজ্ঞপ্তি চাপুন)

প্রোটোকল পরিবর্তন করুন - ২০১–-০–-২০১ UP আপডেট করুন: ফায়ারবেস স্ক্রিনশটটি ইংরেজী সংস্করণ দ্বারা প্রতিস্থাপন করা হয়েছে - আপডেট করুন 2019–05–16: 7. ক্রুয়াল সংশোধন করা হয়েছে - আপডেট 2019–06–11: ডেস্কটপে স্টার্ট স্ক্রিনে যুক্ত করার পদ্ধতি ক্রোম পরিবর্তন হয়েছে

পিআর - নিয়োগের ডিজাইনার সহ-প্রতিষ্ঠাতা

এই বছরের শরত্কালে আইপ্যাড ওএস প্রকাশের জন্য ঠিক সময়ে, আমি হস্তাক্ষর সহযোগিতার জন্য রিয়েল-টাইম সরঞ্জামটি বিকাশ করছি।

আপনি যদি এই পণ্য এবং আপনার ক্যারিয়ারে আগ্রহী হন তবে এই পোস্টগুলি দেখুন!

পিডাব্লুএ কি?

নিম্নলিখিত ফাংশনগুলি পিডব্লিউএ (প্রগ্রেসিভ ওয়েব অ্যাপ) এর জন্য উপলব্ধ।

• সেবা কর্মী
• হোম পর্দায় যোগ করুন
• ঘোষণা

আপনি যদি ওয়েব অ্যাপ্লিকেশন হিসাবে এটি তৈরি করে থাকেন তবে স্থানীয় অ্যাপ্লিকেশনের অনুরূপ ইউএক্স সরবরাহ করতে আপনি পিডাব্লুএ ব্যবহার করতে পারেন।

আমি Vue.js এর সাহায্যে এই বৈশিষ্ট্যগুলি ব্যবহার করে দেখতে যাচ্ছি

PWA Vue CLI 3 এর সাথে

ডেমো

https://vue-pwa-tutorial.firebaseapp.com

সোর্স কোড

টিউটোরিয়াল

1. ইনস্টল করুন ভ্যু সিএলআই 3

রেফ। ইনস্টলেশন | ভ্যু সিএলআই 3

$ npm ইনস্টল করুন -g @ ভ্যু / ক্লিপ

2. একটি নতুন প্রকল্প তৈরি করুন

v vue-pwa টিউটোরিয়াল তৈরি করুন

3. ম্যানুয়ালি চয়ন করুন

সিএলআই ভিউ ৩.৩.০? দয়া করে একটি প্রিসেট নির্বাচন করুন: স্ট্যান্ডার্ড (ব্যাবেল, এসলিন্ট) man ফাংশনগুলি ম্যানুয়ালি নির্বাচন করুন

4. পিডব্লিউএ চয়ন করুন

টাইপস্ক্রিপ্ট, রাউটার, ইচ্ছামত ভেক্স x

সিএলআই ভিউ ৩.৩.০? দয়া করে একটি প্রিসেট নির্বাচন করুন: আপনি নিজে থেকে ফাংশনগুলি নির্বাচন করেন? আপনার প্রকল্পের জন্য প্রয়োজনীয় বৈশিষ্ট্যগুলি পরীক্ষা করুন: ❯◉ বাবেল ◉ টাইপসক্রিপ্ট ◉ প্রগ্রেসিভ ওয়েব অ্যাপ (পিডাব্লুএ) সমর্থন ◉ রাউটার ue ভিউক্স ◯ সিএসএস প্রিপ্রোসেসরস ◉ লিন্টার / ফর্ম্যাটার ◯ ইউনিট পরীক্ষা ◯ E2E পরীক্ষা

5. তারপরে সেই অনুযায়ী

সিএলআই ভিউ ৩.৩.০? দয়া করে একটি প্রিসেট নির্বাচন করুন: আপনি নিজে থেকে ফাংশনগুলি নির্বাচন করেন? আপনার প্রকল্পের জন্য প্রয়োজনীয় বৈশিষ্ট্যগুলি পরীক্ষা করুন: ব্যাবেল, টিএস, পিডাব্লুএ, রাউটার, ভেক্স, লিন্টার? বর্গ শৈলী উপাদান সিনট্যাক্স ব্যবহার করবেন? হ্যাঁ ? আপনি স্বতঃ-স্বীকৃত পলফিলগুলির জন্য টাইপস্ক্রিপ্ট সহ ব্যাবেল ব্যবহার করেন? হ্যাঁ ? রাউটারের জন্য ইতিহাস মোড ব্যবহার করবেন? (উত্পাদনের ইনডেক্স ফ্যালব্যাকের জন্য সঠিক সার্ভার কনফিগারেশন প্রয়োজন)) হ্যাঁ? একটি লম্বা / ফর্ম্যাটার কনফিগারেশন চয়ন করুন: টিএসলিন্ট? অতিরিক্ত ফ্লফ বৈশিষ্ট্য নির্বাচন করুন: সংরক্ষণের সময় ফ্লাফ? আপনি বাবেল, পোস্টসিএসএস, ইএসলিন্ট ইত্যাদির জন্য কনফিগারেশনটি কোথায় রাখতে চান? ডেডিকেটেড কনফিগারেশন ফাইলগুলিতে? ভবিষ্যতের প্রকল্পগুলির জন্য প্রিসেট হিসাবে সংরক্ষণ করবেন? হ্যাঁ ? প্রিসেট হিসাবে সংরক্ষণ করুন:

6. সূচনা

ভ্যু সিএলআই ভি .3.৩.০ / / ইউজার / জাইএক্স-কুবো / ডাব্লুভিভিআপপ্রজেক্টস / চ্যাটি / ভ্যু-পিএवा-টিউটোরিয়াল-এ একটি প্রকল্প তৈরি করুন। 🗃 গিট সংগ্রহস্থল শুরু হচ্ছে ... C সিএলআই প্লাগইন ইনস্টল করা হচ্ছে। এটি কিছু সময় নিতে পারে ...

7. ওয়েব সার্ভার চালান

$ সিডি ভ্যু-পিওয়া-টিউটোরিয়াল / pm এনপিএম রান সার্ভ

৮. লোকালহোস্টে অ্যাক্সেস

পিডাব্লুএ - পরিষেবা কর্মচারী

আপনি যদি এনপিএম রান সার্ভ দিয়ে শুরু করেন তবে পরিষেবা কর্মীরা নীচের মত কাজ করবে না।

পরিষেবা কর্মীদের আচরণ যাচাই করতে আপনাকে এনপিএম রান বিল্ড দিয়ে তৈরি করতে হবে। আপনি যদি ক্রোমের জন্য ওয়েব সার্ভার ব্যবহার করে ./dist ডিরেক্টরি প্রকাশ করেন তবে আপনি যাচাই করতে পারবেন যে পরিষেবা কর্মীরা নিম্নলিখিত হিসাবে কাজ করছে। (সাধারণত এনপিএম রান সার্ভিফ দিয়ে শুরু করুন আপনি পরিষেবা কর্মীদের ব্যবহার করছেন না))

। npm রান বিল্ড সমাপ্ত বিল্ড সম্পূর্ণ। ডিস্ট ডিরেক্টরিটি এখন মোতায়েনের জন্য প্রস্তুত।

স্থিতিশীল সামগ্রী (* .html, *। CSS, * .js, * .txt) ক্যাশে করা হয়েছে।

যাচাই করা বিকাশকারী সরঞ্জাম> অ্যাপ্লিকেশন> পরিষেবা কর্মী> পুনঃলোডের আপডেট। যখনই ব্রাউজারটি আবার লোড হয় তখন ক্যাশেটি খালি করা হয়। অন্যথায়, ক্যাশে থেকে লক্ষ্য ফাইলটি মুছুন।

পিডব্লিউএ - হোম স্ক্রিনে যুক্ত করুন

ওয়েব অ্যাপ্লিকেশন প্রকাশ

হোম স্ক্রিনে যোগ করুন ডায়ালগ বাক্সটি প্রদর্শনের জন্য একটি জেএসএন ফর্ম্যাট ওয়েব অ্যাপ ম্যানিফেস্ট ফাইলের প্রয়োজন।

আপনি যদি ভ্যু সিএলআইয়ের সাথে পিডব্লিউএ নির্বাচন করেছেন তবে এটি ডিফল্টরূপে তৈরি করা হবে। সুতরাং এটি যেমন ব্যবহার করুন।

./public/manifest.json

{"নাম": "vue-pwa- টিউটোরিয়াল", "শর্ট_নাম": "vue-pwa-টিউটোরিয়াল", "আইকন": [s "src": "./img/icons/android-chrome-192x192.png" , "আকার": "192x192", "প্রকার": "চিত্র / পিএনজি"}, s "এসসিআর": "./img/icons/android-chrome-512x512.png", "আকার": "512x512", " টাইপ করুন ":" চিত্র / পিএনজি "}]," স্টার্ট_আর্ল ":" ./index.html "," প্রদর্শন ":" একক "," ব্যাকগ্রাউন্ড_ রঙ ":" # 000000 "," থিম_ক্লোর ":" # 4DBA87 "}

তাত্ক্ষণিক পারিপার্শ্বিক

আপনি সেল ফোনে এটি যাচাই করতে সক্ষম হবেন না বলে সার্ভারে মোতায়েন করুন।

ফায়ারবেস হোস্টিংয়ের মাধ্যমে একটি বিক্ষোভের পরিবেশ তৈরি করুন

ফায়ারবেস ব্যবহারের কারণ হিসাবে, আমি পরের বার ধাক্কা বিজ্ঞপ্তি চেষ্টা করব। সুতরাং এটি এর জন্য একটি ভিত্তি।

রেফ। ডিপ্লোয়মেন্ট ফায়ারবেস | ভ্যু সিএলআই 3

1. ফায়ারবেসে একটি নতুন প্রকল্প তৈরি করুন

প্রথমে গুগল অ্যাকাউন্ট দিয়ে ফায়ারবেস কনসোলে লগইন করুন এবং একটি নতুন প্রকল্প তৈরি করুন।

2. মোতায়েন

কমান্ড লাইন থেকে স্থাপনা সম্পন্ন হওয়ায় ফায়ারবেস সিএলআই ইনস্টল করুন।

pm npm ইনস্টল -জি ফায়ারবেস-সরঞ্জামগুলি

$ ফায়ারবেস লগইন

প্রকল্পের মাস্টার দ্বারা সূচনা।

$ ফায়ারবেস আরম্ভ করে হোস্টিং? এই ডিরেক্টরিটির জন্য একটি স্ট্যান্ডার্ড ফায়ারবেস প্রকল্প নির্বাচন করুন: (তীরচিহ্নগুলি ব্যবহার করুন [) [একটি প্রমিত প্রকল্প সেট আপ করবেন না] ue ভ্যু-পিওএ-টিউটোরিয়াল (ভ্যু-পাওয়া-টিউটোরিয়াল) [নতুন প্রকল্প তৈরি করুন]? আপনি সর্বজনীন ডিরেক্টরি হিসাবে কী ব্যবহার করতে চান? (পাবলিক) দূরে? একতরফা অ্যাপ্লিকেশন হিসাবে কনফিগার করবেন (/ ইউএনএলডেক্স এইচটিএমএলতে সমস্ত ইউআরএল পুনরায় লিখুন)? (y / n) y? Dist / index.html ফাইলটি ইতিমধ্যে বিদ্যমান। ওভাররাইট? (y / n) y

প্রতিশ্রুতি

$ ফায়ারবেস মোতায়েন - কেবল হোস্টিং

আইকনটি এখন হোম স্ক্রিন এবং নেটিভ অ্যাপ্লিকেশন উভয়ই যুক্ত করা হয়েছে। (অ্যাপস্টোরের ইনস্টলেশন প্রচেষ্টাও হ্রাস করা হয়েছে)

যেহেতু স্থিতিশীল বিষয়বস্তু ক্যাশে করা হয়েছে, এটি দ্রুত কাজ করে। (এপিআইও ক্যাশে করতে সক্ষম বলে মনে হচ্ছে, তবে এবার এটি বাদ দেওয়া হয়েছে)

পিডাব্লুএ - বিজ্ঞপ্তি ধাক্কা

আমি পুশ বিজ্ঞপ্তিগুলির জন্য ফায়ারবেস ক্লাউড মেসেজিং (এফসিএম) ব্যবহার করি।

রেফার্ট। একটি জাভাস্ক্রিপ্ট ফায়ারবেস ক্লাউড মেসেজিং ক্লায়েন্ট অ্যাপ ফায়ারবেস রেফ সেট করুন একটি জাভাস্ক্রিপ্ট ক্লায়েন্টে বার্তাগুলি পান ফায়ারবেস ক্লাউড মেসেজিং - দ্রুত শুরু | গিটহাব

1. এফসিএম ব্যবহার করে ওয়েব শংসাপত্রগুলি কনফিগার করুন

২. ওয়েব অ্যাপ্লিকেশন ম্যানিফেস্টে জিএমসি_সেন্ডার_আইডি যুক্ত করুন

./public/manitest.json

{..., "জিসিএম_সেন্ডার_আইডি": "103953800507"}

৩. ফায়ারবেস এসডিকে ইনস্টল করুন

pm npm ইনস্টল করুন - সেভ ফায়ারবেস

4. ফায়ারবেস কনফিগারেশন পান

5. বিজ্ঞপ্তিগুলির জন্য অনুমতি এবং টোকেনগুলি পুনরুদ্ধারের অনুরোধ করুন

./src/main.ts

"ফায়ারবেস" থেকে ফায়ারবেস হিসাবে আমদানি করুন; var config = {apiKey: "xxxxxxxxxxxxxx", authDomain: "xxx.firebaseapp.com", ডাটাবেস ইউআরএল: "https://xxx.firebaseio.com", প্রজেক্টআইডি: "এক্সএক্সএক্সএক্স", স্টোরেজবকেট: "xxx.appspot.com", ম্যাসেজিংসেন্ডারআইডি: "এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স"}; // 4. ফায়ারবেস কনফিগারেশন firebase.initializeApp (কনফিগারেশন) পান; কনস্ট ম্যাসেজিং = ফায়ারবেস.মেসেজিং (); ম্যাসেজিং.উইজপাব্লিকভিপিডকি ("এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স"); // 1. একটি নতুন কী জুড়ি জেনারেট করুন // বিজ্ঞপ্তিগুলির বার্তার জন্য ম্যাসেজিংয়ের জন্য অনুরোধের অনুরোধ ququarePermission ()। তারপরে (() => {কনসোল.লগ ('বিজ্ঞপ্তির অনুমতি মঞ্জুর' ';); // টোকেন ম্যাসেজিং.জিট টোকেন () পান then তারপর ((টোকেন) => so কনসোল.লগ (টোকেন)})})।)। ((ত্রুটি)) => {কনসোল.লগ ('বিজ্ঞপ্তির অনুমতি পেতে পারে না' ', ত্রুটি);});

F. এফসিএমের জন্য পরিষেবা কর্মী যুক্ত করুন

অনমেসেজ ইভেন্টটি পেতে, আপনার অ্যাপ্লিকেশনটিকে ফায়ারব্যাস-মেসেজিং-sw.js তে ফায়ারবেস বার্তা পরিষেবা পরিষেবা কর্মীকে সংজ্ঞায়িত করতে হবে। বিকল্পভাবে, আপনি ব্যবহার সার্ভিস ওয়ার্কার সহ একটি বিদ্যমান পরিষেবা কর্মচারী নির্দিষ্ট করতে পারেন।

./public/firebase-mssaging-sw.js

// [আরম্ভ করুন_ফায়ারবেস_ইন_এসইউ] // পরিষেবা কর্মচারীকে ফায়ারবেস মেসেজিংয়ের অ্যাক্সেস দিন। // নোট করুন যে আপনি কেবল এখানে ফায়ারবেস মেসেজিং ব্যবহার করতে পারেন, অন্যান্য ফায়ারব্যাস লাইব্রেরি // পরিষেবা কর্মীর জন্য উপলব্ধ নয়। আমদানি স্ক্রিপ্টস ('https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js'); আমদানি স্ক্রিপ্টস ('https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js'); // মেসেজিংসেন্ডারআইডি পাস করে পরিষেবা কর্মীর মধ্যে ফায়ারবেস অ্যাপ্লিকেশন শুরু করুন। firebase.initializeApp (mess 'ম্যাসেজিংসেন্ডারআইডি': 'xxxxxxxxxxx' // 4. ফায়ারবেস কনফিগারেশন পান}); // ফায়ারবেস মেসেজিংয়ের একটি উদাহরণ পান যাতে এটি পটভূমি বার্তাগুলি পরিচালনা করতে পারে। কনস্ট ম্যাসেজিং = ফায়ারবেস.মেসেজিং (); // [সমাপ্তি_ফায়ারবেস_ইন_এসইউ]

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

7. সিআরএল এর মাধ্যমে পরীক্ষার বার্তা পান

$ কার্ল-এক্স পোস্ট-এইচ "অনুমোদন: কী = $ {উপরের সার্ভার কী}" -H "সামগ্রীর ধরণ: অ্যাপ্লিকেশন / জেসন" -d 'to "থেকে": "$ {5 এর টোকেন}", "বিজ্ঞপ্তি": {" শিরোনাম ":" এফসিএম বার্তা "," বডি ":" এটি একটি এফসিএম বার্তা "," আইকন ":" ./img/icons/android-chrome-192x192.png "}} 'https: //fcm.googleapis .কম / এফসিএম / প্রেরণ

সারসংক্ষেপ

পিডাব্লুএ ব্যবহার করে, আপনি অনেকটা নেটিভ অ্যাপ্লিকেশনের মতো, ওয়েব অ্যাপ্লিকেশন সহ ইউএক্স স্থাপন করতে পারেন।

যেহেতু এমন কিছু জিনিস রয়েছে যা আমি এই সময়টি সম্পর্কে কল্পনাও করতে পারি না, সুযোগ পেলেই আবার লিখব।

সেবা কর্মী

• ক্যাশে নিয়ন্ত্রণ
• অফলাইন দিক

ঘোষণা

• টোকেন আপডেট করুন
• ফায়ারবেস ক্লাউড মেসেজিং

অবশেষে

আমি আমার ব্লগে মূল টিউটোরিয়াল পোস্ট করেছি। আপনি যদি এই নিবন্ধটি একটি ভাল জিনিস মনে করেন, দয়া করে প্রতিক্রিয়া। ধন্যবাদ.