Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web Özellikleri kod laboratuvarı

Web Özellikleri

Web ile yerel arasındaki yetenek boşluğunu kapatmak ve geliştiricilerin açık web'de daha iyi deneyimler oluşturmasını kolaylaştırmak istiyoruz. Her geliştiricinin web'i mükemmel hale getirebilmek için ihtiyaç duyduğu özelliklere erişebilmesi gerektiğine inanıyoruz ve daha yetenekli bir web ortamı oluşturmak için çalışıyoruz.

Ancak, yerel olarak kullanılabilen ancak web'de kullanılamayan dosya sistemi erişimi ve boşta kalma algılama gibi bazı özellikler vardır. Bu eksik özellikler, bazı uygulama türlerinin web'de yayınlanamayacağı veya daha az kullanışlı olacağı anlamına gelir.

Birlikte çalışabilir bir tasarım sağlamak için bu yeni özellikleri hem açık hem de şeffaf bir şekilde tasarlayıp geliştireceğiz. Bu süreçte, geliştiriciler ve diğer tarayıcı sağlayıcılardan erken geri bildirim alırken mevcut açık web platformu standart süreçlerini de kullanacağız.

Geliştireceğiniz uygulama

Bu codelab'de, yepyeni veya yalnızca belirli bir bayrak paketinde olan birkaç web API'siyle oynayacaksınız. Bu nedenle codelab'de, API'lerin kendisi ve belirli bir nihai ürün oluşturmak yerine bu API'lerin kilidini açtığı kullanım alanları dikkate alınmaktadır.

Neler öğreneceksiniz?

Bu codelab'de, en iyi API'lerin temel mekanizmalarını öğreneceksiniz. Bu mekanizmanın henüz çok zor bir süreç olduğunu ve geliştirici akışıyla ilgili geri bildirimleriniz için çok teşekkür ederiz.

Gerekenler

Bu codelab'de yer alan API'ler gerçekten sınırların dışında olduğu için her API'ye ilişkin gereksinimler değişiklik gösterir. Lütfen her bölümün başında uyumluluk bilgilerini dikkatlice okuduğunuzdan emin olun.

Codelab'e nasıl yaklaşılır?

Codelab'in sıralı olarak çalıştırılması şart değildir. Her bölüm bağımsız bir API'dır. Bu nedenle, ilginizi en çok çeken unsurları kendiniz seçebilirsiniz.

Badging API'nin amacı, kullanıcılara arka planda gerçekleşen şeylere dikkat çekmektir. Bu codelab'de demonun basitliği açısından, ön planda gerçekleşen bir şeye dikkat çekmek için API'yı kullanalım. Böylece arka planda gerçekleşenlere zihinsel aktarım yapabilirsiniz.

Airhorner'u yükleyin

Bu API'nin çalışması için ana ekrana bir PWA'nın yüklenmesi gerekir. Bu nedenle, ilk olarak şöhretli, dünyaca ünlü airhorner.com gibi bir PWA'yı yüklemeniz gerekir. Sağ üst köşedeki Yükle düğmesine basın veya manuel olarak yüklemek için üç nokta menüsünü kullanın.

Bu işlemle bir onay istemi görüntülenir, Yükle'yi tıklayın.

İşletim sisteminizin yuvasında artık yeni bir simge var. PWA'yı başlatmak için tıklayın. Bunun için kendi uygulama penceresi olur ve bağımsız modda çalışır.

Rozet ayarlama

PWA'yı yüklediğinize göre, rozette görüntülenecek bazı sayısal verilere (rozetler yalnızca sayılar içerebilir) ihtiyacınız vardır. Air Horner'da hesaba katılması gereken basit bir şey var: İçin: Boynuzlanma sayısı. Aslına bakarsanız, yüklü Airhorner uygulamasıyla kornayı kaldırıp rozeti kontrol edebilirsin. Boynuz her görüştüğünüzde bir sayılır.

Peki bu nasıl mümkün olacak? Esas olarak kod şudur:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

