README

Swissup 2 UPWARD 连接器扩展并修复了 Magento 2 UPWARD 连接器的一些功能。Magento 2 UPWARD 连接器是一个路由请求到 UPWARD-PHP 的模块。此模块用 PWA Studio 店面应用程序替换了默认的 Magento 前端主题。在 Magento Commerce 中使用此模块，以在同一个服务器上保持 Magento 和店面代码。

内容

1. 安装
2. 配置

安装

cd <magento_root>
composer config minimum-stability dev
composer config prefer-stable true
composer require swissup/module-upward-connector
composer config minimum-stability stable

bin/magento module:enable $(bin/magento module:status --disabled | grep 'Swissup_Core\|Pwa\|Aux\|Upward' | tr '\r\n' ' ')

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy
bin/magento cache:clean

配置

Magento 2 UPWARD 连接器在管理员区域有额外的设置，可以在以下位置进行配置

商店 > 配置 > 一般 > 网络 > UPWARD PWA 配置。

UPWARD 配置文件

此配置是 UPWARD-PHP 服务器 UPWARD 配置文件的位置。

此模块向 env.php 添加了新的指令，以安全地设置 upward.yaml 文件的路径。

    // ...
    'downloadable_domains' => [
        // ...
    ],
    # New configuration point
    'pwa_path' => [
        'default' => [
            'default' => '/var/www/html/pwa/dist/upward.yml'
        ],
        'website' => [
            '<website_code>' => '/var/www/html/anotherpwa/dist/upward.yml' # Can point a website to a different installation
        ],
        'store' => [
            '<store_code>' => '' # Blank string (or false) to serve default Magento storefront
        ]
    ]

为了便于使用，此模块提供了一条新命令来设置路径

# Set the default scope to an empty string (will serve base Magento store front)
bin/magento pwa:upward:set

# Set the website with code <website_code> to /var/www/html/pwa/dist/upward.yml
bin/magento pwa:upward:set --path /var/www/html/pwa/dist/upward.yml --scopeType website --scopeCode <website_code>

# Set the website with code <website_code> to an empty string (will serve base Magento store front)
bin/magento pwa:upward:set --scopeType website --scopeCode <website_code>

# Set the website with code <store_code> to /var/www/html/pwa/dist/upward.yml
bin/magento pwa:upward:set --path /var/www/html/pwa/dist/upward.yml --scopeType store --scopeCode <store_code>

您可以使用 bin/magento store:list 或 bin/magento store:website:list 来轻松获取配置的商店/网站代码。

您可以使用相对于您网站根目录的路径或绝对路径作为此配置的值。

• 相对： pwa/dist/upward.yml
• 绝对： /var/www/html/pwa/dist/upward.yml

如果您之前使用 config:set 命令或环境变量配置了 UPWARD yaml 路径，则它将继续作为后备工作，只要没有根据上述示例设置默认值。

配置的工作方式与正常商店配置相同。它从商店视图 > 网站到全局（默认）回退，首先尝试提供更具体的可用作用域。

前端名称允许列表

此配置允许您指定要转发到默认 Magento 主题的行分隔路由列表。

示例

contact
privacy-policy-cookie-restriction-mode

在此示例中，当访客导航到 <Magento store URL>/contact 或 <Magento store URL>/privacy-policy-cookie-restriction-mode 时，他们将到达由 Magento 渲染的页面，而不是店面应用程序。

Prerender.io 配置

Prerender.io 在 upward-connector 模块中的支持允许您的网站向搜索引擎机器人发送预渲染的静态 HTML。

一个中间件层会检查每个请求是否来自爬虫，如果允许，则将其发送到预渲染服务。这些配置条目允许您配置要发送到 Prerender.io 以提供该页面的静态 HTML 版本的页面。如果页面未配置为预渲染，则请求将继续使用正常的服务器路由。

测试预渲染页面

要查看爬虫如何看待预渲染页面，请将浏览器用户代理设置为 Googlebot 并访问您的 URL。您还可以在命令行上运行此操作，并将示例 URL 更改为您的店面 URL。

curl -A Googlebot https://www.example.com/ > page.html

有关本地配置预渲染进行测试的信息，请参阅 https://docs.prerender.io/test-it/。

解决部分渲染页面的问题

没有方法可以判断 PWA 页面是否完全加载。对于预渲染，可以在设置 window.prerenderReady 标志之前强制预渲染等待预定义的超时时间。

将以下内容添加到运行时脚本中

window.prerenderReady = false;
setTimeout(function () {
  window.prerenderReady = true;
}, 1000 * 15);

有关更多信息，请参阅 https://docs.prerender.io/test-it/。

服务工作者笔记

请避免在PWA Studio店面和Magento 2管理后端之间共享相同的域名。这会导致当您在浏览器上同时打开店面和管理标签页时，店面服务工作者会拦截后端请求。如果您无法避免共享域名，请一次访问一个服务，或者为每个服务使用一个私密浏览会话。