ใหม่ใน 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 จากนั้นจะใช้สไตล์ชีตกับเอกสารหรือรูทเงาในลักษณะเดียวกับสไตล์ชีตที่สร้างได้

ฟีเจอร์สคริปต์โมดูล 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
  • ตอนนี้ 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 แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ผมชื่อ Pete LePage และพร้อมที่จะมาแจ้งให้ทราบถึงสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 94 เปิดตัว