genaker/module-pwa

PWA Magento模块

安装量: 3,457

依赖项: 0

建议者: 0

安全: 0

星级: 59

关注者: 10

分支: 13

开放问题: 0

类型:magento2-module

1014 2022-01-27 05:57 UTC

This package is auto-updated.

Last update: 2024-09-21 17:36:39 UTC


README

Magento 2的PWA扩展。只需安装即可使用PWA。

安装此插件后,您将拥有所有PWA功能可供您的Magento 2网站使用。

渐进式Web应用(PWA)是最新浏览器功能,允许任何人将网站作为原生移动或桌面应用程序使用。这不是一个Magento功能。您不需要进行昂贵的重设计即可使用PWA。

PWA就是作为一个移动应用程序的网站。与移动应用程序不同,它们不需要从应用商店下载。

使用PWAs,用户可以将类似应用程序的体验保存到他们的主屏幕上,具有闪电般的速度和移动优先的设计,而无需实际为iOS和Android构建应用程序。

PWAs允许使用现代Web功能,包括后台同步、离线浏览、条形码扫描,甚至是推送通知。

Magento(PWA)渐进式Web应用不是Magento PWA Studio

出于某种原因,许多人认为MAgento PWA是单页应用程序,需要MAgento PWA Studio或其他基于JavaScript的头无主题或单页应用程序(SPA)。

这是错误的。

Magento PWA不一定要是PWA Studio或基于自定义JS的主题或SPA。

我反对使用MAgento PWA Studio

因为Magento PWA Studio客户端JavaScript没有提供开发者认为更好的用户体验。事实上,在大多数情况下,它们创建了一个相对较差的用户体验。此外,优秀的React开发者的成本比传统的PHP MAgento开发者要高。

MAgento市场销售人员出售的渐进式Web应用程序是价格标签为50K+的定制开发。然而,您只需安装此扩展或将Manifest JS和服务工作者添加到现有的MAgento商店中。

MAgento PWA Studio只是MAgento另一个失败的项目。

安装

注意!我们遇到了一个问题:使用Composer V1无法使用新的Packagist Composer包。您需要将Composer升级到V2。新包将仅对Composer 2可见。

要安装此新的Magento PWA扩展,您必须具有Composer V2,升级使用以下命令

composer self-update --2

查看截图

composer-upgrade

PS:此问题通过预热composer API V1得到解决。Composer V1也应该工作。

类型1:压缩包

  • 将压缩包解压到app/code/Genaker
  • 通过运行php bin/magento module:enable Genaker_PWA启用模块
  • 通过运行php bin/magento setup:upgrade应用数据库更新*
  • 通过运行php bin/magento cache:flush刷新缓存
  • 生成JS ServiceWorker和Manifest文件php bin/magento pwa:generate

注意:您可以将这些生成的文件添加到git中,并且在生产环境中不要生成这些文件

类型2:Composer

  • 通过运行composer require genaker/module-pwa安装模块
  • 通过运行php bin/magento module:enable Genaker_PWA启用模块
  • 通过运行php bin/magento setup:upgrade应用数据库更新*
  • 通过运行php bin/magento cache:flush刷新缓存
  • 生成JS ServiceWorker和Manifest文件php bin/magento pwa:generate 注意:您可以将这些生成的文件添加到git中,并且在生产环境中不要生成这些文件

配置

  • 名称(pwa/pwa_settings/name)

  • 简短名称(pwa/pwa_settings/short_name)

  • 作用域(pwa/pwa_settings/scope)

  • 显示模式(pwa/pwa_settings/display)

  • 起始URL(pwa/pwa_settings/start_url)

  • 背景颜色(pwa/pwa_settings/background_color)

  • 描述(pwa/pwa_settings/description)

  • 图标JSON(pwa/pwa_settings/icons)

  • 完整的manifest JSON(pwa/pwa_settings/manifest_json)

  • 主题颜色(pwa/pwa_settings/theme_color)