Şunları bilmeniz gerekir:
- Artık JavaScript modülleri gibi,
import
ifadeleri içeren CSS stil sayfalarını yükleyebilirsiniz. - Yüklenen PWA'lar, URL işleyicileri olarak kaydedilebilir. Böylece kullanıcılar doğrudan PWA'nıza erişebilir.
- Multi-Screen Window Placement API, geri bildirimleriniz doğrultusunda güncellendi ve ikinci bir kaynak denemesi başlattı.
- PWA Zirvesi 6-7 Ekim'de gerçekleşecek.
- Daha fazlası da var.
Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 93'te geliştiricilere yönelik yenilikleri görelim.
CSS Modülü Komut Dosyaları
Artık CSS stil sayfalarını JavaScript modülleri gibi import
ifadeleriyle yükleyebilirsiniz. Ardından stil sayfaları, belgeye veya gölge köklerine, oluşturulabilir stil sayfalarıyla aynı şekilde uygulanabilir.
Yeni CSS Modülü Komut Dosyaları özelliği, özel öğeler için idealdir. JavaScript'ten CSS uygulamanın diğer yollarının aksine, öğe oluşturmaya veya CSS metnindeki JavaScript dizelerini karıştırmaya gerek yoktur.
Bunu kullanmak için stil sayfasını assert {type: 'css'}
ile içe aktarın, ardından adoptedStyleSheets
yöntemini çağırarak document
veya shadowRoot
öğesine uygulayın.
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
Ancak dikkatli olun, assert
öğesini atlarsanız dosya JavaScript olarak işlenir ve çalışmaz.
Tüm ayrıntılar için web.dev'de Stil sayfalarını içe aktarmak için CSS Modülü Komut Dosyalarını kullanma başlıklı makaleye göz atın.
Birden Çok Ekran Pencere Yerleşimi API'si
Bazı uygulamalar için yeni pencereler açmak ve bunları belirli yerlere veya belirli ekranlara yerleştirmek önemli bir özelliktir. Örneğin, sunum yapmak için Slaytlar'ı kullanırken, slaytların birincil ekranda tam ekran, diğer ekranda ise konuşmacı notlarımın görünmesini istiyorum.
Multi-Screen Window Placement API, kullanıcının makinesine bağlı ekranları numaralandırmayı ve belirli ekranlara pencereler yerleştirmeyi mümkün kılar. Bu, ikinci kaynak denemesi ve geri bildirimleriniz doğrultusunda birkaç değişiklik yaptık.
Cihaza bağlı birden fazla ekran olup olmadığını hızlıca kontrol edebilirsiniz:
const isExtended = window.screen.isExtended;
// returns true/false
Ancak temel işlev, takılı ekranlarla ilgili tüm ayrıntıları sağlayan window.getScreens()
ürünündedir.
const screens = await window.getScreens();
// returns
// {
// currentScreen: {...}
// oncurrentscreenchange: null
// onscreenschange: null
// screens: [{...}, {...}]
// }
Örneğin, birincil ekranı belirleyip bu ekranda bir öğeyi görüntülemek için requestFullscreen()
özelliğini kullanabilirsiniz.
try {
const screens = await window.getScreens();
const primary = screens.filter((screen) => screen.primary)[0];
await elem.requestFullscreen({ screen: primary });
} catch (err) {
console.error(err);
}
Ayrıca, örneğin yeni bir ekran takılıp çıkarıldığında yapılan değişiklikleri dinlemenizi de sağlayabilir.
const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
if (screens.screens.length !== numScreens) {
console.log('Screen count changed');
numScreens = screens.screens.length;
}
});
Daha ayrıntılı bilgi için Tom'un web.dev adresindeki Çoklu Ekran Penceresi Yerleşimi API'sini kullanarak birkaç ekranı yönetme başlıklı makaleye göz atın.
Sürüm döngüsü kısaltıldı
Mart ayında, sürüm döngüsünü kısaltma ve Chrome'un yeni sürümünü dört haftada bir kullanıma sunma planlarımızı duyurmuştuk.
O tarih geldi ve 21 Eylül'de Chrome 94 sürümünü kullanıma sunacağız. Her sürüm için planlanan yayın tarihlerini Chrome Takvim'de bulabilirsiniz.
Yeni PWA özellikleri
Progresif Web Uygulaması oluşturuyorsanız, göz atmanız gereken iki yeni kaynak denemesi vardır.
PWA'lar (Progresif Web Uygulaması) için URL işleyiciler
PWA'nız yüklüyse ve bu PWA'nın bağlantısını tıklarsanız muhtemelen bunun bir tarayıcı sekmesinde değil, PWA'da açılmasını istersiniz.
Web uygulaması manifestinizde url_handlers
'i belirtip .well-known/
dizininize web-app-origin-association
dosyası ekleyerek, tarayıcıya, bir kullanıcı PWA'nızın bağlantısını tıkladığında PWA'nın yüklü PWA içinde açılacağını bildirebilirsiniz.
manifest.json
dosyasında örnek url_handlers
:
{
...
"url_handlers": [
{"origin": "https://music.example.com"}
]
}
Örnek web-app-origin-association
dosyası:
{
"web_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}
Biraz ekstra doğrulama yaparak, sahip olduğunuz diğer kaynaklardan gelen PWA herkese açık kullanıcı adı bağlantılarını bile alabilirsiniz.
Kaynak denemesiyle ilgili tüm ayrıntıları web.dev'deki URL İşleyicileri olarak PWA'lar bölümünde bulabilirsiniz.
Pencere denetimleri yer paylaşımı
Pencere denetimleri yer paylaşımı, istemci alanını başlık çubuğu ve kapat, ekranı kapla ve küçült düğmeleri gibi pencere denetimi düğmeleri de dahil olmak üzere tüm pencereyi kaplayacak şekilde genişletir.
Yüklü PWA'nızın diğer yüklü uygulamalara daha benzer görünmesini sağlamak için bu özelliği kullanabilirsiniz.
Kaynak denemesi hakkında daha fazla bilgi için PWA'nızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme bölümüne göz atın.
PWA Zirvesi
PWA Zirvesi Ekim ayında gerçekleşecek. Bu, herkesin Progresif Web Uygulamaları ile başarıya ulaşmasına yardımcı olmaya odaklanan ücretsiz ve çevrimiçi bir konferanstır. PWA Zirvesi, PWA teknolojilerinin geliştirilmesinde yer alan çeşitli şirketlerin (Google, Intel, Microsoft ve Samsung) çalışanlarının ortak çalışmasıdır.
Çok sayıda harika konuşma ve içerik sizi bekliyor. PWASummit.org adresinden daha fazla bilgi edinebilir ve kaydolabilirsiniz.
Diğer ölçütler
Elbette dahası var.
- Flexbox ve flexbox öğelerine şu hizalama anahtar kelimeleri için destek eklendi:
start
,end
,self-start
,self-end
,left
veright
. - Eş zamansız pano API'si artık SVG dosyalarını destekliyor.
- Ayrıca,
meta
theme-color
ayarlanırkenmedia
özelliği dikkate alınır. Böylece, açık ve koyu modlar için farklı tema renkleri belirtebilirsiniz.
<meta name="theme-color"
media="(prefers-color-scheme: light)"
content="white">
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="black">
Daha fazla bilgi
Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 93'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.
- Chrome Geliştirici Araçları'ndaki yenilikler (93)
- Chrome 93 için desteğin sonlandırılması ve kaldırılması
- Chrome 93 için ChromeStatus.com güncellemeleri
- Chrome 93'te JavaScript'teki yenilikler
- Chromium kaynak deposu değişiklik listesi
Abone ol
Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Ben Pete LePage. Chrome 94 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım!