İşletim Sistemi Entegrasyonu

Web uygulamalarının erişim kapsamı çok geniştir. Birden çok platformda yayınlanırlar. Bunlar bağlantılar aracılığıyla kolayca paylaşılabilir. Ancak geleneksel olarak işletim sistemiyle entegrasyonları yoktu. Kısa bir süre önce bu cihazların yüklenmesi bile mümkün değildi. Neyse ki bu durum değişti ve artık PWA'larımıza yararlı özellikler eklemek için bu entegrasyondan yararlanabiliyoruz. Bu seçeneklerden bazılarını inceleyelim.

Dosya sistemiyle çalışma

Dosyaları kullanan tipik bir kullanıcı iş akışı aşağıdaki gibidir:

• Cihazdan bir dosya veya klasör seçin ve doğrudan açın.
• Söz konusu dosya veya klasörlerde değişiklik yapın ve değişiklikleri doğrudan geri kaydedin.
• Yeni dosya ve klasörler oluşturabilirsiniz.

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

Dosya açma

Bir dosyayı açmak için window.showOpenFilePicker() yöntemini kullanıyoruz. Bu yöntemin, düğme tıklaması gibi bir kullanıcı hareketi gerektirdiğini unutmayın. Bir dosyayı açma kurulumunun geri kalanını burada bulabilirsiniz:

1. Dosya sistemi erişiminin dosya seçici API'sinden dosya tanıtıcısını yakalayın. Bu size dosya hakkında temel bilgiler sağlar.
2. Herkese açık kullanıcı adının getFile() yöntemini kullanarak, dosya hakkında ek salt okunur özellikler (ör. ad ve son değiştirilme tarihi) içeren, File adlı özel bir Blob türü elde edersiniz. Bu bir Blob olduğundan, içeriğini almak için 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ı hareketine de ihtiyacınız vardır. Ardından:

1. FileSystemWritableFileStream oluşturmak için dosya tanıtıcısını kullanın.
2. Akışta değişiklik yapın. Bu işlem dosyayı güncellemez. Bunun yerine genellikle geçici bir dosya oluşturulur.
3. Son olarak, değişiklik yapmayı tamamladığınızda akışı kapatırsınız ve böylece değişiklikler geçici olmaktan kalıcıya taşınır.

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();

Dikkat: Safari, File System Access API'yi herkese açık sistem için değil, kaynak özel korumalı alan olarak uygular. Bu API'yi kullanarak yalnızca söz konusu sanal dosya sisteminde dosya okuyabilir ve yazabilirsiniz.

Dosya işleme

File System Access API, dosyaları uygulamanızın içinden açmanıza olanak tanır. Peki tam tersi ne olacak? Kullanıcılar, dosyaları açmak için favori uygulamalarını varsayılan uygulama olarak ayarlamak ister. Dosya işleme API'si, yüklü PWA'ların (Progresif Web Uygulaması) bir kullanıcının cihazında dosya işleyici olarak kaydedilmesini ve PWA'nızın web uygulaması manifestinizde desteklediği MIME türünü ve dosya uzantısını belirterek kaydolmasını sağlayan deneysel bir API'dir. Desteklenen uzantılarınız için özel dosya simgeleri belirtebilirsiniz.

Yüklü PWA'nız, kaydedildikten sonra kullanıcının dosya sisteminde bir seçenek olarak gösterilir ve kullanıcının dosyayı doğrudan dosyanın içinde açmasına olanak tanır. Aşağıda, PWA'nın metin dosyalarını okuması için manifest ayarlarının bir örneği verilmiştir:

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

URL işleme

URL işleme sayesinde PWA'nız, kapsamın bir parçası olan bağlantıları işletim sisteminden yakalayabilir ve bunları varsayılan tarayıcının sekmesi yerine bir PWA penceresinde oluşturabilir. Örneğin, PWA'nızda PWA'ya bağlantı veren bir mesaj alırsanız veya bir derin bağlantıyı (belirli bir içeriğe yönlendiren 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'la PWA yüklediğinde) Android'de otomatik olarak kullanılabilir. iOS ve iPadOS'te yüklü PWA'larda 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 spesifikasyon oluşturmuştur. Bu spesifikasyon şu anda deneme aşamasındadır; yeni bir manifest dosyası üyesi eklenir: url_handlers. Bu mülk, PWA'nın yakalamak istediği bir kaynak dizisi bekler. PWA'nızın kaynağı otomatik olarak verilir. Diğer kaynakların da web-app-origin-association adlı dosya üzerinden çalıştırılmasını kabul etmesi gerekir. Örneğin, PWA'nızın manifest dosyası web.dev'de barındırılıyorsa ve app.web.dev kaynağını eklemek istiyorsanız süreç şu şekilde olacaktı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 dosyanın olup olmadığını kontrol eder. Bu dosyayı geliştiricinin oluşturması gerekir. Aşağıdaki örnekte dosya şöyle görünür:

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

WebAPK'ları olan Android'de PWA'lar, Android intent filtresiyle manifest kapsamı için otomatik olarak işleyici olarak kaydedilir ve buna daha fazla kaynak veya kapsam eklemek mümkün değildir. iOS ve iPadOS için, yalnızca AppStore'da yayınlanan PWA içeren URL'leri (ör. PWABuilder ile oluşturulanlar) işleyebilirsiniz.

URL protokolü işleme

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

PWA için 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ına dağıtarak yalnızca mobil cihazlar için özel protokollere izin verebilirsiniz.

Dikkat: URL protokol işleyici API'sini kullanan PWA'lar için protokol adı, güvenli listedeki şemalardan biri olmalıdır veya web+ öneki kullanmalıdır. Dolayısıyla, verdiğimiz örnekte PWA'mızı açmak için bir bağlantı web+pwa:// adresine yönlendirmelidir.

