Yüklü web uygulamalarının dosya işleyicisi olmasına izin ver

Uygulamaları işletim sistemiyle dosya işleyici olarak kaydetme.

Thomas Steiner

Web uygulamaları artık dosya okuyabildiğine ve yazabildiğine göre, bir sonraki mantıksal adım geliştiricilerin, bu web uygulamalarını, uygulamalarının oluşturup işleyebildiği dosyalar için dosya işleyiciler olarak tanımlamalarına izin vermektir. File PROCESS API tam olarak bunu yapmanızı sağlar. Bir metin düzenleyici uygulamasını dosya işleyici olarak kaydettikten ve yükledikten sonra macOS'te bir .txt dosyasını sağ tıklayıp "Bilgi Al"ı seçerek işletim sistemine her zaman .txt dosyalarını bu uygulamayı varsayılan olarak açacak şekilde açma talimatı verebilirsiniz.

File Handling API için önerilen kullanım alanları

Bu API'yi kullanabilecek sitelere örnek olarak aşağıdakiler verilebilir:

• Metin düzenleyiciler, e-tablo uygulamaları ve slayt gösterisi oluşturucuları gibi Office uygulamaları.
• Grafik düzenleyiciler ve çizim araçları.
• Video oyunu seviyesinde düzenleme araçları.

File handling API'yi kullanma

Progresif geliştirme

Dosya İşleme API'si sen tek başına çoklu doldurulamaz. Bununla birlikte, dosyaları bir web uygulamasıyla açma işlevi, diğer iki yolla sağlanabilir:

• Web Share Target API, geliştiricilerin uygulamalarını bir paylaşım hedefi olarak belirtmesine olanak tanır. Böylece dosyalar, işletim sisteminin paylaşım sayfasından açılabilir.
• File System Access API, dosya sürükleme ve bırakma işleviyle entegre edilebilir. Böylece, geliştiriciler halihazırda açılmış uygulamada bırakılan dosyaları işleyebilir.

Tarayıcı desteği

Özellik algılama

File handling API'nin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

File handling API'nin bildirim temelli kısmı

İlk adım olarak, web uygulamalarının ne tür dosyaları işleyebileceğini web uygulaması manifest dosyalarında bildirerek tanımlaması gerekir. File Handling API, web uygulaması manifestini bir dizi dosya işleyiciyi kabul eden "file_handlers" adlı yeni bir özellikle genişletir. Dosya işleyici, şu özelliklere sahip bir nesnedir:

• Değeri olarak uygulamanın kapsamındaki bir URL'ye işaret eden "action" özelliği.
• Anahtar olarak MIME türünde bir nesne ve değerleri olarak dosya uzantıları listelerine sahip bir "accept" özelliği.
• ImageResource simge dizisi içeren bir "icons" mülkü. Bazı işletim sistemleri, dosya türü ilişkilendirmesinin yalnızca ilişkilendirilmiş uygulama simgesi değil, söz konusu dosya türünün uygulamayla birlikte kullanımıyla ilgili özel bir simge görüntülemesine izin verir.
• Birden fazla dosyanın tek bir istemcide mi yoksa birden çok istemcide mi açılacağını tanımlayan "launch_type" özelliği. Varsayılan değer: "single-client". Kullanıcı birden fazla dosya açarsa ve dosya işleyiciye "launch_type" olarak "multiple-clients" ek açıklaması verilmişse birden fazla uygulama başlatma işlemi gerçekleşir ve her başlatma için LaunchParams.files dizisi (aşağıya bakın) yalnızca bir öğeye sahip olur.

Aşağıdaki örnekte, yalnızca web uygulaması manifestinin ilgili alıntısı gösterilmektedir. Bu örnek konuyu daha anlaşılır hale getirecektir:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

Bu, /open-csv alanında virgülle ayrılmış değer (.csv) dosyalarını, /open-svg konumunda ölçeklenebilir vektör grafiği (.svg) dosyalarını ve /open-graf uzantısında .grafr, .graf veya .graph uzantılı oluşturulmuş Grafr dosya biçimlerini işleyen varsayımsal bir uygulama içindir. İlk ikisi tek bir istemcide, sonuncusu ise birden fazla dosya işleniyorsa birden fazla istemcide açılır.

Dosya İşleme API'sinin zorunlu kısmı

Uygulama, teoride hangi kapsam içi URL'de hangi dosyaları işleyebileceğini açıkladığına göre, pratikte gelen dosyalarla ilgili olarak mutlaka bir şey yapması gerekir. İşte launchQueue burada devreye giriyor. Bir sitenin, başlatılan dosyalara erişmek için window.launchQueue nesnesine yönelik bir tüketici belirtmesi gerekir. Başlatmalar, her başlatma için tam olarak bir kez çağrılan, belirtilen tüketici tarafından işlenene kadar sıraya alınır. Bu şekilde, tüketicinin ne zaman belirtildiğinden bağımsız olarak her lansman gerçekleştirilir.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

Geliştirici Araçları desteği

Bu yazının yazıldığı sırada Geliştirici Araçları desteği bulunmuyor ancak destek eklenmesi için bir özellik isteği gönderdim.

Demografi

Çizgi film tarzında bir çizim uygulaması olan Excalidraw'a dosya işleme desteği ekledim. Test etmek için öncelikle Excalidraw'u yüklemeniz gerekir. Daha sonra bu dosyayla bir dosya oluşturup dosya sisteminizde bir yerde depoladığınızda, dosyayı çift tıklayarak veya sağ tıklayarak açabilir ve içerik menüsünde "Excalidraw"u seçebilirsiniz. Kaynak kodundaki uygulamayı inceleyebilirsiniz.

