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:
- 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.
- 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 birBlob
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:
FileSystemWritableFileStream
oluşturmak için dosya tanıtıcısını kullanın.- Akışta değişiklik yapın. Bu işlem dosyayı güncellemez. Bunun yerine genellikle geçici bir dosya oluşturulur.
- 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();
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": [ "/*" ]
}
}
]
}
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.
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.
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ına sahip Android, iOS, iPadOS, Windows ve ChromeOS işletim sistemlerinde kullanılabilir.
Şunları içeren bir nesneyi paylaşabilirsiniz:
- Metin (
title
vetext
ö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
veyaPUT
) kullanılır. enctype
- (İsteğe bağlı) Parametreler için kodlama türü varsayılan olarak
application/x-www-form-urlencoded
şeklindedir, ancakPOST
gibi yöntemler içinmultipart/form-data
olarak da ayarlanabilir. params
- Paylaşım verilerini (Web Paylaşımı'ndaki
title
,text
,url
vefiles
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.
Ö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.
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
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.
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