Alarmı birkaç kez çalıp PWA'nın simgesini kontrol edin: Her defasında ses güncellenir. İşte bu kadar kolay.

Rozeti temizleme

Sayaç en fazla 99 saniye olacak şekilde sona erer. Ayrıca, manuel olarak sıfırlayabilirsiniz. Geliştirici Araçları Konsolu sekmesini açın, aşağıdaki satırı yapıştırın ve Enter tuşuna basın.

navigator.setExperimentalAppBadge(0);

Dilerseniz aşağıdaki snippet'te gösterildiği gibi rozeti açıkça temizleyerek rozetten kurtulabilirsiniz. PWA'nızın simgesi artık baştan, net ve rozet olmadan tekrar görünmelidir.

navigator.clearExperimentalAppBadge();

Geri bildirim

Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:

Bu API'nin kullanımı kolaydı mı?

Evet

Hayır

Örneği çalıştırmak için aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa geri bildirim sağlayın. Teşekkürler!

Yerel Dosya Sistemi API'si, geliştiricilerin, kullanıcının yerel cihazındaki dosyalarla etkileşime geçen güçlü web uygulamaları derlemesine olanak tanır. Kullanıcılar bir web uygulaması için erişim izni verdikten sonra bu API, web uygulamalarının, kullanıcının cihazındaki dosya ve klasörlerde yapılan değişiklikleri doğrudan okumasına veya kaydetmesine olanak sağlar.

Dosya okuma

Yerel Dosya Sistemi API'sının "Merhaba, dünya", yerel bir dosyayı okumak ve dosya içeriğini almaktır. Düz .txt dosyası oluşturun ve bir metin girin. Ardından, example.com gibi herhangi bir güvenli siteye (yani HTTPS üzerinden yayınlanan bir site) gidin ve Geliştirici Araçları konsolunu açın. Aşağıdaki kod snippet'ini konsola yapıştırın. Yerel Dosya Sistemi API'si bir kullanıcı hareketi gerektirdiğinden dokümana çift tıklama işleyicisi ekliyoruz. Daha sonra dosya koluna ihtiyacımız olacak ve bu nedenle bunu genel bir değişken yapacağız.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

example.com sayfasında herhangi bir yeri çift tıkladığınızda bir dosya seçici görüntülenir.

Daha önce oluşturduğunuz .txt dosyasını seçin. Bunun ardından dosya içeriği, example.com adresinin gerçek body içeriğinin yerine geçer.

Dosya kaydetme

Şimdi de bazı değişiklikler yapmak istiyoruz. Bu nedenle, aşağıdaki kod snippet'ine yapıştırarak body öğesini düzenlenebilir hale getirelim. Artık metni, tarayıcı bir metin düzenleyici gibi düzenleyebilirsiniz.

document.body.contentEditable = true;

Şimdi, bu değişiklikleri tekrar orijinal dosyasına yazmak istiyoruz. Bu nedenle, dosya snippet'inde bir yazara ihtiyacımız var. Aşağıdaki snippet'i konsola yapıştırarak elde edebiliriz. Yine bir kullanıcı hareketine ihtiyacımız var. Bu nedenle, ana dokümanı tıklamak için bekleriz.

document.onclick = async () => {
  const writer = await handle.createWriter();
  await writer.truncate(0);
  await writer.write(0, document.body.textContent);
  await writer.close();
};

Artık dokümanı tıkladığınızda (çift tıklamadığınızda) bir izin istemi görünür. İzin verdiğinizde, dosyanın içeriği daha önce body ürününde düzenlediğiniz içerik olur. Dosyayı farklı bir düzenleyicide açarak doğrulayın (veya dokümanı tekrar çift tıklayıp dosyanızı yeniden açarak işlemi yeniden başlatın).

Tebrikler! Dünyadaki en küçük metin düzenleyiciyi oluşturdunuz.[citation needed]

Geri bildirim

Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:

