İşletim Sistemi Entegrasyonu

Web uygulamaları geniş bir erişim alanına sahiptir. Birçok platformda çalışırlar. Bağlantı yoluyla kolayca paylaşılabilir. Ancak geleneksel olarak işletim sistemiyle entegrasyonları eksikti. Uzun zaman önce yüklenebilir durumda bile değildi. Neyse ki bu durum değişti. 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 dosyalar veya klasörlerde değişiklik yapın ve değişiklikleri doğrudan tekrar kaydedin.
• Yeni dosya ve klasörler oluşturabilirsiniz.

Web uygulamaları, File System Access API'den önce bunu yapamıyordu. Dosyaları açmak için bir dosya yüklemek, 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örler oluşturmak için hiç erişimi yoktu.

Dosya açma

Bir dosyayı 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çma ayarlarının geri kalanı şu şekildedir:

1. Dosya sistemi erişiminin dosya seçici API'sinden dosya herkese açık kullanıcı adını yakalayın. Bu, size dosyayla ilgili temel bilgileri 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ğu için içeriğini almak için text() gibi Blob yöntemleri ç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

Değişiklikleri bir dosyada kaydetmek için kullanıcı hareketine de ihtiyacınız vardır: şunu yap:

1. Dosya tutma yerini kullanarak FileSystemWritableFileStream oluşturun.
2. Akışta değişiklikler yapın. Bu, dosyanın mevcut halini güncellemez; bunun yerine geçici bir dosya oluşturulur.
3. Son olarak, değişiklik yapmayı tamamladığınızda akışı kapatırsınız. Böylece değişiklikler geçici durumdan 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();

Dosya işleme

