İşletim Sistemi Entegrasyonu

Web uygulamalarının erişimi geniştir. Reklamlar birden fazla platformda yayınlanır. Bağlantılar aracılığıyla kolayca paylaşılabilir. Ancak geleneksel olarak işletim sistemiyle entegrasyon eksikliği vardı. Yakın zamana kadar bu uygulamalar yüklenemiyor bile değildi. Neyse ki bu durum değişti ve artık PWA'larımıza kullanışlı özellikler eklemek için bu entegrasyondan yararlanabiliyoruz. Bu seçeneklerden bazılarını inceleyelim.

Dosya sistemiyle çalışma

Dosya kullanan tipik bir kullanıcı iş akışı şöyle görünür:

• Cihazdan bir dosya veya klasör seçip doğrudan açın.
• Bu dosyalarda veya klasörlerde değişiklik yapın ve değişiklikleri doğrudan geri kaydedin.
• Yeni dosya ve klasör oluşturabilirsiniz.

File System Access API'den önce web uygulamaları bunu yapamazdı. Dosyaların açılması için dosya yükleme, değişikliklerin kaydedilmesi için kullanıcıların dosyaları indirmesi gerekiyordu ve web'in kullanıcının dosya sisteminde yeni dosya ve klasör oluşturmak için hiç erişimi yoktu.

Dosya açma

Dosya açmak için window.showOpenFilePicker() yöntemini kullanırız. Bu yöntemin, düğme tıklaması gibi bir kullanıcı hareketi gerektirdiğini unutmayın. Dosya açmayla ilgili kurulumun geri kalanı aşağıda açıklanmıştır:

1. Dosya sistemi erişiminin dosya seçici API'sinden dosya tutamacını alın. Bu sayede dosyayla ilgili temel bilgileri edinebilirsiniz.
2. Herkese açık kullanıcı adının getFile() yöntemini kullanarak, dosyayla ilgili ek salt okunur özellikleri (ad ve son değiştirilme tarihi gibi) içeren File adlı özel bir Blob elde edersiniz. Blob olduğu için içeriğini almak üzere Blob yöntemleri (ör. text()) çağrılabilir.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Değişiklikler kaydediliyor

Bir dosyada yapılan değişiklikleri kaydetmek için kullanıcı hareketi de gerekir. Ardından:

1. FileSystemWritableFileStream oluşturmak için dosya adını kullanın.
2. Akışta değişiklik yapın. Bu işlem, dosyayı yerinde güncellemez. Bunun yerine genellikle geçici bir dosya oluşturulur.
3. Son olarak, değişiklikleri tamamladığınızda yayını kapatırsınız. Bu işlem, değişikliklerin geçici olmaktan kalıcı hale gelmesini sağlar.

Bunu kodda görelim:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Dosya işleme

File System Access API, uygulamanızdan dosya açmanıza olanak tanır. Peki bunun tersi mümkün mü? Kullanıcılar, dosya açmak için varsayılan olarak en sevdikleri uygulamayı ayarlamak ister. File Handling API, yüklü PWAs'ların şunları yapmasına olanak tanıyan deneysel bir API'dir: Web uygulama manifestinizde PWA'nızın desteklediği MIME türünü ve dosya uzantısını belirterek kullanıcının cihazında dosya işleyici olarak kaydolun. Desteklenen uzantılarınız için özel dosya simgeleri belirtebilirsiniz.

Kayıtlı PWA'nız, yüklendikten sonra kullanıcının dosya sisteminde bir seçenek olarak gösterilir. Böylece kullanıcı, dosyayı doğrudan PWA'da açabilir. Aşağıda, metin dosyalarını okuyan bir PWA için manifest kurulum örneği verilmiştir:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

URL işleme

URL işleme özelliği sayesinde PWA'nız, kapsamının bir parçası olan bağlantıları işletim sisteminden yakalayabilir ve varsayılan tarayıcının sekmesi yerine bir PWA penceresinde oluşturabilir. Örneğin, PWA'ya bağlantı veren bir mesaj alırsanız veya PWA'nızdaki bir derin bağlantıyı (belirli bir içeriği işaret eden bir URL) tıklarsanız içerik bağımsız bir pencerede açılır.

