README

为 Cecil 提供了一个 PWA 组件主题，它提供了一些助手来实现 Web 清单 和 Service Worker，将网站转换成一个 渐进式 Web 应用。

特性

• 生成和可配置的 Web 清单
• 生成和可配置的 Service Worker
• 自动缓存访问过的资源
• 无依赖项，纯 JavaScript
• 预先缓存已发布的页面
• 预先缓存资产列表
• 通用离线页面和默认图像（SVG）

先决条件

• 一个 Cecil 网站
• 一个 支持的浏览器
• HTTPS

安装

composer require cecil/theme-pwa

或者 下载最新存档 并在 themes/pwa 中解压缩其内容。

用法

在 config.yml 的 theme 部分添加 pwa

theme:
  - pwa

Web 清单

在主模板的 HTML <header> 中添加 web manifest

<link rel="manifest" href="{{ url('manifest') }}">

配置它

manifest:
  background_color: '#FFFFFF'
  theme_color: '#202020'
  icons:
    - icon-192x192.png
    - icon-512x512.png
    - src: icon-192x192-maskable.png
      purpose: maskable
    - src: icon-512x512-maskable.png
      purpose: maskable

技巧

使用 Maskable.app 创建你自己的 可遮罩图标。

Web 清单（可选）

添加 shortcuts

manifest:
  shortcuts: true

安装器截图

manifest:
  screenshots:
    - screenshots/screenshot-desktop.png
    - screenshots/screenshot-mobile.png

服务工作者

在 HTML </body> 结束前 注册 服务工作者

{{ include('partials/regsw.js.twig', {site: site}, with_context = false) }}

启用服务工作者

serviceworker:
  enabled: true

服务工作者（可选）

定义预缓存资产

serviceworker:
  install:
    precache:
      assets:
        - logo.png
        - icon-192x192.png
        - icon-512x512.png
        - icon-192x192-maskable.png
        - icon-512x512-maskable.png

限制预缓存页面数量

serviceworker:
  install:
    precache:
      pages:
        limit: 10

禁用安装提示

serviceworker:
  install:
    prompt: false

定义忽略路径

serviceworker:
  ignore:
    - name: 'cms'
      path: '/admin'

不要通过其元数据预缓存特定页面

---
serviceworker:
  precache: false
---