Bu API'nin kullanımı kolaydı mı?

Evet

Hayır

Örneği çalıştırmak için aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa geri bildirim sağlayın. Teşekkürler!

Şekil Algılama API'si, hızlandırılmış şekil algılayıcılarına (ör. insan yüzleri) erişim sağlar ve hareketsiz resimler ve/veya canlı görüntü feed'leri üzerinde çalışır. İşletim sistemlerinde Android FaceDetector gibi performans gösteren ve son derece optimize edilmiş özellik algılayıcıları vardır. Şekil Algılama API'si bu yerel uygulamaları açıp bir dizi JavaScript arayüzü aracılığıyla sunar.

Şu anda desteklenen özellikler, FaceDetector arayüzü üzerinden yüz algılama, BarcodeDetector arayüzü üzerinden barkod algılama ve TextDetector arayüzü üzerinden metin algılama (optik karakter tanıma) şeklindedir.

Yüz Algılama

Şekil Algılama API'sinin ilginç bir özelliği, yüz algılamadır. Test etmek için yüzlerin bulunduğu bir sayfaya ihtiyacımız var. Yazarın yüzünün bulunduğu bu sayfa iyi bir başlangıçtır. Bu, aşağıdaki ekran görüntüsünde görünecektir. Desteklenen bir tarayıcıda yüzün sınır kutusu ve yüzün önemli noktaları tanınır.

Bunun için Glitch projesini, özellikle de script.js dosyasını yeniden birleştirerek veya düzenleyerek ne kadar az kod gerektiğini görebilirsiniz.

Yalnızca dinamik bir şekilde hareket etmek ve yazarın yüzüyle çalışmak istemiyorsanız gizli bir sekmede veya misafir modunda yüzlerle dolu bu Google Arama sonuçları sayfasına gidin. Bu sayfada, herhangi bir yeri sağ tıklayıp İncele'yi tıklayarak Chrome Geliştirici Araçları'nı açın. Ardından, Konsol sekmesinde aşağıdaki snippet'i yapıştırın. Kod, algılanan yüzleri yarı şeffaf kırmızı bir kutuyla vurgular.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Bazı DOMException yayınlarının bulunduğunu ve tüm resimlerin işlenmekte olmadığını fark edersiniz. Bunun nedeni, ekranın üst kısmındaki resimlerin veri URI'leri olarak satır içi hale getirilmesi ve bunlara erişilebilmesidir. Ekranın alt kısmındaki resimler ise CORS'yi destekleyecek şekilde yapılandırılmamış farklı bir alan adından gelir. Demo için bu konuda endişelenmemize gerek yok.

Yüzde önemli nokta algılama

macOS, yalnızca yüzlerin yanı sıra yüzlerin algılanmasını da destekler. Yüzün önemli noktalarının algılanmasını test etmek için aşağıdaki snippet'i Console'a yapıştırın. Hatırlatma: crbug.com/914348 nedeniyle önemli noktalar artık mükemmel değildir. Ancak bunun nereye gittiğini ve bu özelliğin ne kadar güçlü olabileceğini görebilirsiniz.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);

      const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      landmarkSVG.style.position = 'absolute';
      landmarkSVG.classList.add('landmarks');
      landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
      landmarkSVG.style.width = `${img.width}px`;
      landmarkSVG.style.height = `${img.height}px`;
      face.landmarks.map((landmark) => {                    
        landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
        landmark.locations.map((point) => {          
          return `${scaleX * point.x},${scaleY * point.y} `;
        }).join(' ')
      }" /></svg>`;          
      });
      div.before(landmarkSVG);
    });
  } catch(e) {
    console.error(e);
  }
});

Barkod algılama

Şekil Algılama API'sinin ikinci özelliği barkod algılamadır. Daha önce benzer şekilde, bu sayfa gibi barkodlar içeren bir sayfaya ihtiyacımız var. Tarayıcıda açtığınızda, çeşitli QR kodlarının çözülmüş olduğunu görürsünüz. Bunun nasıl yapıldığını görmek için Glitch projesini, özellikle de script.js dosyasını yeniden düzenleyin veya düzenleyin.

