ใหม่ใน Chrome 93

Pete LePage

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

  • ตอนนี้คุณสามารถโหลดสไตล์ชีต CSS ด้วยคำสั่ง import ได้แล้ว เช่นเดียวกับโมดูล JavaScript
  • PWA ที่ติดตั้งสามารถลงทะเบียนเป็นตัวแฮนเดิล URL ซึ่งช่วยให้ผู้ใช้ข้ามไปยัง PWA ได้โดยตรง
  • Multi-Screen Window Placement API ได้รับการอัปเดตตามความคิดเห็นของคุณ และเริ่มช่วงทดลองใช้จากต้นทางครั้งที่ 2
  • งาน PWA Summit จะจัดขึ้นในวันที่ 6-7 ตุลาคม
  • และยังมีอื่นๆ อีกมากมาย

ผม Pete LePage ทำงานและถ่ายทำจากที่บ้าน มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 93 กัน

สคริปต์โมดูล CSS

ตอนนี้คุณสามารถโหลดสไตล์ชีต CSS ด้วยคำสั่ง import ได้เช่นเดียวกับโมดูล JavaScript จากนั้นจะใช้สไตล์ชีตกับเอกสารหรือรูท Shadow ได้ในลักษณะเดียวกับสไตล์ชีตที่สร้างได้

ฟีเจอร์สคริปต์โมดูล 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

Multi-Screen Window Placement 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 Summit

PWA Summit กำลังจะจัดขึ้นในเดือนตุลาคมนี้ ซึ่งเป็นการประชุมออนไลน์แบบไม่เสียค่าใช้จ่ายที่มุ่งเน้นการช่วยให้ทุกคนประสบความสำเร็จด้วย Progressive Web App งานประชุม PWA Summit เป็นความร่วมมือระหว่างผู้คนจากบริษัทต่างๆ ที่เกี่ยวข้องกับการสร้างเทคโนโลยี PWA ได้แก่ Google, Intel, Microsoft และ Samsung

มีเนื้อหาและการพูดคุยที่ยอดเยี่ยมมากมาย ดูข้อมูลเพิ่มเติมและลงทะเบียนได้ที่ PWASummit.org

และอีกมากมาย

แน่นอนว่ายังมีอีกมากมาย

  • Flexbox และรายการ Flexbox ได้เพิ่มการรองรับคีย์เวิร์ดการจัดข้อความ ได้แก่ start, end, self-start, self-end, left และ right
  • ตอนนี้ Async Clipboard 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