Herkese Merhaba ­čĹő­čĆ╗

Bu yaz─▒m─▒z─▒n konusu Service Worker kavram─▒ ve progressive web uygulamalar─▒. ├ľncelikle service worker kavram─▒n─▒ a├ž─▒klayal─▒m, ne oldu─čuna ve k─▒saca nas─▒l ├žal─▒┼čt─▒─č─▒na de─činelim.

Service Worker, taray─▒c─▒n─▒z─▒n web sitenizden ba─č─▒ms─▒z olarak arka planda ├žal─▒┼čt─▒rabildi─či, ├žal─▒┼čmas─▒ i├žin kullan─▒c─▒ aksiyonuna ihtiya├ž duymadan bir Javascript beti─čidir. Arkaplanda ├žal─▒┼čabiliyor olmas─▒ sayesinde web uygulamalar─▒n─▒za ├že┼čitli ├Âzellikler katar. Bu ├Âzelliklerden biri olan Push NotificationÔÇÖlar─▒ ge├žen haftaki yaz─▒mda anlatm─▒┼čt─▒m. E─čer nas─▒l ├žal─▒┼čt─▒─č─▒ hakk─▒nda fikir sahibi olmak isterseniz ┼ču yaz─▒y─▒ okuyabilirsiniz: Push API Nedir, Nas─▒l ├çal─▒┼č─▒r?

Service Workerlar, ad─▒ndan da anla┼č─▒laca─č─▒ ├╝zere worker olduklar─▒ i├žin direkt olarak DOMÔÇÖa eri┼čme ┼čanslar─▒ yoktur. Arka planda ├žal─▒┼č─▒rlar ve ├Ân planda olup biten ┼čeylere direkt olarak m├╝dahil olamazlar. E─čer m├╝dahale etmeleri gerekirse bu tarz i┼člemleri post message arac─▒l─▒─č─▒yla yaparlar.

Service WorkerÔÇÖ─▒n somut anlamda ne oldu─čunu a├ž─▒klad─▒k. ┼×imdi s─▒ra ├žal─▒┼čma mant─▒─č─▒ ve becerilerine geldi. ├ľncelikle a├ž─▒klamam─▒z gereken mesele bir Service WorkerÔÇÖ─▒n ya┼čam d├Âng├╝s├╝.

Service WorkerÔÇÖ─▒n Ya┼čam D├Âng├╝s├╝

Service Worker─▒n web sitemizden tamamen ayr─▒ ├žal─▒┼čt─▒─č─▒n─▒ s├Âylemi┼čtik. Her ┼čeyden ├Ânce bir service worker tan─▒mlay─▒p bunu taray─▒c─▒m─▒z─▒n tan─▒mas─▒ i├žin bu service worker─▒ kaydetmeniz (register) gerekiyor. Kaydetme i┼člemi s─▒ras─▒nda taray─▒c─▒m─▒z service worker─▒m─▒z─▒ tan─▒yor. Kaydetme i┼člemini yapt─▒ktan sonra kullan─▒c─▒n─▒n sayfan─▒z─▒ bir sonraki ziyaretinde bu service worker aktif hale gelecek.

Kaydetme i┼člemi bittikten sonra taray─▒c─▒m─▒z service worker─▒m─▒z─▒n y├╝kleme (kurulum) a┼čamas─▒na ge├žiyor. Y├╝kleme s─▒ras─▒nda genel olarak birtak─▒m veriler ├Ânbelle─če al─▒n─▒yor. ├ľrne─čin kullan─▒c─▒n─▒z ├ževrimd─▒┼č─▒yken web sitenize ba─članmak isterse ├Âzelle┼čtirilmi┼č bir hata mesaj─▒ g├Âstermek istiyorsunuz. Bu┬ávb. ├Âgeleri ├Ânbelle─če alma i┼či bu a┼čamada yap─▒l─▒yor. E─čer ├Ânbellekleme i┼člemi ba┼čar─▒l─▒ bir ┼čekilde ├žal─▒┼č─▒rsa service worker─▒m─▒z kurulmu┼č oluyor ve bir sonraki ad─▒m─▒m─▒z olan aktifle┼čtirme ad─▒m─▒ ba┼čl─▒yor. E─čer ├Ânbellekleme i┼člemi yap─▒lamazsa daha sonra tekrar deneniyor.

Aktifle┼čtirme s├╝recini en ├žok kullanaca─č─▒m─▒z k─▒s─▒m eski ├Ânbelleklerin g├╝ncellenmesi i┼člemi olacak. Bu da ufak bir ipucu olarak kals─▒n burada.

E─čer aktifle┼čtirme s├╝reci de ba┼čar─▒l─▒ olursa art─▒k service worker─▒m─▒z ├žal─▒┼čmaya haz─▒r demektir. Ancak service worker─▒m─▒z─▒ ilk kaydetti─čimiz zaman direkt olarak ├žal─▒┼čmayacakt─▒r. Aktifle┼čtirme ad─▒m─▒ndan sonra tekrar y├╝klenene kadar ├žal─▒┼čmayacakt─▒r.

