README

此包通过使用Google Workbox的service worker添加了基本配置来预缓存内容。此外，它将为支持此功能的设备添加“添加到主屏幕”。

设置

运行composer require diu/neos-pwa

配置

将以下文件复制到您的网站包中，并根据需要更改值

• Settings.Manifest.yaml
• Settings.Workbox.yaml有关所有配置选项，请参阅：https://developers.google.com/web/tools/workbox
• Settings.MsApplication.yaml

将所有图标添加到清单中，示例在Settings.Manfiest.yaml中，并设置名称、颜色等。

对于workbox设置，通常只需要根据您的需要调整globPattern。我们建议只包含来自您的包的文件，不要添加任何Neos静态文件。

所有必要的配置都已添加到Neos.Neos:Page原型中。服务工人的初始化是通过在关闭body标签之前内联javascript完成的。

建议：在您的.gitignore中排除/Web/sw.js和/Web/workbox-*，因为它们应在CI/CD流程中自动生成，并由workbox-cli进行版本控制。

创建workbox-config.js

运行./flow pwa:create或./flow pwa:update。这将在项目根目录中创建/更新workbox-config.json。

本地测试

我们建议使用DDEV，因为您需要一个有效的https连接，但它也应该适用于开发中的https://。

• 确保您已安装了此包
• 运行npm add workbox-cli && npx workbox generateSW（您也可以使用yarn add workbox-cli代替npm）

添加到您的CI/CD流水线

Workbox需要您的静态资源的路径。因此，您必须提供一个完整的“构建”环境。我们建议添加一个新的FLOW_CONTEXT，如Development\Workbox\Settings.db.yaml，在该文件中添加一个内存sqlite数据库的设置。

    Neos:
      Flow:
        persistence:
          backendOptions:
            driver: 'pdo_sqlite'
            path: ':memory:'
            username: NULL
            password: NULL
          doctrine:
            cacheImplementation: NULL
            dbname: 'flow_functional_testing'

添加以下构建步骤

• 运行./flow resource:publish --collection static，因为workbox在构建下一步骤中的服务工人时需要静态文件。
• npm add workbox-cli && npx workbox-cli generateSW这将基于您的/Web目录中的workbox-config.js生成您的服务工人。（您也可以使用yarn add workbox-cli代替npm）

路线图

1. 自动生成基于Manifest.yaml的所有favicon/icons，并将它们添加到标题中。

赞助商

本Neos插件由DI Unternehmer - Digitalagentur GmbH慷慨赞助。