Kaydolmak için registerProtocolHandler() yöntemini kullanabilir veya manifest dosyanızdaki protocol_handlers üyesini, istediğiniz şema ve PWA'nızın bağlamında yüklemek istediğiniz URL ile 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 kod dışı bırakılmış URL için bir yer tutucudur. Bu nedenle, <a href="web+pwa://testing"> gibi bir yerde bağlantınız varsa PWA'nız /from-protocol?value=testing uygulamasını açar.

Diğer uygulamaları arama

URI şemalarını, her platformda kullanıcıların cihazlarındaki diğer yüklü uygulamalara (PWA veya değil) bağlanmak için kullanabilirsiniz. Tek yapmanız gereken bir bağlantı oluşturmak veya navigator.href kullanarak, bağımsız değişkenleri URL çıkış karakterli biçimde ileterek istediğiniz URI şemasını işaret etmektir.

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

Not: Mesajlaşma ve sosyal medya uygulamalarıyla iletişim kurmak için gizli URI şemaları kullanmak yerine genel Web Paylaşımı API'sini kullanabilirsiniz

Web Paylaşımı

Tarayıcı Desteği

• 89
• 93
• 12.1

Kaynak

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

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

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

Mevcut cihazın paylaşımda bulunup bulunamayacağını kontrol etmek için metin gibi basit verilerde navigator.canShare() yönteminin mevcut olup olmadığını kontrol ettiğiniz dosyaları paylaşmak için navigator.share() yönteminin olup olmadığını kontrol edersiniz.

navigator.share(objectToShare) yöntemini çağırarak paylaşım işlemini istersiniz. Bu çağrı, undefined ile çözümlenen veya bir istisna dışında reddeden bir Promise döndürür.

Web Paylaşımı Hedefi

Web Paylaşımı Hedefi API'si, PWA'nızın, PWA olup olmadığına bakılmaksızın o cihazdaki başka bir uygulamanın paylaşım işleminin hedefi olmasını sağlar. PWA'nız başka bir uygulama tarafından paylaşılan verileri alır.

Şu anda WebAPK ve ChromeOS yüklü Android'de kullanılabilir ve yalnızca kullanıcı PWA'nızı yükledikten sonra çalışır. Uygulama yüklendiğinde tarayıcı, paylaşım hedefini işletim sistemine kaydeder.

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

action

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

method

İşlem için bir HTTP fiil yöntemi (ör. GET, POST veya PUT) kullanılır.

enctype

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

params

Paylaşım verilerini (Web Paylaşımı'ndaki title, text, url ve files anahtarlarından) tarayıcının seçilen kodlamayı kullanarak URL'de (method: 'GET' üzerinde) veya isteğin gövdesinde ileteceği bağımsız değişkenlere eşleyecek bir nesne.

Not: Ağa gitmemek istiyorsanız POST isteğini sunucu tarafında veya hizmet çalışanınızın içinde ayrıştırabilirsiniz. Daha fazla bilgi için bu örneği inceleyin.

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

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

Önceki örneğe göre, sistemdeki herhangi bir uygulama URL'yi başlıkla paylaşıyorsa ve kullanıcı, iletişim kutusundan PWA'nızı seçerse tarayıcı, kaynağınıza ait /receive-share/?shared_title=AAA&shared_url=BBB bölümünde yeni bir gezinme oluşturur. Burada paylaşılan başlık AAA, paylaşılan URL ise BBB'dir. Bu verileri URL oluşturucusu ile ayrıştırarak 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.

Not: Paylaşılan verileri işleyen sayfanın çevrimdışı erişilebilir olduğundan emin olun. Kullanıcıların şu anda bağlantıları olmadığı için uygulamanızı seçip bir hata bulmalarını istemezsiniz.

Daha ayrıntılı örnekler ve dosyaları nasıl alacağınız için Web Share Target API ile paylaşılan verileri alma bölümüne bakın.

Kişi Seçici

Tarayıcı Desteği

• x
• x
• x
• x

Kaynak

Contact Picker API'yi kullanarak cihazdan, kullanıcının tüm kişilerini içeren yerel bir iletişim kutusu oluşturmasını isteyebilir, böylece kullanıcının bir veya daha fazla kişi seçmesini sağlayabilirsiniz. Böylece PWA'nız bu kişilerden istediğiniz verileri alabilir.

Kişi Seçici API'si çoğunlukla mobil cihazlarda kullanılabilir ve her şey, uyumlu platformlarda navigator.contacts arayüzü üzerinden yapılır.

navigator.contacts.getProperties() ile sorgulanacak mevcut özellikleri isteyebilir ve istenen özelliklerin listesiyle bir veya birden fazla kişi seçimi isteyebilirsiniz.

Bazı örnek özellikler şunlardır: name, email, address ve tel. Kullanıcıdan bir veya daha fazla kişi seçmesini istediğinizde, karşılığında almak istediğiniz bir dizi özelliği ileterek navigator.contacts.select(properties) işlevini çağırabilirsiniz.

Dikkat: API, döndürülen nesnelerin istenen tüm özelliklere sahip olacağını garanti etmez. Bu nedenle, söz konusu nesnelerin varlığını tekrar kontrol etmeniz gerekir.

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şleyiciler olmasına izin ver
• Progresif Web Uygulamalarındaki dosyaları işleme
• Web Paylaşımı API'sini kullanarak OS Paylaşımı Kullanıcı Arayüzü ile entegrasyon
• Diğer uygulamalarla içerik paylaşma
• Web Share Target API ile paylaşılan verileri alma
• Web için kişi seçici