สิ่งที่จำเป็นต้องทราบมีดังนี้
- ตอนนี้คุณสามารถโหลดสไตล์ชีต CSS ด้วยคำสั่ง
import
เช่นเดียวกับโมดูล JavaScript - PWA ที่ติดตั้งจะลงทะเบียนเป็นตัวแฮนเดิล URL ได้ ช่วยให้ผู้ใช้ข้ามไปที่ PWA ได้โดยตรง
- API ตำแหน่งหน้าต่างหลายหน้าจอได้รับการอัปเดตตามความคิดเห็นของคุณแล้ว และเริ่มช่วงทดลองใช้จากต้นทางครั้งที่ 2
- การประชุมสุดยอด PWA จะจัดขึ้นในวันที่ 6-7 ตุลาคม
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage ทำงานและถ่ายทำ จากที่บ้าน มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 93
สคริปต์โมดูล CSS
ตอนนี้คุณสามารถโหลดสไตล์ชีต CSS ด้วยคำสั่ง import
เช่นเดียวกับโมดูล JavaScript จากนั้น คุณจะสามารถใช้สไตล์ชีตกับเอกสารหรือรากเงาในลักษณะเดียวกับสไตล์ชีตที่สร้างได้
ฟีเจอร์สคริปต์โมดูล CSS ใหม่เหมาะอย่างยิ่งสำหรับองค์ประกอบที่กำหนดเอง สิ่งที่แตกต่างจากการใช้ CSS จาก JavaScript แบบอื่นๆ คือไม่จำเป็นต้องสร้างองค์ประกอบหรือยุ่งยากกับสตริง JavaScript ของข้อความ CSS
หากต้องการใช้งาน ให้นำเข้าสไตล์ชีตด้วย assert {type: 'css'}
จากนั้นนำไปใช้กับ document
หรือ shadowRoot
โดยการเรียก adoptedStyleSheets
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
แต่โปรดระวังหากคุณปล่อย assert
ไว้ ระบบจะถือว่าไฟล์เป็น JavaScript และจะไม่ทำงาน
ดูรายละเอียดทั้งหมดได้ที่การใช้สคริปต์โมดูล CSS เพื่อนำเข้าสไตล์ชีตที่ web.dev
API ตำแหน่งหน้าต่างหลายหน้าจอ
สำหรับบางแอป การเปิดหน้าต่างใหม่และการวางในตำแหน่ง หรือจอแสดงผลที่เจาะจงเป็นฟีเจอร์สำคัญ เช่น เวลาใช้สไลด์เพื่อนำเสนอ ผมต้องการให้สไลด์แสดงแบบเต็มหน้าจอในจอแสดงผลหลัก และแสดงบันทึกของผู้บรรยายในจอแสดงผลอีกเครื่องหนึ่ง
Multi-Screen Window Placement API ช่วยให้สามารถแจกแจงจอแสดงผลที่เชื่อมต่อกับเครื่องของผู้ใช้และวางหน้าต่างไว้บนหน้าจอที่เจาะจงได้ นี่เป็นช่วงทดลองใช้จากต้นทางครั้งที่ 2 และเราได้ทำการเปลี่ยนแปลงหลายอย่างตามความคิดเห็นของคุณ
คุณสามารถตรวจสอบว่าอุปกรณ์มีหน้าจอเชื่อมต่ออยู่มากกว่า 1 หน้าจอหรือไม่ โดยทำดังนี้
const isExtended = window.screen.isExtended;
// returns true/false
แต่ฟังก์ชันหลักอยู่ใน window.getScreens()
ซึ่งจะให้รายละเอียดทั้งหมดเกี่ยวกับจอแสดงผลที่แนบมา
const screens = await window.getScreens();
// returns
// {
// currentScreen: {...}
// oncurrentscreenchange: null
// onscreenschange: null
// screens: [{...}, {...}]
// }
เช่น คุณสามารถระบุหน้าจอหลักแล้วใช้ requestFullscreen()
เพื่อแสดงองค์ประกอบบนหน้าจอนั้นได้
try {
const screens = await window.getScreens();
const primary = screens.filter((screen) => screen.primary)[0];
await elem.requestFullscreen({ screen: primary });
} catch (err) {
console.error(err);
}
นอกจากนี้ยังช่วยบอกวิธีสังเกตการเปลี่ยนแปลง เช่น เมื่อจอแสดงผลใหม่เสียบปลั๊กหรือถอดออก
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;
}
});
อ่านบทความของ Tom การจัดการจอแสดงผลหลายจอด้วย Multi-Screen Window Placement API ใน web.dev เพื่อดูข้อมูลเจาะลึกยิ่งขึ้น
รอบการเผยแพร่สั้นลง
เมื่อเดือนมีนาคม เราได้ประกาศแผนที่จะลดช่วงเปิดตัว และจัดส่ง Chrome เวอร์ชันใหม่ทุกๆ 4 สัปดาห์
เวลาดังกล่าวมาถึงแล้ว และเราจะจัดส่ง Chrome 94 ในวันที่ 21 กันยายน คุณสามารถดูวันที่วางแผนเปิดตัวแต่ละเวอร์ชันได้ในปฏิทิน Chrome
ฟีเจอร์ใหม่ของ PWA
ถ้าคุณกำลังสร้าง Progressive Web App มีช่วงทดลองใช้จากต้นทางใหม่ 2 รายการที่ให้คุณลองใช้
เครื่องจัดการ URL สำหรับ PWA
หากติดตั้ง PWA ไว้แล้วและคุณคลิกลิงก์ไปยัง PWA ดังกล่าว คุณอาจต้องการเปิดใน PWA ไม่ใช่แท็บเบราว์เซอร์
เมื่อระบุ url_handlers
ในไฟล์ Manifest ของเว็บแอป และเพิ่มไฟล์ web-app-origin-association
ลงในไดเรกทอรี .well-known/
คุณจะบอกเบราว์เซอร์ได้ว่าหากผู้ใช้คลิกลิงก์ไปยัง PWA ไฟล์ควรจะเปิดภายใน PWA ที่ติดตั้ง
ตัวอย่าง url_handlers
ในไฟล์ manifest.json
{
...
"url_handlers": [
{"origin": "https://music.example.com"}
]
}
ตัวอย่างไฟล์ web-app-origin-association
{
"web_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}
และด้วยการยืนยันเพิ่มเติมอีกเล็กน้อย คุณยังสามารถลิงก์แฮนเดิล PWA จากแหล่งที่มาอื่นๆ ที่คุณเป็นเจ้าของได้ด้วย
รายละเอียดทั้งหมดเกี่ยวกับช่วงทดลองใช้จากต้นทางจะอยู่ใน PWA เป็นเครื่องจัดการ URL ใน web.dev
การวางซ้อนการควบคุมหน้าต่าง
การวางซ้อนการควบคุมหน้าต่างจะขยายพื้นที่ของไคลเอ็นต์ให้ครอบคลุมทั้งหน้าต่าง รวมถึงแถบชื่อและปุ่มควบคุมหน้าต่าง เช่น ปุ่มปิด ขยายใหญ่สุด และย่อขนาด
คุณใช้ฟีเจอร์นี้เพื่อทำให้ PWA ที่ติดตั้งมีลักษณะคล้ายกับแอปอื่นๆ ที่ติดตั้งไว้ได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับช่วงทดลองใช้จากต้นทางได้ที่ ปรับแต่งการวางซ้อนการควบคุมหน้าต่างสำหรับแถบชื่อของ PWA
การประชุมสุดยอด PWA
PWA Summit ใกล้เข้ามาแล้วในเดือนตุลาคม เป็นการประชุมออนไลน์ที่ไม่มีค่าใช้จ่ายซึ่งมุ่งเน้นไปที่การช่วยให้ทุกคนประสบความสำเร็จในการใช้ Progressive Web App การประชุมสุดยอด PWA เป็นการทำงานร่วมกันระหว่างผู้คนจากหลายบริษัทที่เกี่ยวข้องกับการสร้างเทคโนโลยี PWA ได้แก่ Google, Intel, Microsoft และ Samsung
มีการพูดและเนื้อหาดีๆ มากมาย ดูข้อมูลเพิ่มเติมและลงทะเบียนได้ที่ PWASummit.org
และอีกมากมาย
แน่นอน ยังมีคำถามอีกมากมาย
- รายการ Flexbox และ Flexbox ได้เพิ่มการรองรับคีย์เวิร์ดการจัดแนว ได้แก่
start
,end
,self-start
,self-end
,left
และright
- ตอนนี้ API คลิปบอร์ดที่ไม่พร้อมกันรองรับไฟล์ SVG แล้ว
- และระบบจะใช้แอตทริบิวต์
media
เมื่อตั้งค่าmeta
theme-color
เพื่อให้คุณระบุสีธีมที่แตกต่างกันสำหรับโหมดสว่างและโหมดมืดได้
<meta name="theme-color"
media="(prefers-color-scheme: light)"
content="white">
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="black">
อ่านเพิ่มเติม
ทั้งหมดนี้พูดถึงไฮไลต์สำคัญเพียงบางส่วน ไปที่ลิงก์ด้านล่างสำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 93
- มีอะไรใหม่ใน Chrome DevTools (93)
- การเลิกใช้งานและการนำ Chrome 93 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 93
- มีอะไรใหม่ใน JavaScript ใน Chrome 93
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
สมัครใช้บริการ
โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 94 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!