Web 货币化 API 的 Web 组件

<💰>Web 货币化组件</💰>

Web 货币化项目对独立 Web 的未来至关重要。让 Web 内容创作者无需广告或广告网络即可获得报酬，即使只是轻而易举，也蕴藏着巨大的潜力。

作为一种市场策略，它需要双方都参与进来。我毫不怀疑，内容制作者和网站所有者会乐意在他们的页面上添加元标签，以便潜在地赚取一些收入。难点在于说服普通网民为内容付费是值得的。但这是一项长期战略，所以现在是时候打好基础了。

“Grant for the Web”黑客马拉松是个好主意，它让开发者们参与进来，共同打造更优质的 Web 货币化体验，这将有助于简化网站货币化，并打造能够吸引用户开始进行小额支付的体验。作为一名 Web 开发者，我希望能够推动这一进程，而我发起的这个项目旨在帮助其他 Web 开发者轻松打造类似的货币化体验。

我建造了什么

（开始）用于 Web 货币化的 Web 组件集合，它通过您可能期望为 Web 货币化 API 实现的常见行为逐步增强网页。

第一个向世界发布的 Web 组件是<wm-ad-hider>（在 npm 上发布）。<wm-ad-hider>它取代了您网站的广告，并且仅在未检测到货币化时显示广告。

它基于webmonetization.org 上的删除广告示例，但实现起来非常简单，只需在页面上包含一个脚本即可：

<script src="https://unpkg.com/web-monetization-ad-hider@0.1.0/dist/wm-ad-hider.min.js" defer></script>

然后将您的广告代码包装在元素和<template>元素中：

<wm-ad-hider>
  <template>
    <!-- Your ad code goes here -->
  </template>
</wm-ad-hider>

当检测到 Web Monetization 并付款时，您的广告将不会显示。如果稍后开始获利，广告将会消失。

我选择使用 Web 组件进行构建，因为它们本身就是 Web 平台的一部分。它们没有依赖项，无需框架，使用起来也非常简单。

投稿类别：

基础技术

演示

您可以在我自己的网站上看到实际效果，我已经在那里部署了<wm-ad-hider>。只需访问任何博客文章（例如这篇关于我使用 ngrok 的 VSCode 扩展的文章）。如果您开始付款，广告就会消失。

代码链接

我是如何建造它的

我的灵感来源于Web Monetization 示例，以及我唯一发布的另一个 Web 组件。该组件是为了更轻松地使用 Web Share API 而构建的（您可以在此处查看GitHub 仓库<web-share-wrapper>）。该组件在运行时没有任何外部依赖。在开发时，它使用Rollup和Babel将其转换为浏览器友好的代码，并以多种格式提供，包括 CommonJS、ES 模块、浏览器的 UMD 以及最小化的 UMD。这样，任何开发人员都可以轻松地将其包含在应用程序中，无论他们喜欢以何种方式引用 JavaScript 文件。

其他资源/信息

这只是项目的开始。我正在寻找更多 Web 组件的创意和贡献者，以支持 Web 货币化工作。我希望使用 Web 组件进行这项工作能够受到各地开发者的欢迎。

我很想知道你对这个想法和第一个组件有什么看法！请在评论区留言告诉我。

祝愿参加黑客马拉松的所有人好运，并感谢 Grant for the Web 为改变网络运行方式所做的努力。