Bu davranış, WebAPK kullanıldığında (ör. kullanıcılar Chrome ile bir PWA yüklediğinde) Android'de otomatik olarak kullanılabilir. iOS ve iPadOS'e yüklenen PWA'lardaki URL'leri Safari'den yakalamak mümkün değildir.

Web tarayıcısı topluluğu, masaüstü tarayıcılar için yeni bir özellik oluşturdu. Şu anda deneysel olan bu özellik, yeni bir manifest dosyası üyesi url_handlers ekler. Bu mülk, PWA'nın yakalamak istediği bir kaynak dizisi bekler. PWA'nızın kaynağına otomatik olarak izin verilir ve diğer tüm kaynaklar, web-app-origin-association adlı bir dosya üzerinden bu işlemeyi kabul etmelidir. Örneğin, PWA'nızın manifest'i web.dev'de barındırılıyorsa ve app.web.dev kaynağını eklemek istiyorsanız bu şöyle görünür:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

Bu durumda tarayıcı, PWA kapsam URL'sinden URL işlemeyi kabul ederek app.web.dev/.well-known/web-app-origin-association adresinde bir dosya olup olmadığını kontrol eder. Geliştiricinin bu dosyayı oluşturması gerekir. Aşağıdaki örnekte dosya şu şekilde görünür:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

URL protokolü işleme

URL işleme, standart https protokol URL'leriyle çalışır ancak pwa:// gibi özel URI şemaları da kullanılabilir. Bazı işletim sistemlerinde, yüklü uygulamalar şemalarını kaydederek bu yeteneği kazanır.

PWA'larda bu özellik, yalnızca masaüstü cihazlarda kullanılabilen URL protokolü işleyici API'si kullanılarak etkinleştirilir. PWA'nızı uygulama mağazalarında dağıtarak yalnızca mobil cihazlar için özel protokollere izin verebilirsiniz.

Kaydetmek için registerProtocolHandler() yöntemini veya manifestinizdeki protocol_handlers üyesini, istediğiniz şemayı ve PWA'nızın bağlamında yüklemek istediğiniz URL'yi ekleyerek kullanabilirsiniz. Örneğin:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

from-protocol URL'sini doğru işleyiciye yönlendirebilir ve PWA'nızda value sorgu dizesini alabilirsiniz. %s, işlemi tetikleyen kaçan URL için bir yer tutucusudur. Bu nedenle, <a href="web+pwa://testing"> gibi bir bağlantınız varsa PWA'nız /from-protocol?value=testing'yi açar.

Diğer uygulamaları arama

URI şemalarını kullanarak her platformda kullanıcıların cihazlarına yüklenen diğer uygulamalara (PWA veya başka bir uygulama) bağlanabilirsiniz. Bağlantı oluşturmanız veya navigator.href kullanarak istediğiniz URI şemasını belirtmeniz ve bağımsız değişkenleri URL'den kaçan biçimde iletmeniz yeterlidir.

Telefon aramaları için tel:, e-posta gönderme için mailto: veya kısa mesajlaşma için sms: gibi bilinen standart şemaları kullanabilir ya da diğer uygulamaların URL şemaları hakkında bilgi edinebilirsiniz (ör. bilinen mesajlaşma, haritalar, navigasyon, online toplantılar, sosyal ağlar ve uygulama mağazaları).

Web'de Paylaşım

Web Share API ile PWA'nız, paylaşılan kanal üzerinden cihazdaki diğer yüklü uygulamalara içerik gönderebilir.

API yalnızca Android, iOS, iPadOS, Windows ve ChromeOS gibi share mekanizması olan işletim sistemlerinde kullanılabilir. Şunları içeren bir nesneyi paylaşabilirsiniz:

• Metin (title ve text özellikleri)
• URL (url mülkü)
• Dosyalar (files mülkü).

Mevcut cihazın paylaşım yapıp yapamayacağını kontrol etmek için metin gibi basit verilerde navigator.share() yönteminin, dosya paylaşmak için ise navigator.canShare() yönteminin varlığını kontrol edersiniz.

navigator.share(objectToShare) numarasını arayarak paylaşım işlemini istiyorsunuz. Bu çağrı, undefined ile çözülen veya bir istisnayla reddeden bir Promise döndürür.

