У овом чланку видимо како да конвертујете веб апликацију или веб локацију у ПВА помоћу Пусх обавештења користећи Фиребасе Цлоуд Мессагинг.
У савременом свету, већина веб апликација се претвара у ПВА (прогресивну веб апликацију) јер пружа функције попут подршке ван мреже, пусх обавештења, позадинске синхронизације. ПВА функције чине нашу веб апликацију више попут матичне апликације и пружају богато корисничко искуство.
На пример, велике компаније као што су Твиттер и Амазон су претвориле своју веб апликацију у ПВА ради већег ангажовања корисника.
Преглед садржаја
Шта је ПВА?
ПВА = (веб апликација) + (неке изворне функције апликације)
ПВА је ваша иста веб апликација (ХТМЛ+ЦСС+ЈС). Ради исто као и ваша веб апликација на свим прегледачима као и раније. Али може имати изворне функције када се ваша веб локација учита у модерном претраживачу. То чини вашу веб апликацију моћнијом него раније, а такође је чини скалабилнијом јер можемо да унапред преузмемо и кеширамо средства на фронтенду, што смањује захтеве за ваш бацкенд сервер.
По чему се ПВА разликује од веб апликације
- Може се инсталирати: Ваша веб апликација се може инсталирати као матична апликација
- Прогресивна: ради исто као и ваша веб апликација, али са неким изворним функцијама
- Искуство са изворном апликацијом: Корисник може да користи и да се креће по веб апликацији као изворна, једном инсталирана.
- Лако доступан: За разлику од наше веб апликације, нема потребе да наши корисници уносе веб адресе сваки пут када посете. Једном инсталиран, може се отворити једним додиром.
- Кеширање апликације: Пре ПВА, једини механизам за кеширање који је имплементирала наша веб апликација је коришћење ХТТП кеш меморије која је доступна само прегледачу. Али са ПВА можемо кеширати ствари користећи сам код на страни клијента који није доступан у веб апликацији.
- Објављивање (Апп/Плаи) продавнице: ПВА се може објавити у Гоогле Плаи продавници и иОС Апп Сторе-у.
Конвертовање ваше апликације у ПВА само ће је учинити моћнијом.
Зашто би бизнис требало да узме у обзир ПВА
Док већина наших клијената долази до нас и тражи да прво развијемо решење за веб апликацију, а затим траже Андроид и иОС апликације. Све што ћемо урадити је да изградимо исту функционалност у веб апликацији за Андроид/ИОС апликацију од стране засебног тима, што захтева више трошкова развоја и више времена за пласирање на тржиште.
Али неки клијенти имају ограничен буџет или неки клијенти могу мислити да је време за излазак на тржиште важније за њихов производ.
Већину захтева клијената могу задовољити саме ПВА карактеристике. За њих предлажемо само ПВА и дајемо им идеју да конвертују свој ПВА у Андроид апликацију користећи ТВА ако желе да се примене у Плаисторе-у.
Ако су вашем захтеву заиста потребне изворне карактеристике апликације које ПВА не може задовољити. Клијенти могу да оду и развију обе апликације како желе. Али чак и у том сценарију. Они могу да примене ПВА у продавници за репродукцију док се развој Андроида не заврши.
Пример: Титан Еиеплус
У почетку су развили ПВА апликацију и применили је у Плаи продавници користећи ТВА (поуздане веб активности). Када су завршили развој Андроид апликације. Они су своју праву Андроид апликацију поставили у продавницу за игру. Остварили су и време до пуштања на тржиште користећи ПВА и цену развоја.
ПВА карактеристике
ПВА даје нашим веб апликацијама изворне функције сличне апликацијама.
Главне карактеристике су:
- Може се инсталирати: Веб апликација инсталирана као изворна апликација.
- Кеширање: Кеширање апликација је могуће, што нашој апликацији даје подршку ван мреже.
- Пусх обавештење: Пусх обавештење се може послати са нашег сервера да би се наши корисници укључили на нашу веб локацију.
- Геофенцинг: Апликација може бити обавештена догађајем кад год се локација уређаја промени.
- Захтев за плаћање: Омогућите плаћање у својој апликацији са одличним корисничким искуством као што је изворна апликација.
И још много функција које долазе у будућности.
Остале карактеристике су:
- Пречице: Брзо доступне УРЛ адресе додате у датотеку манифеста.
- АПИ за веб дељење: Нека ваша апликација прима дељене податке од других апликација.
- АПИ за значке: За приказ броја обавештења у инсталираном ПВА.
- АПИ периодичне позадинске синхронизације: чува податке корисника док се не повежу на мрежу.
- Бирач контаката: Користи се за бирање контаката са мобилног телефона корисника.
- Бирач датотека: Користи се за приступ датотеци на локалном систему/мобилном уређају
Предност ПВА у односу на изворну апликацију
Изворна апликација ради боље од ПВА и има више функција од ПВА. Али ипак, има неке предности у односу на матичну апликацију.
- ПВА ради на више платформи као што су Андроид, ИОС, Десктоп.
- То смањује трошкове развоја.
- Једноставна примена функција у поређењу са матичном апликацијом.
- Лако се може открити јер је ПВА (веб локација) прилагођена СЕО-у
- Безбедан јер ради само на ХТТПС-у
Недостаци ПВА у односу на изворну апликацију
- Доступне су ограничене функционалности у поређењу са матичном апликацијом.
- Није гарантовано да ће ПВА функције подржавати све уређаје.
- Брендирање ПВА је ниско јер није доступно у продавници апликација или Плаи продавници.
Можете да примените свој ПВА као Андроид апликацију у продавници за репродукцију користећи андроид Поуздане веб активности (ТВА). То ће помоћи вашем брендирању.
Ствари потребне за конвертовање веб апликације у ПВА
За претварање било које веб апликације или веб локације у ПВА.
- Сервице-Воркер: језгро било које ПВА апликације за кеширање, пусх обавештења, прокси за наше захтеве.
- Манифест датотека: садржи детаље о вашој веб апликацији. Некада је преузимао нашу апликацију као изворну апликацију на почетном екрану.
- Логотип апликације: Слика високог квалитета 512 к 512 пиксела за икону ваше апликације. Лого апликације потребан за ПВА на почетном екрану, уводном екрану итд. Тако да морамо да креирамо скуп слика у односу 1:1 за нашу АПП користећи било који алат.
- Прилагодљив дизајн: Веб апликација треба да реагује на рад на различитим величинама екрана.
Шта је сервисер:
Сервисни радник (скрипта на страни клијента) је прокси између ваше веб апликације и спољашње стране, испоручује пусх обавештења за нашу веб апликацију и подржава кеширање.
Сервице Воркер ради независно од главног јавасцрипт-а. Дакле, нема приступ ДОМ АПИ-ју. Може само приступити ИндекедДБ АПИ, Дохвати АПИ, АПИ за складиштење кеша. Али може да комуницира са главном нити поруком.
Услуга коју пружа сервисер:
- Пресретање ХТТП захтева са вашег изворног домена.
- Примите Пусх обавештење са свог сервера.
- Оффлине доступност наше апликације
Сервисни радник контролише вашу апликацију и може да манипулише вашим захтевима, али она ради независно. Дакле, из тог разлога, изворни домен мора бити омогућен са ХТТПС-ом да би се избегао напад човека у средини.
Шта је датотека манифеста
Датотека манифеста (манифест.јсон) садржи детаље о нашој ПВА апликацији које треба да каже прегледачу.
- назив: Назив апликације
- схорт_наме: Кратко име за нашу апликацију. Ако је предвиђено
- и са именом својства и са кратким_име, претраживач ће узети схорт_наме.
- опис: Опис за опис наше апликације.
- старт_урл: Да бисте одредили почетну страницу апликације када је наш ПВА покренут.
- иконе: Скуп слика за ПВА за почетни екран, итд.
- бацкгроунд_цолор: Да бисте подесили боју позадине почетног екрана у нашој ПВА апликацији.
- дисплаи: Да прилагодите корисничко сучеље прегледача да се приказује у нашој ПВА апликацији.
- тхеме_цолор: Боја теме ПВА апликације.
- опсег: УРЛ обим наше апликације који треба размотрити за ПВА. Подразумевано је локација датотеке манифеста која се налази.
- пречице: Брзе везе за нашу ПВА апликацију.
Претворите веб апликацију у ПВА
У сврху демонстрације, направио сам вдзвдз структуру директоријума веб локације са статичким датотекама.
- индек.хтмл – почетна страница
- чланци/
- индек.хтмл – страница са чланцима
- аутори/
- индек.хтмл – страница аутора
- алати/
- индек.хтмл – страница са алаткама
- бави/
- индек.хтмл – страница са понудама
Ако већ имате било коју веб локацију или веб апликацију, покушајте да је конвертујете у ПВА пратећи кораке у наставку.
Направите потребне слике за ПВА
Прво, узмите лого апликације и исеците га у размери 1:1 у 5 различитих величина. Користио сам хттпс://тоолс.цравлинк.цом/тоолс/пва-ицон-генератор/ да брзо добијете различите величине слика. Тако да и ви можете да га користите.
Направите датотеку манифеста
Друго, направите датотеку манифест.јсон за своју веб апликацију са детаљима о апликацији. За демо, направио сам датотеку манифеста за веб локацију вдзвдз.
{
"name": "techblog.co.rs",
"short_name": "techblog.co.rs",
"description": "techblog.co.rs produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people grow.",
"start_url": "/",
"icons": [{
"src": "assets/icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "assets/icon/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "assets/icon/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "assets/icon/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
}, {
"src": "assets/icon/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#EDF2F4",
"display": "standalone",
"theme_color": "#B20422",
"scope": "/",
"shortcuts": [{
"name": "Articles",
"short_name": "Articles",
"description": "1595 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
"url": "https://geekflare.com/articles",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Authors",
"short_name": "Authors",
"description": "techblog.co.rs - Authors",
"url": "/authors",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Tools",
"short_name": "Tools",
"description": "techblog.co.rs - Tools",
"url": "https://techblog.co.rs.com/tools",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Deals",
"short_name": "Deals",
"description": "techblog.co.rs - Deals",
"url": "/deals",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
}
]
}
Регистрација Сервисни радник
креирајте датотеку скрипте регистер-сервице-воркер.јс и сервице-воркер.јс у основној фасцикли.
Прва, регистер-сервице-воркер.јс је јавасцрипт датотека која ће се покренути на главној нити која може приступити ДОМ АПИ-ју. Али сервице-воркер.јс је сервисна скрипта која се покреће независно од главне нити и њен животни век је такође кратак. Покреће се кад год догађаји позову сервисне раднике и ради док не заврши процес.
Проверавањем јавасцрипт датотеке главне нити можете проверити да ли је сервисер регистрован у њој. ако није, можете регистровати скрипту сервисера (сервице-воркер.јс).
налепите доњи исечак у регистер-сервице-воркер.јс:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
Налепите доњи исечак у сервице-воркер.јс
self.addEventListener('install', (event) => { // event when service worker install
console.log( 'install', event);
self.skipWaiting();
});
self.addEventListener('activate', (event) => { // event when service worker activated
console.log('activate', event);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) { // HTTP request interceptor
event.respondWith(fetch(event.request)); // send all http request without any cache logic
/*event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event. request);
})
);*/ // cache new request. if already in cache serves with the cache.
});
Нисмо се концентрисали на то како да омогућимо кеш за подршку ван мреже. Разговарамо само о томе како да конвертујете веб апликације у ПВА.
Додајте датотеку манифеста и скрипту у ознаку алл хеад ваше ХТМЛ странице.
<link rel="manifest" href="https://techblog.co.rs.com/manifest.json"> <script src="/register-service-worker.js"></script>
Освежите страницу након што сте додали. Сада можете да инсталирате своју апликацију као доле на мобилни Цхроме.
На почетном екрану апликација се додаје.
Ако користите ВордПресс. Покушајте да користите постојећи ПВА конвертер додатак. За вуеЈС или реацтЈС можете пратити горњи метод или користити постојеће ПВА нпм модуле да бисте убрзали свој развој. Пошто су ПВА нпм модули већ омогућени са кеширањем ван мреже итд.
Омогући Пусх обавештење
Веб пусх обавештења се шаљу претраживачу како би наши корисници чешће били ангажовани/интераговали са нашом апликацијом. Можемо га омогућити коришћењем
- АПИ за обавештења: Користи се за конфигурисање начина на који наше пусх обавештење треба да се приказује кориснику.
- Пусх АПИ: Користи се за примање порука са обавештењима које се шаљу са нашег сервера у претраживач.
Први корак да омогућите пусх обавештење у нашој апликацији је да проверите АПИ за обавештења и добијете дозволу од корисника да прикаже обавештење. За то копирајте и налепите исечак испод у свој регистер-сервице-воркер.јс.
if ('Notification' in window && Notification.permission != 'granted') {
console.log('Ask user permission')
Notification.requestPermission(status => {
console.log('Status:'+status)
displayNotification('Notification Enabled');
});
}
const displayNotification = notificationTitle => {
console.log('display notification')
if (Notification.permission == 'granted') {
navigator.serviceWorker.getRegistration().then(reg => {
console.log(reg)
const options = {
body: 'Thanks for allowing push notification !',
icon: '/assets/icons/icon-512x512.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 0
}
};
reg.showNotification(notificationTitle, options);
});
}
};
Ако је све прошло како треба. Добићете обавештење из апликације.
„Обавештење“ у прозору ће нам рећи да је АПИ за обавештења подржан у том прегледачу. Нотифицатион.пермиссион ће рећи да је кориснику дозвољено да прикаже обавештење. Ако је корисник дозволио нашу апликацију, вредност ће бити „додељена“. ако је корисник одбио вредност ће бити ‘блокирана’.
Омогућите Фиребасе Цлоуд Мессагинг и Креирајте претплату
Сада почиње прави део. За слање обавештења са вашег сервера кориснику потребна нам је јединствена крајња тачка/претплата за сваког корисника. За то ћемо користити Фиребасе цлоуд поруке.
Као први корак, креирајте Фиребасе налог тако што ћете посетити ову везу хттпс://фиребасе.гоогле.цом/ и притисните за почетак.
Затим идите на подешавања пројекта и кликните на размену порука у облаку и генеришите кључеве.
Из горњих корака, имате 3 кључа.
- пројекат сервер-кључ
- Приватни кључ веб пусх сертификата
- Веб пусх сертификати са јавним кључем
Сада налепите доњи исечак у регистер-сервице-воркер.јс:
const updateSubscriptionOnYourServer = subscription => {
console.log('Write your ajax code here to save the user subscription in your DB', subscription);
// write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
};
const subscribeUser = async () => {
const swRegistration = await navigator.serviceWorker.getRegistration();
const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey
})
.then((subscription) => {
console.log('User is subscribed newly:', subscription);
updateSubscriptionOnServer(subscription);
})
.catch((err) => {
if (Notification.permission === 'denied') {
console.warn('Permission for notifications was denied')
} else {
console.error('Failed to subscribe the user: ', err)
}
});
};
const urlB64ToUint8Array = (base64String) => {
const padding = '='.repeat((4 - base64String.length % 4) % 4)
const base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/')
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
};
const checkSubscription = async () => {
const swRegistration = await navigator.serviceWorker.getRegistration();
swRegistration.pushManager.getSubscription()
.then(subscription => {
if (!!subscription) {
console.log('User IS Already subscribed.');
updateSubscriptionOnYourServer(subscription);
} else {
console.log('User is NOT subscribed. Subscribe user newly');
subscribeUser();
}
});
};
checkSubscription();
Налепите доњи исечак у сервице-воркер.јс.
self.addEventListener('push', (event) => {
const json = JSON.parse(event.data.text())
console.log('Push Data', event.data.text())
self.registration.showNotification(json.header, json.options)
});
Сада је све постављено у предњем делу. Коришћењем претплате можете слати пусх обавештења свом кориснику кад год желите све док му не буду одбијене пусх услуге.
Гурните из позадинског дела ноде.јс
Можете користити веб-пусх нпм модул да би то било лакше.
Пример исечка за слање пусх обавештења са сервера нодеЈС.
const webPush = require('web-push');
// pushSubscription is nothing but subscription that you sent from your front-end to save it in DB
const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
//your web certificates public-key
const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
//your web certificates private-key
const vapidPrivateKey = 'web-certificate private key';
var payload = JSON.stringify({
"options": {
"body": "PWA push notification testing fom backend",
"badge": "/assets/icon/icon-152x152.png",
"icon": "/assets/icon/icon-152x152.png",
"vibrate": [100, 50, 100],
"data": {
"id": "458",
},
"actions": [{
"action": "view",
"title": "View"
}, {
"action": "close",
"title": "Close"
}]
},
"header": "Notification from techblog.co.rs-PWA Demo"
});
var options = {
vapidDetails: {
subject: 'mailto:[email protected]',
publicKey: vapidPublicKey,
privateKey: vapidPrivateKey
},
TTL: 60
};
webPush.sendNotification(
pushSubscription,
payload,
options
).then(data => {
return res.json({status : true, message : 'Notification sent'});
}).catch(err => {
return res.json({status : false, message : err });
});
Горњи код ће послати пусх обавештење претплати. Пусх догађај у сервисеру ће се покренути.
Пусх из ПХП Бацкенд-а
За ПХП позадину можете користити веб-пусх-пхп композитор пакет. Проверите пример кода за слање пусх обавештења у наставку.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
require __DIR__.'/../vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;
// subscription stored in DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = array (
'options' => array (
'body' => 'PWA push notification testing fom backend',
'badge' => '/assets/icon/icon-152x152.png',
'icon' => '/assets/icon/icon-152x152.png',
'vibrate' =>
array (
0 => 100,
1 => 50,
2 => 100,
),
'data' =>
array (
'id' => '458',
),
'actions' =>
array (
0 =>
array (
'action' => 'view',
'title' => 'View',
),
1 =>
array (
'action' => 'close',
'title' => 'Close',
),
),
),
'header' => 'Notification from techblog.co.rs-PWA Demo',
);
// auth
$auth = [
'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
'VAPID' => [
'subject' => 'mailto:[email protected]', // can be a mailto: or your website address
'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
],
];
$webPush = new WebPush($auth);
$subsrciptionData = json_decode($subsrciptionJson,true);
// webpush 6.0
$webPush->sendOneNotification(
Subscription::create($subsrciptionData),
json_encode($payloadData) // optional (defaults null)
);
Закључак
Надам се да вам ово даје идеју о претварању веб апликација у ПВА. Можете проверити изворни код овог чланка овде и демо овде. Тестирао сам пусх обавештење тако што сам га послао са позадине уз помоћ примера кода.