Frontend Weekly 2025-05-16

2025-05-16

Tech

Frontend weekly

/

Material 3

/

Safari

/

Figma

Safari 18.5 リリース#

日付：2025 年 5 月 12 日

Safari 18.5 がリリース。Declarative Web Push が macOS で利用可能になった他、バグ修正や Web Extensions の改善も行われている。

出展：WebKit Features in Safari 18.5

Declarative Web Push on macOS#

Declarative Web Push が macOS で利用可能になった。Service Worker 不要で Web Push 通知を実装できる。バッテリー効率とプライバシーが向上し、標準化された JSON 形式で通知を送信可能。従来の Web Push と異なり、通知表示の失敗による制限やペナルティが不要。未対応ブラウザにも後方互換性あり。

次のように Service Worker を使わずに Web Push Subscription を管理できる。

1
const subscription = await window.pushManager.subscribe({
2
  userVisibleOnly: true,
3
  applicationServerKey: arrayForPublicKey,
4
});

通知は次のように標準化された JSON 形式が用いられる。これにより未対応ブラウザでは従来通り Service Worker で処理される

1
{
2
  // RFC 8030に由来する識別子
3
  "web_push": 8030,
4
  "notification": {
5
    "title": "Webkit.org — Meet Declarative Web Push",
6
    "lang": "en-US",
7
    "dir": "ltr",
8
    "body": "Send push notifications without JavaScript or service worker!",
9
    // 通知クリック時の遷移先URL
10
    "navigate": "https://webkit.org/blog/16535/meet-declarative-web-push/",
11
    "silent": false,
12
    "app_badge": "1"
13
  }
14
}

参考：

Material 3 Expressive 登場#

日付：2025 年 5 月 13 日

Android 16 と Wear OS 6 で Material 3 Expressive が導入。端末のパーソナライズ性が大幅に向上し、ダイナミックカラーや強調されたタイポグラフィ、スムーズなアニメーションが特徴。通知やクイック設定のカスタマイズ性も強化され、Google アプリ全体にビジュアルの一貫性が広がる。

Material 3 Expressive は Material Design 3 の進化形であり、「M4」ではなく既存 M3 の拡張版。より感情に響く UX を目指し、色・形・動きが大胆に進化。ユーザーリサーチを重ね、主要 UI 要素の視認性や操作性も向上している。

次の変更が行われている。

TopAppBar が AppBar に変更。Search app bar 追加、Medium/Large app bar 廃止
ボタンや FAB のサイズ・形状バリエーション拡充
新しい Toolbar や FAB menu、Split buttons、Loading indicator、Button groups など新規コンポーネント追加
モーションは物理ベースの Spring アニメーションを導入し、より自然で滑らかな動きに
タイポグラフィやシェイプも強調・多様化

出展：Building with Material 3 Expressive