ใหม่ใน Chrome 93

Pete LePage

สิ่งที่จำเป็นต้องทราบมีดังนี้

ฉันชื่อ 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

สมัครใช้บริการ

โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 94 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!