Güvenlik

Chrome ekibi, Dosya İşleme API'sini, Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan (kullanıcı denetimi, şeffaflık ve ergonomik dahil) temel ilkeleri kullanarak tasarlamıştır ve uygulamıştır.

İzinler, izin kalıcılığı ve dosya işleyici güncellemeleri

Kullanıcıların güvenini ve dosyalarının güvenliğini sağlamak için File Usage API bir dosya açtığında PWA'nın dosyayı görüntüleyebilmesi için önce bir izin istemi gösterilir. Bu izin istemi, kullanıcı bir dosyayı açmak için PWA'yı seçtikten hemen sonra gösterilir. Böylece izin, dosyayı PWA kullanarak açma işlemiyle sıkı bir şekilde bağlantılıdır ve böylece daha anlaşılır ve alakalı olur.

Bu izin, kullanıcı site için dosya işlemeye İzin ver veya Engelle'yi tıklayana veya istem üç kez yoksayılana kadar her seferinde gösterilir (sonra Chromium bu izni yasaklar ve engeller). Seçilen ayar, PWA'in kapatılması ve yeniden açılması boyunca aynı kalır.

Manifest, "file_handlers" bölümünde güncelleme ve değişiklikler algılandığında izinler sıfırlanır.

Dosyalarla ilgili giriş sorgulamaları

Web sitelerinin dosyalara erişmesine izin vererek açılan çok sayıda saldırı vektörü kategorisi bulunur. Bunlar, File System Access API ile ilgili makalede açıklanmıştır. File Using API'nin File Process API üzerinden sağladığı güvenlikle ilgili ek özellik, bir web uygulaması tarafından gösterilen bir dosya seçici üzerinden değil, işletim sisteminin yerleşik kullanıcı arayüzü üzerinden belirli dosyalara erişim izni verme yeteneğidir.

Kullanıcıların bir dosyayı açarak istemeden web uygulamasına erişim izni verme riski mevcuttur. Bununla birlikte, bir dosyayı açmanın, birlikte açıldığı uygulamaya o dosyayı okumak ve/veya değiştirmek için izin verdiği bilinmektedir. Bu nedenle, kullanıcının bir dosyayı yüklü bir uygulamada açma (örneğin, "Birlikte aç..." içerik menüsü aracılığıyla) tercihi, uygulamaya ilişkin yeterli bir güven işareti olarak değerlendirilebilir.

Varsayılan işleyici sorgulamaları

Bu durumun tek istisnası, belirli bir dosya türü için ana makine sisteminde uygulama bulunmamasıdır. Bu durumda bazı ana makine işletim sistemleri, yeni kaydedilen işleyiciyi söz konusu dosya türü için sessiz bir şekilde ve kullanıcının herhangi bir müdahalesi olmadan varsayılan işleyiciye otomatik olarak yükseltebilir. Bu durum, kullanıcı söz konusu türdeki bir dosyayı çift tıklarsa ilgili dosyanın kayıtlı web uygulamasında otomatik olarak açılacağı anlamına gelir. Bu tür ana makine işletim sistemlerinde, kullanıcı aracısı, dosya türü için mevcut bir varsayılan işleyici olmadığını belirlediğinde, bir dosyanın içeriğinin kullanıcının izni olmadan yanlışlıkla bir web uygulamasına gönderilmesini önlemek amacıyla açık bir izin istemi gerekebilir.

Kullanıcı denetimi

Spesifikasyon, tarayıcıların dosyaları dosya işleyici olarak işleyebilen her siteyi kaydetmemesi gerektiğini belirtir. Bunun yerine, dosya işleme kaydı yüklemenin arkasında korunmalıdır ve özellikle de bir site varsayılan işleyici olacaksa, hiçbir zaman açık kullanıcı onayı olmadan yapılmamalıdır. Kullanıcının muhtemelen zaten kayıtlı varsayılan bir işleyicisi olduğu .json gibi mevcut uzantıları ele geçirmek yerine, sitelerin kendi uzantılarını oluşturmayı düşünmesi gerekir.

Şeffaflık

Tüm işletim sistemleri, kullanıcıların mevcut dosya ilişkilendirmelerini değiştirmesine izin verir. Bu, tarayıcının kapsamı dışındadır.

Geri bildirim

Chrome ekibi, File Handling API ile ilgili deneyimlerinizi öğrenmek istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir durum mu var? Fikrinizi uygulamak için gereken yöntem veya özellikler eksik mi? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var?

• İlgili GitHub deposuna özellik sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

• new.crbug.com adresinde hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden ve basit yeniden oluşturma talimatlarını eklediğinizden emin olun ve Bileşenler kutusuna UI>Browser>WebAppInstalls>FileHandling değerini girin. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteği gösterin

File Handling API'yi kullanmayı düşünüyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.

• Bu bilgiyi nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
• #FileHandling hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

• Herkese açık açıklayıcı
• File handling API demosu | File PROCESS API demo kaynağı
• Chromium izleme hatası
• ChromeStatus.com girişi
• Yanıp Sönen Bileşen: UI>Browser>WebAppInstalls>FileHandling
• TAG İncelemesi
• Mozilla Standartları Konumu

Teşekkür

File Handling API; Eric Willigers, Jay Harris ve Raymes Khoury tarafından belirtilmiştir. Bu makale Joe Medley tarafından incelenmiştir.