A┼ča─č─▒daki g├Ârsel GoogleÔÇÖ─▒n dok├╝manlar─▒ndan al─▒nm─▒┼čt─▒r ve service worker─▒n ├žal─▒┼čma d├Âng├╝s├╝n├╝ anlatmaktad─▒r.

├ľncelikle service worker─▒m─▒z─▒ y├╝kl├╝yoruz. E─čer hata al─▒rsak yeniden deniyoruz, hata almazsak aktifle┼čtirme i┼člemini yap─▒yoruz ve sonras─▒nda service worker─▒ sonland─▒rmak veya postMessage ile veri almak gibi i┼člemleri yap─▒yoruz ve tabiri caizse vitesi bo┼ča al─▒yoruz (Idle olarak adland─▒r─▒lan ad─▒m).

En temel anlamda service worker─▒n ├žal─▒┼čma ┼čekli bu.

├ľyle kafam─▒za g├Âre service worker olu┼čturup kullanam─▒yoruz tabii. Bu olay taray─▒c─▒ taraf─▒yla ilgili bir mesele oldu─ču i├žin her ┼čeyden ├Ânce service worker kullanabilmek i├žin taray─▒c─▒m─▒z─▒n bu deste─či sa─čl─▒yor olmas─▒ laz─▒m.

┼×u adresten taray─▒c─▒ deste─či hakk─▒nda daha detayl─▒ bilgi alabilirsiniz:┬áhttps://caniuse.com/#search=service%20worker

Bunun d─▒┼č─▒nda gerekli olan ┼čeylerden birisi de g├╝venli ba─člant─▒. Service Worker kullan─▒yorsan─▒z mutlaka HTTPS ├╝zerinden yay─▒n yap─▒yor olman─▒z laz─▒m.

Service worker hakk─▒nda genel olarak s├Âylemek istediklerim bu kadard─▒. Kod ├Ârneklerini daha sonra videolu e─čitim olarak vermek isterim. O y├╝zden ┼čimdi de─činmiyor.

Son olarak anlatmak istedi─čim konu Progressive Web Application dedi─čimiz g├╝zel teknoloji. Service workerlar arac─▒l─▒─č─▒yla olduk├ža fantastik i┼čler yapabiliyoruz. Service workerlar bize mobil uygulamalar gibi ├žal─▒┼čan web uygulamalar─▒ yapma imkan─▒ sa─čl─▒yor.

Yapabilece─činiz g├╝zel ┼čeylere bir bakal─▒m:

  • ├çevrimd─▒┼č─▒ ├žal─▒┼čma ├Âzelli─či
  • Push notification / Bildirimler
  • Ana sayfaya ekleme, adres ├žubu─čundan kurtulma vb.
  • Splash Screen

Birazc─▒k a├ž─▒klayal─▒m bu maddeleri.

Service workerlar sayesinde o anki a─č durumu hakk─▒nda bilgi alabilirsiniz. E─čer kullan─▒c─▒n─▒z ├ževrimd─▒┼č─▒ysa bunu service worker sayesinde saptayabilir ve ona ├Âzelle┼čtirilmi┼č bir hata ekran─▒ g├Âsterebilirsiniz. Hata ekran─▒ g├Âstermek yerine ├Ânbelle─če al─▒nm─▒┼č eski i├žeriklerinizi de g├Âsterebilirsiniz. Burada yapacaklar─▒n─▒z tamamen sizin hayal g├╝c├╝n├╝ze kalm─▒┼č.

Service workerlarla birlikte hayat─▒m─▒za giren bir di─čer mesele de web sitelerinin masa├╝st├╝ veya mobil cihazlara bildirim g├Ânderebiliyor olmas─▒. Ayr─▒ca bildirim g├Ândermesi i├žin web uygulamas─▒n─▒n cihazda a├ž─▒k olmas─▒na da gerek yok. Sadece taray─▒c─▒n─▒n a├ž─▒k olmas─▒ yeterli. Arka planda ├žal─▒┼č─▒yor olmas─▒ bize b├Âyle g├╝zel bir ├Âzellik sa─čl─▒yor.

Service workerlar─▒ kullanarak kullan─▒c─▒lar─▒n─▒za, web sitenizi telefonlar─▒n─▒n ana sayfas─▒na t─▒pk─▒ bir uygulamaym─▒┼č gibi eklemesini sa─člayabilirsiniz. Uygulaman─▒z a├ž─▒ld─▒─č─▒nda taray─▒c─▒ adres ├žubu─ču, ayarlar vb. z─▒mb─▒rt─▒lar g├Âr├╝nmeyece─či i├žin web siteniz tam anlam─▒yla bir uygulama gibi g├Âr├╝necektir. Ayr─▒ca e─čer isterseniz uygulaman─▒z i├žin bir splash screen de olu┼čturabilirsiniz.

Bu yaz─▒da anlatacaklar─▒m bu kadard─▒. ┼×uraya da bu yaz─▒y─▒ haz─▒rlarken yararland─▒─č─▒m kaynaklar─▒ ekleyeyim. Ayr─▒ca ┼čunu da belirteyim, bu kaynaklarda ├že┼čitli g├╝zel ├Ârnek kodlar da bulabilirsiniz. Birazc─▒k kurcalay─▒n ­čśŐ

Author

Web geli┼čtirici, Youtuber, Blogger.

Write A Comment