تنفيذ واجهة برمجة التطبيقات للشارات (Badging API)

[Falco]

There is a new web API that allows installed web apps to show a icon to warn the user about pending notifications.

Explainer: badging/explainer.md at main · w3c/badging · GitHub

Currently, this is only available for websites who sign up to the trial, and only on Windows and Mac OS using Google Chrome. (Meta has this enabled on Light and Dark Themes).

This is how the looks on Windows:

Before a notification

After a notification

[codinghorror (Jeff Atwood)]

Here’s how to test this in Windows on Chrome (latest version 73, just released today):

• go to the three dots menu at the upper right in Chrome
• select More Tools → Create Shortcut
• tick the “Open as window” checkbox
• select Create

Like so

I’ll try it out … it works!

[david (David Taylor)]

This is very cool! On mac, it’s the same process to install the app. Then when you launch it you get a super minimal PWA window:

And the notification badge in the dock:

[sam (Sam Saffron)]

The huge omission here is that there is no back/forward or reload button. Kind of wish we had some minimal responsive PWA panel that we add when we detect PWA cause you can figure this out this is going on from JavaScript.

Step 1 here of course is a theme component.

[Falco]

You can also detect it from CSS, here is one thing I added as a theme-component to the Dark Theme here in Meta:

@media all and (display-mode: standalone) {
    
    //blink-based browsers (don't work on safari, which exposes a JS only API for this)
    ::-webkit-scrollbar {
        background: $secondary;
    }
    ::-webkit-scrollbar-thumb {
        background: $header_primary-medium;
    }
    ::-webkit-scrollbar-corner {
        background: $secondary;
    }
    
    //firefox
    body {
        scrollbar-color: $header_primary-medium $secondary;
    }
}

[anon82467725]

يوم جديد، وميزة جديدة! كما هو الحال مع أي ميزة PWA جديدة، أتساءل عن مدى فعاليتها مع Discourse…

Chrome OS 91 will add notification badges for web apps

أنا متحمس لتجربتها. تبدو إشعارات الشارات لموقع Discourse PWA على Chrome OS مذهلة تمامًا!

[Falco]

أضفنا دعمًا لواجهة برمجة التطبيقات الخاصة بشارات التطبيقات في أوائل عام 2019، لكننا لا نستخدمها عندما تكون التطبيق مغلقًا في الوقت الحالي، حيث لم تكن مدعومة آنذاك.

[anon82467725]

@فالكو، مشاركة:7، موضوع:111631

لا نقوم باستدعائه عندما يكون التطبيق مغلقًا في الوقت الحالي، حيث لم يكن ذلك مدعومًا آنذاك.

وهذا يتغير الآن، أليس كذلك؟

[Falco]

يسعدني أن أفيد بأن العمل الذي قمنا به هنا يمنحنا أيضًا شارات على أحدث نظام iOS

[merefield (Robert)]

فالكو، هل هناك احتمال أن يكون هناك سلوك وامض أو تغيير في لون الخلفية إذا تغيرت قيمة الإشعار؟ (تم الإلغاء بنقرة مفتوحة) أنا لست على دراية بواجهة برمجة التطبيقات هنا.

[Tris20 (Tristan)]

@merefield

فالكو، هل هناك احتمال أن يكون هناك سلوك وامض أو تغيير في لون الخلفية إذا تغيرت قيمة الإشعار؟

أود ذلك أيضًا. مفيد بشكل خاص في الحالات التي يكون فيها أيقونة العلامة التجارية داكنة ولا يظهر الإشعار بشكل جيد.

بقدر ما أكره MSTeams، فإن التوهج البرتقالي اللطيف مقبول كمثال. شيء من هذا القبيل سيكون لمسة لطيفة جدًا.

أكثر من مجرد كروم:

تحديث سريع للمتصفحات المدعومة:

Brave: يعمل بنفس طريقة Chrome

Firefox: يتطلب إضافة

Edge: يعمل بنفس طريقة كروم، ويوفر لك خيار بدء تشغيل التطبيق تلقائيًا عند تثبيته:

لبدء تشغيل التطبيق تلقائيًا في كروم

1. انقر على النقاط الثلاث

2. انقر على معلومات التطبيق
   

   

3. انقر على الإعدادات (Einstellung بالألمانية)
   

   

4. قم بالتكوين وفقًا لذلك. في هذه الحالة، “بدء تشغيل التطبيق عند تسجيل الدخول” هو الخيار الذي نبحث عنه