README

一个添加 Service Worker 支持的 Magento 2 扩展。

特性

完全可定制的 Service Worker 脚本
页面资源采用缓存优先策略，实现页面加载更快
CMS 和目录页面离线缓存，允许在网络条件不佳时查看之前访问的页面

安装

使用 Composer 将此扩展添加到您的 Magento 安装中

composer require meanbee/magento2-serviceworker

使用

配置

Service Worker 默认已配置和启用。然而，Service Workers 需要站点在 HTTPS 上运行。

可以在 商店 > 配置 > 一般 > 网络 > Service Worker 设置 中自定义功能。

添加更多逻辑

如果基本 Service Worker 文件不能满足所有需求，您可以通过布局系统轻松添加更多逻辑，针对 serviceworker_index_js 处理。

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="serviceworker">
            <block class="\Meanbee\MoreLogic\Block\Logic" name="morelogic.logic" template="Meanbee_MoreLogic::logic.phtml" />
        </referenceBlock>
    </body>
</page>

常见问题解答

当 Magento 处于默认/开发者模式时，为什么页面资源看起来没有被缓存？

Magento 2 使用 URL 中的时间戳版本字符串来允许当静态内容更新时浏览器缓存失效。在开发者模式下，此版本字符串会为每个独特的页面请求更新。这意味着从浏览器的角度来看，静态资源，如 CSS 文件，在每个页面上都是完全不同的，尽管内容是相同的。因此，当资产在 Magento 2 开发者模式下被 Service Worker 缓存时，它们只针对特定页面进行缓存。生产模式只通过命令行生成静态资源，并保持版本时间戳固定，因此不会遇到此问题。

开发

设置开发环境

项目包含 Docker 开发环境

docker-compose run --rm cli magento-extension-installer Meanbee_ServiceWorker \
&& docker-compose up -d

npm 依赖

该扩展使用 npm 来管理其一些网络依赖。依赖项使用 npm 安装和更新，然后通过 npm 脚本复制到 src/ 目录。要更新网络依赖，运行

docker-compose run --rm node npm update
docker-compose run --rm node npm run build

在 Chrome 上测试 Service Workers

Chrome 对安全性非常严格，仅允许本地主机或具有有效证书的 HTTPS 网站使用 Service Workers。为了在测试中绕过这些限制，请使用 --ignore-certificate-errors 和 --unsafely-treat-insecure-origin-as-secure 标志来运行一个安全性较低版本的 Chrome

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
    --user-data-dir=/tmp/chrome \
    --ignore-certificate-errors \
    --unsafely-treat-insecure-origin-as-secure=https://m2-meanbee-serviceworker.docker/

meanbee / magento2-serviceworker

维护者

详情