Daha dinamik bir şey isterseniz, Google Görsel Arama'yı tekrar kullanabiliriz. Bu sefer tarayıcınızda, gizli bir sekmede veya misafir modunda bu Google Arama sonuçları sayfasına gidin. Şimdi aşağıdaki snippet'i Chrome Geliştirici Araçları Konsolu sekmesine yapıştırın. Kısa bir süre sonra, tanınan barkodlara ham değer ve barkod türü ile not eklenir.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const barcodes = await new BarcodeDetector().detect(img);
    barcodes.forEach(barcode => {
      const div = document.createElement('div');
      const box = barcode.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.textContent = `${barcode.rawValue}`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Metin algılama

Şekil Algılama API'sinin son özelliği metin algılamadır. Artık ayrıntılı incelemeyi biliyorsunuz: Google Kitaplar tarama sonuçlarını içeren bu sayfa gibi, metin içeren resimlerin olduğu bir sayfaya ihtiyacımız var. Desteklenen tarayıcılarda, metnin tanındığını ve metin geçişlerinin etrafında sınırlayıcı bir kutu çizildiğini görürsünüz. Bunun nasıl yapıldığını görmek için Glitch projesini, özellikle de script.js dosyasını yeniden düzenleyin veya düzenleyin.

Bunu dinamik olarak test etmek için gizli bir sekmede veya misafir modunda bu Arama sonuçları sayfasına gidin. Şimdi aşağıdaki snippet'i Chrome Geliştirici Araçları Konsolu sekmesine yapıştırın. Biraz bekledikten sonra metnin bir kısmı tanınacak.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const texts = await new TextDetector().detect(img);
    texts.forEach(text => {
      const div = document.createElement('div');
      const box = text.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.innerHTML = text.rawValue;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Geri bildirim

Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:

Bu API'nin kullanımı kolaydı mı?

Evet

Hayır

Örneği çalıştırmak için aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa geri bildirim sağlayın. Teşekkürler!

Web Share Target API, yüklü web uygulamalarının paylaşım hedefi olarak işletim sistemine kaydolmasını sağlar. Bu paylaşım, Web Share API'den veya işletim sistemi düzeyinde paylaş düğmesi gibi sistem etkinliklerinden paylaşılan içerik alır.

İlk adım olarak, paylaşımda bulunabileceğiniz bir PWA'ya ihtiyacınız vardır. Bu kez Airhorner (Neyse ki) işi yapmıyor, ancak Web Paylaşımı Hedef demo uygulaması arkanızda. Uygulamayı cihazınızın ana ekranına yükleyin.

Ardından, Google Fotoğraflar'daki bir fotoğraf gibi paylaşacağınız bir şey var. Paylaş düğmesini kullanın ve paylaşım hedefi olarak Albüm PWA'yı seçin.

Uygulama simgesine dokunduğunuzda doğrudan Albüm PWA'ya ulaşırsınız ve fotoğraf hemen karşınıza gelir.

Peki bu nasıl mümkün olacak? Bunu öğrenmek için Albüm PWA'ının web uygulaması manifestini keşfedin. Web Share Target API'sinin çalışacak şekilde yapılandırılması, manifest dosyasının "share_target" alanında, "action" alanında, "params" içinde listelenen parametrelerle süslenmiş bir URL'ye işaret eder.

Ardından, paylaşım tarafı, bu URL şablonunu uygun şekilde doldurur (bir paylaşım işlemi aracılığıyla etkinleştirilir veya Web Paylaşımı API'sini kullanarak geliştirici tarafından programatik olarak kontrol edilir). Böylece alıcı taraf, parametreleri ayıklayabilir ve bunlarla birlikte bir şeyler gösterebilir.

{
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["audio/*", "image/*", "video/*"]
    }]
  }
}

Geri bildirim

Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:

Bu API'nin kullanımı kolaydı mı?

Evet

Hayır

Örneği çalıştırmak için aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa geri bildirim sağlayın. Teşekkürler!

Pilin tükenmesini önlemek için çoğu cihaz boşta kaldığında hızlı şekilde uyku moduna geçer. Bu işlem çoğu zaman yeterli olsa da bazı uygulamaların işlerini tamamlayabilmek için ekranı veya cihazı uyanık tutmaları gerekir. Wake Lock API, cihazın kararmasını ve kilitlenmesini engellemek ya da cihazın uyku moduna geçmesini önlemek için bir yol sağlar. Bu işlev, şu ana kadar yerel uygulama gerektiren yeni deneyimleri mümkün kılıyor.

Ekran koruyucu ayarlama

Wake Lock API'yi test etmek için öncelikle cihazınızın uyku moduna geçeceğinden emin olmalısınız. Bu nedenle, işletim sisteminizin tercih bölmesinde istediğiniz ekran koruyucuyu etkinleştirin ve 1 dakika sonra başladığından emin olun. Cihazınızın yalnızca bu süre boyunca olduğu gibi bırakıldığından emin olun (bunun can sıkıcı bir durum olduğunu biliyoruz). Aşağıdaki ekran görüntüleri macOS'u göstermektedir, ancak bu özelliği elbette mobil Android cihazınızda veya desteklenen herhangi bir masaüstü platformda deneyebilirsiniz.

Ekran uyanık kalma kilidi ayarlama

Artık ekran koruyucunuzun çalıştığını bildiğinize göre, ekran koruyucunun işini yapmasını engellemek için "screen" türünde bir uyanık kalma kilidi kullanabilirsiniz. Uyanık kalma kilidi demo uygulamasına gidin ve Etkinleştir screen Uyandırma Kilidi onay kutusunu tıklayın.

Bu noktadan itibaren etkin olan bir uyanık kalma kilidi etkin. Cihazınızı bir dakika boyunca temassız bırakacak kadar sabırlıysanız artık ekran koruyucunun hiç başlamadığını görürsünüz.

Bu düğme nasıl çalışıyor? Bunu öğrenmek için Uyandırma Kilidi demo uygulamasında Glitch projesini ziyaret edebilir ve script.js sayfasına göz atabilirsiniz. Kodun genel özeti aşağıdaki snippet'te bulunmaktadır. Yeni bir sekme açın (veya açık olan herhangi bir sekmeyi kullanın) ve aşağıdaki kodu bir Chrome Geliştirici Araçları konsoluna yapıştırın. Pencereyi tıkladığınızda, tam olarak 10 saniye boyunca etkin olan bir uyanık kalma kilidi görürsünüz (konsol günlüklerine bakın) ve ekran koruyucunuz başlatılmamalıdır.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
  let wakeLock = null;
  
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      wakeLock.addEventListener('release', () => {        
        console.log('Wake Lock was released');                    
      });
      console.log('Wake Lock is active');      
    } catch (e) {      
      console.error(`${e.name}, ${e.message}`);
    } 
  };

  requestWakeLock();
  window.setTimeout(() => {
    wakeLock.release();
  }, 10 * 1000);
}

