Ebben a cikkben bemutatjuk, hogyan lehet webalkalmazást vagy webhelyet PWA-vá konvertálni push értesítéssel a Firebase Cloud Messaging használatával.
A modern világban a legtöbb webes alkalmazást PWA-vá (progresszív webalkalmazás) alakítják át, mivel olyan funkciókat kínál, mint az offline támogatás, a push értesítések és a háttérben történő szinkronizálás. A PWA funkciói webalkalmazásunkat inkább natív alkalmazáshoz teszik, és gazdag felhasználói élményt nyújtanak.
Például az olyan nagy cégek, mint a Twitter és az Amazon, a webalkalmazásukat PWA-ra alakították át a nagyobb felhasználói elkötelezettség érdekében.
Tartalomjegyzék
Mi az a PWA?
PWA = (Webes alkalmazás) + (néhány natív alkalmazásfunkció)
A PWA ugyanaz a webalkalmazás (HTML+CSS+JS). Ugyanúgy működik, mint a webalkalmazás minden böngészőben, mint korábban. De rendelkezhetnek natív funkciókkal, amikor a webhely betöltődik egy modern böngészőben. Erőteljesebbé teszi a webalkalmazást, mint korábban, és skálázhatóbbá is teszi, mert képesek vagyunk előre lekérni és gyorsítótárazni az eszközöket a frontendben, ez csökkenti a háttérkiszolgálóhoz intézett kéréseket.
Miben különbözik a PWA a Web Apptól
- Telepíthető: Webalkalmazása natív alkalmazásként telepíthető
- Progresszív: Ugyanúgy működik, mint a webalkalmazása, de néhány natív funkcióval
- Natív alkalmazásélmény: A felhasználó telepítése után natív alkalmazásként használhatja és navigálhat a webalkalmazásban.
- Könnyen elérhető: A webalkalmazásunkkal ellentétben felhasználóinknak nincs szükségük arra, hogy minden látogatáskor webcímet írjanak be. Beszerelés után egyetlen érintéssel kinyitható.
- Alkalmazás-gyorsítótár: A PWA előtt az egyetlen gyorsítótárazási mechanizmus, amellyel webalkalmazásunk a HTTP-gyorsítótár használata volt, amely csak a böngésző számára érhető el. De a PWA segítségével gyorsítótárazhatjuk a dolgokat úgy, hogy magát a kliensoldali kódot használjuk, amely nem érhető el egy webalkalmazásban.
- (App/Play) bolti közzététel: A PWA közzétehető a Google Play Áruházban és az IOS App Store-ban.
Ha az alkalmazást PWA-ba konvertálja, az csak még erősebb lesz.
Miért kell az üzleti életnek fontolóra vennie a PWA-t?
Míg a legtöbb ügyfelünk megkeres minket, és először a Web App megoldás fejlesztését kéri, majd Android és iOS alkalmazásokat. Mindössze annyit fogunk tenni, hogy ugyanazt a funkcionalitást a webalkalmazásból Android/IOS-alkalmazásba építjük egy külön csapat által, ami több fejlesztési költséget és több időt vesz igénybe a piacra kerüléshez.
Néhány ügyfél azonban korlátozott költségvetéssel rendelkezik, vagy egyes ügyfelek úgy gondolhatják, hogy a piacra jutás ideje fontosabb a terméke szempontjából.
Az ügyféligények többségét maguk a PWA-funkciók is kielégíthetik. Nekik csak a PWA-t javasoljuk, és ötletet adunk nekik, hogy PWA-jukat TWA használatával Android-alkalmazássá alakítsák át, ha a Playstore-ban szeretnének üzembe helyezni.
Ha a követelménynek valóban olyan natív alkalmazási funkciókra van szüksége, amelyeket a PWA nem tud kielégíteni. Az ügyfelek tetszés szerint fejleszthetik mindkét alkalmazást. De még ebben a forgatókönyvben is. Az Android fejlesztésének befejezéséig telepíthetik a PWA-t a Play Áruházban.
Példa: Titan Eyeplus
Kezdetben kifejlesztettek egy PWA alkalmazást, és a TWA (Trusted Web Activity) segítségével telepítették a Play Áruházban. Miután befejezték az Android alkalmazás fejlesztését. Bevezették valódi Android-alkalmazásukat a Play Áruházban. Mind a piacra jutási időt, mind a fejlesztés költségeit a PWA segítségével érték el.
PWA funkciók
A PWA natív alkalmazásszerű funkciókat biztosít webes alkalmazásainknak.
A főbb jellemzők a következők:
- Telepíthető: natív alkalmazásként telepített webalkalmazás.
- Gyorsítótárazás: Az alkalmazások gyorsítótárazása lehetséges, ami az alkalmazásunk offline támogatását biztosítja.
- Push értesítés: Push értesítés küldhető a szerverünkről, hogy felhasználóinkat bevonják webhelyünkbe.
- Geofencing: Az alkalmazás értesítést kaphat egy eseményről, amikor az eszköz helye megváltozik.
- Fizetési kérelem: Engedélyezze a fizetést az alkalmazásban olyan nagyszerű felhasználói élménnyel, mint egy natív alkalmazás.
És még sok más funkció várható a jövőben.
További jellemzők:
- Parancsikonok: Gyorsan elérhető URL-ek hozzáadva a jegyzékfájlhoz.
- Web Share API: Lehetővé teszi, hogy az alkalmazás megosztott adatokat fogadjon más alkalmazásoktól.
- Badge API: Az értesítések számának megjelenítése a telepített PWA-ban.
- Periodikus háttérszinkronizálási API: addig menti a felhasználó adatait, amíg az nem csatlakozik a hálózathoz.
- Névjegyválasztó: névjegyek kiválasztására szolgál a felhasználó mobiljáról.
- Fájlválasztó: A fájl eléréséhez használható helyi rendszeren/mobilon
A PWA előnye a natív alkalmazással szemben
A natív alkalmazás jobban teljesít, mint a PWA, és több funkcióval rendelkezik, mint a PWA. Ennek ellenére van néhány előnye a natív alkalmazással szemben.
- A PWA több platformon fut, mint például Android, IOS, Desktop.
- Csökkenti a fejlesztési költségeket.
- Könnyű funkciótelepítés a natív alkalmazásokhoz képest.
- Könnyen felfedezhető, mert a PWA(weboldal) SEO-barát
- Biztonságos, mert csak HTTPS-en működik
A PWA hátrányai a natív alkalmazáshoz képest
- A natív alkalmazásokhoz képest korlátozott funkciók állnak rendelkezésre.
- A PWA-funkciók nem garantáltan támogatják az összes eszközt.
- A PWA márkajelzése alacsony, mert nem érhető el az App Store-ban vagy a Play Áruházban.
A PWA-t Android-alkalmazásként telepítheti a Play Áruházban az Android használatával Megbízható internetes tevékenység (TWA). Ez segít a márkaépítésben.
A Web App PWA-vá alakításához szükséges dolgok
Bármely webalkalmazás vagy webhely PWA-ra való konvertálásához.
- Service-Worker: minden PWA-alkalmazás magja a gyorsítótárazáshoz, a push értesítésekhez, a kéréseink proxyjához.
- Manifest fájl: A webalkalmazás részleteit tartalmazza. Korábban úgy töltötte le az alkalmazásunkat, mint egy natív alkalmazást a kezdőképernyőn.
- Alkalmazás logója: Kiváló minőségű kép, 512 x 512 px az alkalmazás ikonjához. Az alkalmazás logója szükséges a PWA-hoz a kezdőképernyőn, a kezdőképernyőn, stb. Tehát bármilyen eszközzel létre kell hoznunk egy 1:1 arányú képeket az APP-unkhoz.
- Reszponzív tervezés: A webalkalmazásnak érzékenynek kell lennie a különböző méretű képernyőkön való működéshez.
Mi az a szervizmunkás:
A szervizmunkás (ügyféloldali szkript) egy proxy a webalkalmazása és a külső oldal között, amely push értesítéseket küld a webalkalmazásunkhoz, és támogatja a gyorsítótárazást.
A Service Worker a fő javascripttől függetlenül fut. Tehát nem fér hozzá a DOM API-hoz. Csak hozzáférhet IndexedDB API, API lekérése, Cache Storage API. De üzenettel kommunikálhat a főszállal.
A szervizmunkás által nyújtott szolgáltatás:
- HTTP-kérések elfogása a származási domainből.
- Push értesítések fogadása a szerverről.
- Alkalmazásunk offline elérhetősége
A szervizmunkás vezérli az alkalmazást, és módosíthatja a kéréseket, de függetlenül fut. Emiatt tehát az eredeti tartományt engedélyezni kell a HTTPS-szel, hogy elkerüljük a köztes támadást.
Mi az a Manifest fájl
A jegyzékfájl (manifest.json) tartalmazza a PWA-alkalmazásunk részleteit, hogy közölje a böngészővel.
- név: A pályázat neve
- short_name: Alkalmazásunk rövid neve. Ha biztosított
- mind a tulajdonságnév, mind a rövid_név esetén a böngésző a rövid_nevet veszi fel.
- leírás: Leírás az alkalmazásunk leírásához.
- start_url: Az alkalmazás kezdőlapjának megadása a PWA elindításakor.
- ikonok: Képkészlet PWA for Home képernyőhöz stb.
- background_color: A kezdőképernyő háttérszínének beállítása a PWA alkalmazásunkban.
- kijelző: A böngésző felhasználói felületének testreszabása, hogy megjelenjen a PWA alkalmazásunkban.
- theme_color: A PWA alkalmazás témaszíne.
- hatókör: alkalmazásunk URL-címe, amelyet figyelembe kell venni a PWA esetében. Alapértelmezés szerint a jegyzékfájl helye.
- parancsikonok: Gyorshivatkozások a PWA alkalmazásunkhoz.
A Web App konvertálása PWA-ba
Demo célból létrehoztam egy etoppc.com webhely mappastruktúrát statikus fájlokkal.
- index.html – kezdőlap
- cikkek/
- index.html – cikkek oldala
- szerzői/
- index.html – szerzők oldala
- eszközök/
- index.html – eszközök oldal
- ajánlatok/
- index.html – ajánlatok oldala
Ha már van webhelye vagy webalkalmazása, próbálja meg konvertálni PWA-ba az alábbi lépések végrehajtásával.
Hozzon létre szükséges képeket a PWA-hoz
Először is, vegye elő az alkalmazás emblémáját, és vágja le 1:1 arányban 5 különböző méretben. használtam https://tools.crawlink.com/tools/pwa-icon-generator/ hogy gyorsan különböző képméreteket kapjon. Tehát te is használhatod.
Hozzon létre egy manifest fájlt
Másodszor, hozzon létre egy manifest.json fájlt a webalkalmazásához az alkalmazás részleteivel. A demóhoz létrehoztam egy manifest fájlt a etoppc.com webhelyhez.
{
"name": "etoppc.com",
"short_name": "etoppc.com",
"description": "etoppc.com 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": "etoppc.com - Authors",
"url": "/authors",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Tools",
"short_name": "Tools",
"description": "etoppc.com - Tools",
"url": "https://etoppc.com.com/tools",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Deals",
"short_name": "Deals",
"description": "etoppc.com - Deals",
"url": "/deals",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
}
]
}
Regisztráljon szervizmunkást
hozzon létre egy szkriptfájlt register-service-worker.js és service-worker.js a gyökérmappában.
Az első, register-service-worker.js a javascript fájl, amely azon a fő szálon fog futni, amely hozzáférhet a DOM API-hoz. De a service-worker.js egy szervizmunkás szkript, amely a fő száltól függetlenül fut, és élettartama is rövid. Minden alkalommal fut, amikor események hívják a szervizmunkásokat, és addig fut, amíg a folyamat be nem fejeződik.
A főszál javascript fájljának ellenőrzésével ellenőrizheti, hogy a service worker regisztrálva van-e benne. ha nem, akkor regisztrálhatja a service worker szkriptet (service-worker.js).
illessze be az alábbi részletet a register-service-worker.js fájlba:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
Illessze be az alábbi kódrészletet a service-worker.js fájlba
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.
});
Nem koncentráltunk arra, hogyan engedélyezzük a gyorsítótárat az offline támogatáshoz. Csak arról beszélünk, hogyan lehet a webalkalmazásokat PWA-vá konvertálni.
Adjon hozzá jegyzékfájlt és szkriptet a HTML-oldal all head címkéjéhez.
<link rel="manifest" href="https://etoppc.com.com/manifest.json"> <script src="/register-service-worker.js"></script>
Hozzáadás után frissítse az oldalt. Most már telepítheti alkalmazását az alábbiak szerint a mobil Chrome-ra.
A kezdőképernyőn megjelenik az alkalmazás.
Ha WordPress-t használsz. Próbálja meg a meglévő PWA konverter bővítményt használni. A vueJS vagy a reactJS esetében követheti a fenti módszert, vagy használhatja a meglévő PWA npm modulokat a fejlesztés felgyorsításához. Mivel a PWA npm modulok már engedélyezve vannak az offline támogatás gyorsítótárazásával stb.
Push Notification engedélyezése
Webes push értesítéseket küldünk a böngészőnek, hogy felhasználóinkat gyakrabban vegyenek részt/interakciót az alkalmazásunkkal. Használatával tudjuk engedélyezni
- Értesítési API: Ezzel konfigurálható, hogy a push értesítésünk hogyan jelenjen meg a felhasználó számára.
- Push API: A szerverünkről a böngészőbe küldött értesítő üzenetek fogadására szolgál.
A push értesítések alkalmazásunkban történő engedélyezésének első lépése az Értesítés API ellenőrzése, és engedélyt kér a felhasználótól az értesítés megjelenítésére. Ehhez másolja ki és illessze be az alábbi kódrészletet a register-service-worker.js fájlba.
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);
});
}
};
Ha minden jól ment. Az alkalmazástól értesítést kap.
Az ablakban megjelenő „Notification” (Értesítés) jelzi, hogy az értesítési API támogatott az adott böngészőben. A Notification.permission közli, hogy a felhasználó jogosult-e az értesítés megjelenítésére. Ha a felhasználó engedélyezte az alkalmazásunkat, az érték „megadva” lesz. ha a felhasználó elutasította, az érték „blokkolva” lesz.
Engedélyezze a Firebase felhőalapú üzenetküldést, és hozzon létre előfizetést
Most kezdődik az igazi rész. Az értesítések küldéséhez a szerverről a felhasználóhoz egyedi végpontra/előfizetésre van szükségünk minden felhasználó számára. Ehhez a Firebase felhőalapú üzenetküldést fogjuk használni.
Első lépésként hozzon létre egy Firebase-fiókot a link meglátogatásával https://firebase.google.com/ és nyomja meg az induláshoz.
Ezután lépjen a projektbeállításokhoz, kattintson a felhőalapú üzenetküldésre, és hozza létre a kulcsokat.
A fenti lépésekből 3 kulcsot kap.
- projekt szerver-kulcs
- Web push tanúsítványok privát kulcs
- Web push tanúsítványok nyilvános kulcsa
Most illessze be az alábbi kódrészletet a register-service-worker.js fájlba:
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();
Illessze be az alábbi kódrészletet a service-worker.js fájlba.
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)
});
Most minden készen áll az előtérben. Az előfizetés használatával push értesítéseket küldhet a felhasználónak, amikor csak akarja, amíg nem tagadják meg a push szolgáltatásokat.
Letöltés a node.js háttérprogramból
Használhatja a web-push npm modult, hogy könnyebb legyen.
Példa kódrészlet push értesítés küldésére a nodeJS szerverről.
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 etoppc.com-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 });
});
A fenti kód push értesítést küld az előfizetésnek. A szervizmunkásban a push esemény aktiválódik.
Push a PHP háttérrendszerből
PHP háttérrendszerhez használhatja a web-push-php zeneszerző csomag. Ellenőrizze az alábbi példakódot a push értesítések küldéséhez.
<?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 etoppc.com-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)
);
Következtetés
Remélem, ez ötletet ad a webalkalmazások PWA-ba konvertálásához. Ellenőrizheti ennek a cikknek a forráskódját itt és demo azt itt. A push értesítést úgy teszteltem, hogy a háttérből küldtem el, példakód segítségével is.