浏览器推送网站通知

(English version is down below)

Python/NodeJS 库依赖

推送脚本(python) 推送脚本(NodeJS)

订阅网页端

简介

推送脚本(python)参数见：https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#parameters

其中函数标题 Title 为字符串类型，Options 为字典类型，使用时需要预先设定环境变量SUBSINFO为订阅码。

通过这里的订阅网页端你可以订阅我的网站的浏览器推送消息，获取到订阅码。随后你就可以使用订阅码将消息通过浏览器通知的形式推送到安卓/Linux/Windows/Mac 等通知栏处(IOS 暂不支持)。即使你关闭了网页，你仍然可以收到通知。

如果你需要从你自己的服务器发送消息，你可以使用这里的推送工具库

网站使用的 VAPID Keys

公钥: BOHSZycLLiXBjp0djrpD6vbzVX4g7D1QcW4cb1UonDcDYu6ewOXJ4qcz-e3J3d2VpjHgm0tHnZRjoGTv7SRJl7M

私钥: tUCZ-8DGMlUhr3ntyN4PQoDbALJSBnv8yZXhi4XX1iI

注意

建议选用最新版谷歌 Chrome、微软 Edge、Mozilla Firefox。

请不要告诉别人你的订阅码，以防被骚扰。另外你随时可以通过按钮关闭开启浏览器推送来重新生成订阅码。

由于安卓端 Chrome、Edge、Firefox 浏览器订阅和接收打卡消息时使用 FCM(Firebase Cloud Messaging)，所以请确保设备访问谷歌服务通畅，并且通常需要安装好相关谷歌服务才能使用。如点击Enable Push Message后，出现错误DOMException: Registration failed - push service error，则除了网络问题，请确保浏览器为谷歌 Play 商店下载的最新版，其它原因一般为你的 ROM 版本不支持 FCM 推送服务，建议安装谷歌框架或者刷国际版 ROM 之后再试。

华为/荣耀手机如果安装了谷歌框架后还不支持 FCM 推送服务可以参考这篇文章

应用: 每日天气预报推送

每日天气预报推送工作流

这里使用 GitHub Actions，每日中午 12 点自动运行脚本，推送当日天气。

如果你也想使用，请在 Fork 本仓库之后，创建两个 Actions Secrets，一个 Name 为LOCATION，value 为天气预报地点；另一个 Name 为SUBSINFO，value 为你的订阅码。

GitLab: https://gitlab.com/HollowMan6/Site-Notifications

也可以使用 GitLab Pipeline CI，同理创建两个 CI/CD Variables。

Github Actions Workflow 自行配置工作流

你可以自行创建一个仓库并自行配置工作流进行使用，该工作流可以自行定义消息，也可以进行天气预报推送。示例工作流文件

输入

必须

• SUBSINFO: 你的网站订阅码

可选

• LOCATION: 天气预报地点(该输入标志工作流进行天气预报报道)
• TITLE: 通知标题(该输入标志工作流进行自定义通知推送)
• OPTIONS: 通知选项(该输入仅对自定义通知推送起效)

示例

- name: Push Browser Notification and Daily Weather Report
  uses: HollowMan6/Site-Notifications@main
  with:
    SUBSINFO: ${{ secrets.SUBSINFO }}
    LOCATION: ${{ secrets.LOCATION }}
    TITLE: ${{ secrets.TITLE }}
    OPTIONS: ${{ secrets.OPTIONS }}

Browser Website Notification

Python / NodeJS library dependency

Web push Script(python) Web push Script(NodeJS)

Subscription Page

Introduction

See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#parameters for Web push Script(python) Parameters.

The function's title being the string type, options being dictionary type. You have to pre-set environment variable SUBSINFO as the Subscription Code.

Through the subscription page you can subscribe to my website's notification, then use the Subscription Code to directly push the message to the Notifications of Android, Linux, Windows, Mac, and etc. (IOS not supported currently) through your browser's Site Notifications. Even if you close this website, you can still receive notifications you sent.

To send push messages from your own server, use one of the web push libraries available.

VAPID Keys for this website

Public: BOHSZycLLiXBjp0djrpD6vbzVX4g7D1QcW4cb1UonDcDYu6ewOXJ4qcz-e3J3d2VpjHgm0tHnZRjoGTv7SRJl7M

Private: tUCZ-8DGMlUhr3ntyN4PQoDbALJSBnv8yZXhi4XX1iI

Note

It is recommended to select the latest version of Google Chrome, Microsoft edge and Mozilla Firefox.

For Users in 🇨🇳 Mainland China, because the Chrome, Edge and Firefox for Android browsers uses FCM (firebase Cloud Messaging) to push, you usually need to make sure you can visit Google Service, install relevant Google services before you can use it. For example, after clicking Enable Push Message, when the error DOMException: Registration failed - push service error occurs, except from network problems, please make sure you download latest version from Google Play Store, otherwise generally it's caused by your ROM version not supporting FCM push service. It is recommended to install Google framework or use the Global ROM version and try again.

If your phone is Huawei or Honor phone and does not support FCM push service after installing Google framework (GMS), please refer to this video (in Bahasa Indonesia but can just follow gesture).

Application: Daily Weather Report

Daily Weather Report Workflow

Here use GitHub Actions, executing script 12 a.m. CST everyday to push Weather Report Notification.

If you also want to use it, please create two Actions Secrets after forking. One name is LOCATION, and value is the weather forecasting location; the other name is SUBSINFO, and value is your subscription code.

GitLab: https://gitlab.com/HollowMan6/Site-Notifications

You can also use GitLab Pipeline CI, creating two CI/CD Variables。

Github Actions Workflow Self-Configure Workflow

You can create your own repository and configure your own workflow to use, this workflow can send customized notifications and also weather report. Example Workflow YAML File

Input

Required

• SUBSINFO: Your Website Subscription Code

Optional

• LOCATION: Weather Forecast Location (This input marks push Weather Forecast Notification)
• TITLE: Notification Title (This input marks push Customized Notification)
• OPTIONS: Notification Options (This input only works for Customized Notification)

Example

- name: Push Browser Notification and Daily Weather Report
  uses: HollowMan6/Site-Notifications@main
  with:
    SUBSINFO: ${{ secrets.SUBSINFO }}
    LOCATION: ${{ secrets.LOCATION }}
    TITLE: ${{ secrets.TITLE }}
    OPTIONS: ${{ secrets.OPTIONS }}