Geri bildirim

Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:

Bu API'nin kullanımı kolaydı mı?

Evet

Hayır

Örneği çalıştırmak için aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa geri bildirim sağlayın. Teşekkürler!

Hepimizin heyecan verici bir API'si Contact Selecter API'si. Bir web uygulamasının, cihazın yerel kişi yöneticisindeki kişilere erişmesine olanak tanır. Böylece web uygulamanız kişilerinizin adlarına, e-posta adreslerine ve telefon numaralarına erişebilir. Yalnızca bir veya birden fazla kişinin mi yoksa tüm alanların mı yoksa ad, e-posta adresi ve telefon numarası alt kümesinin yalnızca tamamını mı istediğinizi belirtebilirsiniz.

Gizlilikle ilgili dikkat edilmesi gereken noktalar

Seçici açıldıktan sonra, paylaşmak istediğiniz kişileri seçebilirsiniz. Bilinçli olan "tümünü seç" seçeneği olmadığını fark edeceksiniz. Paylaşımın bilinçli bir karar olmasını istiyoruz. Benzer şekilde erişim sürekli değil, tek seferlik bir karardır.

Kişilere erişme

Kişilere erişim oldukça kolaydır. Seçici açılmadan önce, istediğiniz alanları (seçenekler name, email ve telephone) ve birden fazla kişiye mi yoksa yalnızca bir kişiye mi erişmek istediğinizi belirtebilirsiniz. Demo uygulamasını açarak bu API'yi bir Android cihazda test edebilirsiniz. Kaynak kodunun ilgili bölümü esasen aşağıdaki snippet'tir:

