AMP

amp-web-push

Description

Allows users to subscribe to web push notifications.

 

Required Scripts

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

Supported Layouts

Ví dụ

Usage

Developers compose widgets that appear based on a user's subscription state. Widgets are composed of AMP elements and can be as simple as a button or a text link.

Clicking the subscription widget pops up a page prompting the user for notification permissions and signals the service worker (configured below) to subscribe the user to push in the background. Clicking the unsubscription widget signals the worker to unsubscribe the user from push in the background.

<!-- A subscription widget -->
<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.unsubscribe">
    Unsubscribe from Notifications
  </button>
</amp-web-push-widget>

Configuration

The amp-web-push component requires extra integration on your site. You will need to upload two HTML files (provided) on your site as well as an amp-web-push compatible service worker JavaScript file. These three files form the configuration described below.

<amp-web-push
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/service-worker.js"
></amp-web-push>

All properties are required, and all URLs must begin with the same origin (e.g. https://example.com).

Property Description
helper-iframe-url

Download helper-iframe.html here and upload it to your site.

The absolute URL, starting with https://, to the helper-iframe.html provided HTML file uploaded to your site.

This page enables communication between the AMP page and the service worker which subscribes and unsubscribes the user. This page also helps determines the notification permission status.

permission-dialog-url

Download permission-dialog.html here and upload it to your site.

The absolute URL, starting with https://, to the permission-dialog.html provided HTML file uploaded to your site.

This page opens as a pop up and prompts for notification permissions.

service-worker-url

The absolute URL, starting with https://, to the JavaScript service worker file uploaded to your site. Use a service worker compatible with amp-web-push.

If possible, make the service worker available at the root of your site (e.g. your-site.com/service-worker.js) instead of a subfolder. amp-web-push is restricted to working at the same folder level (subfolders included) the service worker is uploaded to unless the service worker is served with an HTTP response header of Service-Worker-Allowed: /.

This service worker runs in the background and subscribes and unsubscribes the user from notifications.

If you develop a custom push solution, see this example on how to make your service worker compatible with amp-web-push.

service-worker-scope (optional)

The scope of the service worker to be installed.

Attributes

visibility (required)

Describes when the widget is shown. The value can be one of unsubscribed, subscribed, or blocked.

Widgets are initially hidden while the user's subscription state is computed.

Validation

See amp-web-push rules in the AMP validator specification.

Bạn cần được trợ giúp thêm?

Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.

Truy cập Stack Overflow
Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Truy cập GitHub