File System Access API, dosyaları uygulamanızın içinden açmanızı sağlar. Peki ya tam tersi? Kullanıcılar, dosya açmak için favori uygulamalarını varsayılan olarak ayarlamak istiyor. File Processing API (Dosya işleme API'si): Yüklü PWA'ların kullanılmasını sağlayan deneysel bir API'dir: Web uygulaması 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.

Kaydolduktan sonra yüklü PWA'nız, kullanıcının dosya sisteminde bir seçenek olarak gösterilir. Bu seçenek, kullanıcının dosyayı doğrudan kendi içinde açmasına olanak tanır. Aşağıda, metin dosyalarını okumak üzere PWA'nın manifest kurulumuyla ilgili bir örnek verilmiştir:

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

URL işleme

URL işleme ile PWA'nız, kapsamının 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'ya bağlantı veren bir mesaj alırsanız veya PWA'nızdaki 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ın Chrome ile PWA yüklediğinde) Android'de otomatik olarak kullanılabilir. iOS ve iPadOS'te yüklü PWA'lardaki URL'leri Safari'den yakalamak imkansızdır.

Web tarayıcısı topluluğu, masaüstü tarayıcılar için yeni bir spesifikasyon oluşturdu. Bu spesifikasyon şu anda deneyseldir; yeni bir manifest dosyası üyesi ekler: url_handlers. Bu mülkte, PWA'nın yakalamak istediği bir kaynak dizisi olması beklenir. PWA'nızın kaynağı otomatik olarak verilir ve diğer her kaynak, web-app-origin-association adlı bir dosya ile çalışmayı kabul etmelidir. Örneğin, PWA'nızın manifesti web.dev adresinde barındırılıyorsa ve app.web.dev kaynağını eklemek istiyorsanız manifest şöyle görünür:

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

Bu durumda tarayıcı, app.web.dev/.well-known/web-app-origin-association adresinde bir dosya olup olmadığını kontrol ederek PWA kapsamı URL'sinden URL işlemeyi kabul eder. Bu dosyayı geliştiricinin oluşturması gerekir. Aşağıdaki örnekte dosya aşağıdaki gibi 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ı kullanılabilir. Bazı işletim sistemlerinde yüklü uygulamalar bu yeteneği, şemalarını kaydeden uygulamalar sayesinde elde eder.

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

Kaydolmak için registerProtocolHandler() yöntemini veya manifest dosyanızdaki protocol_handlers üyesini, istediğiniz şema ve PWA'nızın bağlamında yüklemek istediğiniz URL ile birlikte 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 çıkış karakterli URL'nin yer tutucusudur. Dolayısıyla <a href="web+pwa://testing"> gibi bir yerde bağlantınız varsa PWA'nız /from-protocol?value=testing açılır.

Diğer uygulamaları arama

Kullanıcıların cihazlarında başka yüklü uygulamalara (PWA olsun veya olmasın) bağlanmak için URI şemalarını kullanabilirsiniz her platformda kullanıma sunuyoruz. Tek yapmanız gereken bir bağlantı oluşturmak veya navigator.href kullanarak bağımsız değişkenleri URL çıkışlı biçimde ileterek istediğiniz URI şemasını göstermektir.

Telefon aramaları için tel:, e-posta gönderme için mailto: veya kısa mesajlar için sms: gibi iyi bilinen standart şemaları kullanabilirsiniz; veya diğer uygulamaların İyi bilinen mesajlar, haritalar, gezinme, online toplantılar, sosyal ağlar ve uygulama mağazalarından gelen URL şemaları.

Web 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 share mekanizması olan işletim sistemlerinde (Android, iOS, iPadOS, Windows ve ChromeOS dahil) kullanılabilir. Şunları içeren bir nesneyi paylaşabilirsiniz:

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

Mevcut cihazın paylaşımda bulunup bulunamayacağını kontrol etmek için, metin gibi basit veriler söz konusu olduğunda navigator.share() yönteminin kullanılıp kullanılmadığını kontrol ederek navigator.canShare() yönteminin bulunup bulunmadığını kontrol ettiğiniz dosyaları paylaşın.

navigator.share(objectToShare) numaralı telefonu arayarak paylaşma işlemini istiyorsunuz. Bu çağrı, undefined ile çözümlenen veya bir istisnayla reddeden Vaat döndürür.

Web Paylaşımı Hedefi

Web Share Target API sayesinde PWA'nız, PWA olsa da olmasa da söz konusu cihazdaki başka bir uygulamada yapılan paylaşım işleminin hedefi haline gelebilir. PWA'nız başka bir uygulama tarafından paylaşılan verileri alır.

Ş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 işletim sistemi içinde paylaşım hedefini kaydeder.

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

action

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

method

İşlem için GET, POST veya PUT gibi HTTP fiil yöntemi 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

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

ziyaret edin.

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

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

Önceki örnekten, sistemdeki herhangi bir uygulama, başlığı olan bir URL paylaşıyorsa ve kullanıcı iletişim kutusundan PWA'nızı seçerse tarayıcı, kaynağınızın /receive-share/?shared_title=AAA&shared_url=BBB öğesine yeni bir gezinme oluşturur. Burada AAA paylaşılan başlık, BBB ise paylaşılan URL'dir. window.location dizesindeki verileri URL oluşturucusu ile ayrıştırarak bu verileri 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 dosyaları nasıl alacağınız için Web Paylaşımı Target API ile paylaşılan verileri alma başlıklı makaleyi inceleyin.

Kişi Seçici

Kişi Seçici API'si ile cihazın, kullanıcının tüm kişilerini içeren yerel bir iletişim kutusu oluşturmasını isteyebilirsiniz. Böylece kullanıcı bir veya daha fazla kişi seçebilir. Böylece PWA'nız bu kişilerden istediğiniz verileri alabilir.

Contact Picker API'si çoğunlukla mobil cihazlarda kullanılabilir. Tüm işlemler, uyumlu platformlarda navigator.contacts arayüzü üzerinden yapılır.

navigator.contacts.getProperties() ile sorgulamak için kullanılabilir özellikleri isteyebilir ve istenen özelliklerin listesini içeren bir veya daha fazla kişi seçimini isteyebilirsiniz.

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

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 verme
• Progresif Web Uygulamaları'nda dosyaları işleme
• İşletim Sistemi Paylaşımı kullanıcı arayüzüyle Web Paylaşımı API'sini entegre etme
• Diğer uygulamalarla içerik paylaşma
• Web Paylaşımı Hedef API'si ile paylaşılan veriler alma
• Web için kişi seçici