getContactsButton.addEventListener('click', async () => {
  const contacts = await navigator.contacts.select(
      ['name', 'email'],
      {multiple: true});
  if (!contacts.length) {
    // No contacts were selected, or picker couldn't be opened.
    return;
  }
  console.log(contacts);
});

Metin kopyalama ve yapıştırma

Şimdiye kadar, görüntüleri sistem panosuna programatik olarak kopyalayıp yapıştırmanın bir yolu yoktu. Yakın zamanda Async Clipboard API'sine resim desteği ekledik.

Böylece resimleri kopyalayıp yapıştırabilirsiniz. Yenilikler, panoya resim de yazabilmenizdir. Eşzamansız pano API'sı, bir süredir metnin kopyalanıp yapıştırılmasını destekliyordu. navigator.clipboard.writeText() işlevini çağırarak metni panoya kopyalayabilir ve daha sonra navigator.clipboard.readText() işlevini çağırarak bu metni yapıştırabilirsiniz.

Resim kopyalama ve yapıştırma

Artık panoya resim de yazabilirsiniz. Bunu yapmak için, resim verilerini pano öğesi oluşturucuya ileteceğiniz bir blob olarak kullanmanız gerekir. Son olarak, navigator.clipboard.write() işlevini çağırarak bu pano öğesini kopyalayabilirsiniz.

// Copy: Writing image to the clipboard
try {
  const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

Resmi panodan yapıştırmak, epey önemlidir ancak aslında blob'u pano öğesinden geri almaktan oluşuyor. Birden fazla web sitesi olabilir. Bu nedenle, ilginizi çekene kadar bunlardan bazılarını incelemeniz gerekir. Güvenlik nedenlerinden dolayı, bu resim şu anda PNG resimleriyle sınırlıdır, ancak ileride daha fazla resim biçimi desteklenebilir.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}

Bu API'nin kullanımını bir demo uygulamasında görebilirsiniz. İlgili kaynak koddan ilgili snippet'ler yukarıya yerleştirilmiştir. Resimleri panoya kopyalamak izin alınmadan yapılabilir, ancak panodan yapıştırma işlemi için erişim izni vermeniz gerekir.

Erişim izni verdikten sonra resmi panodan okuyabilir ve uygulamaya yapıştırabilirsiniz:

Tebrikler, codelab'in sonuna geldiniz. Yine bu API'lerin çoğunun devam etmekte olduğunu ve aktif şekilde üzerinde çalışıldığını hatırlatmak isteriz. Bu nedenle ekip, görüşlerinizi yalnızca sizgibi kişilerle etkileşim kurmanız için bu API'leri doğru şekilde sunabilmemize gerçekten yardımcı oluyor.

Ayrıca, Özellikler açılış sayfamıza sık sık göz atmanızı öneririz. Makaleyi güncel tutacağız ve üzerinde çalıştığımız API'ler ile ilgili tüm ayrıntılı makaleleri işaretçimiz olacaktır. Harika olun!

Tom ve Tüm Özellikler Ekibi 🐡

Web Özellikleri kod laboratuvarı Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.