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

Bir uygulamayı işletim sistemine sahip dosya işleyici olarak kaydedin.

Thomas Steiner

Artık web uygulamaları dosya okuma ve yazma özelliğine sahip olduğuna göre, adım adım geliştiricilerin, uygulamalarının izin verdiği dosyalar için bu web uygulamalarını dosya işleyiciler olarak tanımlamalarını sağlamaktır. oluşturma ve işleme. Dosya İşleme API'si tam olarak bunu yapmanızı sağlar. Kısa mesajı kaydettikten sonra düzenleyici uygulamasını dosya işleyici olarak kullanabilir ve yükledikten sonra macOS'te bir .txt dosyasını sağ tıklayıp "Bilgi Al"ı seçin sonra OS'ye, .txt dosyalarını her zaman bu uygulamayla açması gerektiğini söyleyin varsayılandır.

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

Bu API'yi kullanabilecek sitelere örnek olarak şunlar 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 seviyesi düzenleme araçları.

File handling API'yi kullanma

Progresif geliştirme

Dosya işleme API'si kendi başına çoklu doldurulamaz. Dosyaları web ile açma işlevi Ancak uygulama, iki farklı yolla gerçekleştirilebilir:

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

Tarayıcı desteği

Tarayıcı Desteği

• . giriş
• . giriş
• . kat
• . kat

Kaynak

Ö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.
}

Not: Dosya işleme şu anda masaüstü işletim sistemleriyle sınırlıdır.

File handling API'nin bildirim temelli bölümü

İlk adım olarak, web uygulamalarının web uygulaması manifestlerinde beyan edilen bir şekilde açıklamaları gerekir. dosyaları işleyebilir. Dosya İşleme API'si, web uygulaması manifest'ini yeni bir bir dizi dosya işleyiciyi kabul eden "file_handlers" adlı bir özellik eklediğinizden emin olun. Dosya işleyici şu özelliklere sahip bir nesne olarak görünür:

• Değeri olarak uygulamanın kapsamındaki bir URL'ye işaret eden "action" özelliği.
• Anahtar olarak MIME türü nesne ve dosya uzantısı listeleri olan bir "accept" özelliği değerler.
• ImageResource dizisine sahip bir "icons" mülkü simgelerine dokunun. Bazı işletim sistemleri, dosya türü ilişkilendirmesinin yalnızca ilişkili uygulama simgesi yerine, söz konusu dosya türünün kullanımıyla ilişkili özel bir simge göstermeniz gerekir.
• Birden fazla dosyanın tek bir hesapta açılıp açılmayacağını tanımlayan "launch_type" özelliği birden çok müşteri için geçerli. Varsayılan değer: "single-client". Kullanıcı birden çok dosyayı açar ve dosya işleyiciye "multiple-clients" ile "launch_type" için birden fazla uygulama lansmanı gerçekleştirilecek ve her lansmanda LaunchParams.files dizisi (daha ayrıntılı bakın) yalnızca bir öğesi olur.

Yalnızca web uygulaması manifestiyle alakalı alıntının gösterildiği aşağıdaki örnek, daha net:

{
  "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, virgülle ayrılmış değer (.csv) dosyalarını şu adreste işleyen varsayımsal bir uygulama içindir: /open-csv, /open-svg konumunda ölçeklenebilir vektör grafiği (.svg) dosyaları ve uydurma Grafr dosya biçimi /open-graf adresinde uzantı olarak .grafr, .graf veya .graph özelliklerinden herhangi biri ile. İlk ikisi açılacak tek bir istemcide, birden fazla dosya işleniyorsa birden fazla istemcide

Not: Bu beyanın geçerli olması için uygulamanın yüklenmesi gerekir. Şunları yapabilirsiniz: daha fazla bilgi edinmek için aşağıdaki sitedeki bir makale dizisini inceleyebilirsiniz: uygulamanızı yüklenebilir hale getirme.

File handling API'nin kaçınılmaz bölümü

Uygulama artık teoride hangi kapsam içi URL'de hangi dosyaları işleyebileceğini beyan ettiğine göre gelen dosyalar üzerinde uygulamalı olarak bir şeyler yapmanız gerekir. launchQueue burada devreye giriyor rol oynar. Bir sitenin, başlatılan dosyalara erişebilmek için window.launchQueue için bir tüketici belirtmesi gerekir nesnesini tanımlayın. Lansmanlar, belirtilen tüketici tarafından işlenene kadar sıraya alınır ve tüketici tarafından çağrılır. her lansman için bir kez yapabilir. Bu şekilde her lansman, projenin ne zaman değeri belirtilmiş.

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 yoktur, ancak özellik isteği gönderebilirsiniz. eklendi.

Demo

Çizgi film tarzı bir çizim uygulaması olan Excalidraw'a dosya işleme desteği ekledim. Bunu test etmek için önce Excalidraw'ı yüklemeniz gerekiyor. Daha sonra bu dosyayı kullanarak bir dosya oluşturup dosyayı çift tıklayarak veya sağ tıklayarak açıp "Excalidraw" tıklayın. Kaynakta uygulamaya göz atabilirsiniz girin.

İşletim sisteminizin dosya gezgininde bir dosyayı çift tıklayın veya sağ tıklayın.

ziyaret edin.

'nı inceleyin.

Excalidraw, .excalidraw dosyaları için varsayılan dosya işleyicidir.

Güvenlik

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

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

Kullanıcıların güvenini ve güvenliğini sağlamak Dosya İşleme API'si bir dosyayı açtığında, PWA'nın dosyayı görüntüleyebilmesi için önce bir izin istemi gösterilir. Bu izin istemi gösterilecek kullanıcının bir dosyayı açmak için PWA'yı seçmesinden hemen sonra daha anlaşılır ve alakalı hale getirmek için PWA kullanarak dosya açma işlemidir.

Bu izin, kullanıcı İzin ver veya Dosya işlemeyi engelle seçeneğini tıklayana kadar her seferinde gösterilir. veya istemi üç kez yoksayar (bundan sonra Chromium buna ambargo uygular ve izni) gerekir. Seçilen ayar, PWA (progresif web uygulaması) kapatma ve yeniden açma işlemleri boyunca geçerliliğini korur.

Manifest güncellemeleri ve "file_handlers" bölümündeki değişiklikler algılandığında izinler sıfırlanacak.

Dosyayla ilgili zorluklar

Web sitelerinin dosyalara erişmesine izin vererek açılan çok sayıda saldırı vektörü kategorisi bulunmaktadır. Bu konular File System Access API hakkındaki makaleyi inceleyin. İlgili içeriği oluşturmak için kullanılan File handling API'nin Dosya Sistemi üzerinde sağladığı güvenlikle ilgili ek özellik Access API, işletim sisteminin yerleşik sistemi üzerinden belirli dosyalara erişim izni verme özelliğidir. Bir web uygulaması tarafından gösterilen dosya seçicinin aksine kullanıcı arayüzü.

Kullanıcıların bir web uygulamasına yanlışlıkla erişim izni verebilmesi için açacağım. Bununla birlikte, bir dosyanın açılması, üzerinde çalıştığınız uygulamanın dosyayı okumak ve/veya işlemek için ile açılmışsa. Bu nedenle, kullanıcının açık bir şekilde dosyayı açma tercihi yüklü bir uygulamada oturum açın. Örneğin, "Birlikte aç..." yeterli düzeyde okunup bulunmadığı güvenin bir göstergesidir.

Varsayılan işleyici zorlukları

Bunun istisnası, belirli bir dosya türü için ana makine sisteminde hiç uygulama olmamasıdır. İçinde bu durumda, bazı ana makine işletim sistemleri yeni kaydedilen işleyiciyi sessiz bir şekilde ve kullanıcının herhangi bir müdahalesi olmadan dosya türü için varsayılan işleyici olarak tanımlanabilir. Bu, Yani, kullanıcı bu türdeki bir dosyayı çift tıklarsa, ilgili dosyanın otomatik olarak kayıtlı web uygulaması. Bu tür ana makine işletim sistemlerinde, kullanıcı aracısının mevcut dosya türü için varsayılan işleyici ise, bu hatadan kaçınmak için açık bir izin istemi bir dosyanın içeriğini kullanıcının izni olmadan yanlışlıkla bir web uygulamasına göndermek.

Kullanıcı denetimi

Bu spesifikasyonda, tarayıcıların dosyaları dosya olarak işleyebilen her siteyi kaydetmemesi gerektiği belirtiliyor gösterir. Bunun yerine, dosya işleme kaydına yükleme sırasında izin verilmelidir ve hiçbir zaman özellikle de bir site varsayılan işleyici olacaksa açıkça kullanıcı onayı olmadan. Paydaşlarınıza Kullanıcının muhtemelen zaten varsayılan bir işleyicisi olduğu .json gibi mevcut uzantıları ele geçirmekten daha iyidir kendi uzantılarını oluşturmayı düşünmelidir.

Şeffaflık

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

Geri bildirim

Chrome ekibi, File handling API ile ilgili deneyiminiz hakkında bilgi almak istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şey mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir?

• İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir depoya ekleyin .

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

• new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarda mümkün olduğunca yapabilirsiniz, çoğaltmaya ilişkin basit talimatlar ve UI>Browser>WebAppInstalls>FileHandling Bileşenler kutusunu tıklayın. Glitch, hızlı ve kolay paylaşım için idealdir tekrarlar.

API'ye desteğinizi gösterin

File handling API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chrome ekibinin şunları yapmasına yardımcı olur: ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

• Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
• Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #FileHandling ve onu nerede ve nasıl kullandığınızı bileceksiniz.

Faydalı bağlantılar

• Herkese açık açıklayıcı
• File Process API demosu | File Process API demo kaynağı
• Chromium izleme hatası
• ChromeStatus.com girişi
• Blink Bileşeni: UI>Browser>WebAppInstalls>FileHandling
• TAG İncelemesi
• Mozilla Standartları Konumu

Teşekkür

Dosya İşleme API'si Eric Willigers tarafından belirtildi: Jay Harris ve Raymes Khoury. Bu makale tarafından incelendi Joe Potpur.