Web Paylaşımı Hedefi

Web Paylaşımı Hedef API'si, PWA'nız PWA olsun veya olmasın, cihazdaki başka bir uygulamadan gelen bir paylaşım işleminin hedefi olmasını sağlar. PWA'nız başka bir uygulama tarafından paylaşılan verileri alıyor.

Bu özellik şu anda Android'de WebAPK ve ChromeOS ile kullanılabilir ve yalnızca kullanıcı PWA'nızı yükledikten sonra çalışır. Tarayıcı, uygulama yüklendiğinde paylaşım hedefini işletim sistemine kaydeder.

Web paylaşımı hedefini, manifest'te Web Paylaşımı Hedefi taslak spesifikasyonunda tanımlanan share_target üyesiyle ayarlarsınız. share_target, bazı özelliklere sahip bir nesneye ayarlanır:

action

Paylaşılan verileri alması beklenen bir PWA penceresine yüklenecek URL.

method

İşlem için

HTTP fiili yöntemi (GET, POST veya PUT gibi) kullanılır.

enctype

(İsteğe bağlı) Parametreler için kodlama türü varsayılan olarak application/x-www-form-urlencoded'tır ancak POST gibi yöntemler için multipart/form-data olarak da ayarlanabilir.

params

Paylaşım verilerini (Web Paylaş'taki title, text, url ve files anahtarlarından) tarayıcı tarafından URL'ye (method: 'GET' üzerinde) veya seçilen kodlamayı kullanarak istek gövdesine iletilecek bağımsız değişkenlerle eşleyen bir nesne.

Örneğin, PWA'nız için paylaşılan verileri (yalnızca başlık ve URL) almak istediğinizi manifestonuza ekleyerek tanımlayabilirsiniz:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Önceki örnekte, sistemdeki bir uygulama başlık içeren bir URL paylaşıyorsa ve kullanıcı iletişim kutusunda PWA'nızı seçerse tarayıcı, kaynağınızın /receive-share/?shared_title=AAA&shared_url=BBB adresine yeni bir gezinme oluşturur. Burada AAA, paylaşılan başlık, BBB ise paylaşılan URL'dir. URL kurucusuyla ayrıştırarak bu verileri window.location dizesinden okumak için JavaScript'i kullanabilirsiniz.

Tarayıcı, işletim sisteminin paylaşım girişini beslemek için manifest dosyanızdaki PWA adını ve simgesini kullanır. Bu amaç için farklı bir grup seçemezsiniz.

Daha ayrıntılı örnekler ve dosya alma hakkında bilgi edinmek için Web Paylaşımı Hedef API'si ile paylaşılan verileri alma başlıklı makaleyi inceleyin.

Kişi Seçici

Contact Picker API ile cihazdan, kullanıcının bir veya daha fazlasını seçebilmesi için kullanıcının tüm kişilerini içeren yerel bir iletişim kutusu oluşturmasını isteyebilirsiniz. Bu durumda, PWA'nız bu kişilerden istediğiniz verileri alabilir.

Kişi Seçici API'si çoğunlukla mobil cihazlarda kullanılabilir ve tüm işlemler uyumlu platformlardaki navigator.contacts arayüzü üzerinden yapılır.

navigator.contacts.getProperties() ile sorgulanacak mevcut mülkleri isteyebilir ve istenen mülklerin listesini içeren tek veya birden fazla iletişim kişisi seçimi isteyebilirsiniz.

Örnek özelliklerden bazıları name, email, address ve tel'dır. Kullanıcıdan bir veya daha fazla kişi seçmesini istediğinizde, karşılığında almak istediğiniz bir mülk dizisi ileterek navigator.contacts.select(properties) işlevini çağırabilirsiniz.

Aşağıdaki örnekte, seçici tarafından alınan kişiler listelenmektedir.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Kaynaklar

• File System Access API: Yerel dosyalara erişimi basitleştirme
• Yüklü web uygulamalarının dosya işleyici olmasına izin verme
• Progresif web uygulamalarında dosyalarla işlem yapma
• Web Paylaşımı API'si ile OS paylaşım arayüzüyle entegrasyon
• Diğer uygulamalarla içerik paylaşma
• Web Share Target API ile paylaşılan verileri alma
• Web için kişi seçici