README

为 contao 提供渐进式 Web 应用支持的工具包。

此工具包仍处于测试阶段。如果您使用它，请提供反馈！

此工具包使用 PHP Web Push 库 来提供推送通知。

功能

• 为每个页面根创建并注册清单文件
• 为每个页面根创建并注册服务工作者
• 从后端发送自定义推送通知
• 设置离线回退页面
• 前端模块和内容元素以订阅推送通知
• 安装 PWA 按钮内容元素
• Encore Bundle 支持，包括资源预缓存
• 可扩展架构

设置

要求

• PHP >= 7.4
• Contao >=4.9
• Contao Head Bundle

对于 Web 推送通知

• Composer 包 "minishlink/web-push": "^8.0"（支持版本 5 到 8）
• PHP 扩展
  • gmp
  • mbstring
  • curl
  • openssl

安装

1. 通过 composer 或 contao 管理器安装

    composer require heimrichhannot/contao-pwa-bundle
   

2. 更新您的数据库

第一步

1. 您的页面模板（通常是 fe_page.html5）必须支持 Head Bundle。这意味着它必须在头部输出至少 $this->meta()。有关更多信息，请参阅 Head Bundle 说明书
2. 如果您想使用推送通知，请将 vapid 密钥添加到您的配置中（请参阅 设置 -> Vapidkeys）
3. 创建 PWA 配置（后端 -> 系统 -> PWA 配置）
4. 将配置添加到页面根（在页面设置中找到新的“渐进式 Web 应用”部分，选择是并选择您的配置）
   • 保存页面时，将生成页面清单和 Service Worker
5. 要提供注册推送通知的选项，请将推送订阅按钮内容元素或推送通知弹出前端模块添加到您的页面中。

推送通知

VAPID 密钥

您需要将您的服务器 vapid 密钥添加到您的配置文件中，通常在项目配置.yml 中。如果您还没有 vapid 密钥，您可以在 PWA Bundle 后端生成（Contao 后端 -> 系统 -> PWA 配置 -> 控制 -> 认证）

huh_pwa:
  vapid:
    subject: "mailto:test@example.org"
    publicKey: "BPZACSEB_Efa3_e2XdVRm4M3Suga2WnhNs9THpVixfScWicSiA3ZYQ3zCG4Uez3EnbL3q-O2RomlZtYejva642M"
    privateKey: "W0qtmwq0aB47Swmid0uDZyW945p9b5bgv_WmfsmsRHw"

用法

重新生成文件

您可以从 Pwa 控制（Contao 后端 -> 系统 -> PWA 配置 -> 控制 -> 文件 -> 重建文件）一次性重新生成所有清单和 Service Worker 文件。

还有一个可用的命令： huh:pwa:build

开发者

JS 事件

为了支持自定义控件，有一些事件和事件监听器可以使用。所有事件都在 document 上分发和监听。

事件

监听器

完整配置

huh_pwa:
  vapid:
    subject: "mailto:test@example.org"
    publicKey: "BPZACSEB_Efa3_e2XdVRm4M3Suga2WnhNs9THpVixfScWicSiA3ZYQ3zCG4Uez3EnbL3q-O2RomlZtYejva642M"
    privateKey: "W0qtmwq0aB47Swmid0uDZyW945p9b5bgv_WmfsmsRHw"
  push:
    automatic_padding: 2847 # int (payload size in byte (min 0, max 4078)) or boolean (enable/disable)
  manifest_path: '/pwa' # where the manifest files should be located within web folder
  configfile_path: '/pwa' # where the configuration files should be located within web folder

命令

添加额外的头部脚本

通过使用可用的 PwaHeadScriptTags 对象（作为 huh.head.tag.pwa.script 服务）向头部添加额外的 js 代码。使用 addScript 添加的代码将在页面的头部输出，在 <script type='text/javascript'> 标签内。

垫片

待办事项

• 图片大小配置
• 支持 svg 图标
• 选择预缓存的页面
• 自定义添加到主屏幕和推送通知