README

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

功能

完全可定制的 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 对安全性非常严格，仅允许在 localhost 或具有有效证书的 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/

zhartaunik-fork / magento2-serviceworker

维护者

详细信息