magento使用_使用ReactJS增强Magento前端性能

magento使用

Magento

(

Magento

)

Magento is an open-source PHP based platform for building e-commerce solutions. Built by the Magento company (now part of Adobe), it is used by over 350,000 developers all over the world. It enables the creation of highly customizable digital storefronts for Business-to-Customer and Business-to-Business purposes. Magento 2, the transformed version of the Magento E-commerce Platform, comes with brand new architecture, coding structure, and database design.

Magento是一个基于PHP的开源平台,用于构建电子商务解决方案。 它由Magento公司(现在是Adobe的一部分)构建,并被全世界350,000多名开发人员使用。 它使创建高度可定制的数字店面成为企业对客户和企业对企业的目的。 Magento 2是Magento电子商务平台的转换版本,具有全新的体系结构,编码结构和数据库设计。

a)概述 (a) General overview)

Magento’s platform is built upon PHP and MySQL. During its lifetime of 10 years (the version 1.0 released in March 2008 and the version 2.0 in November 2015, it has undergone changes in terms of structure and development patterns and is now in its second major version, Magento 2.

Magento的平台基于PHP和MySQL。 在其10年的生命周期(2008年3月发布的1.0版和2015年11月的2.0版)中,它的结构和开发模式发生了变化,现已成为其第二个主要版本Magento 2。

Magento’s structure is comprised of two main parts, one being the back-end, with the database and MySQL, and Model, Data and Service interfaces, as can be seen in figure 3. These are directly connected and used in Magento’s Blocks, Layouts, and Templates, which would be defined as the front-end of the application.

Magento的结构由两个主要部分组成,一个是后端,包括数据库和MySQL,以及Model,Data和Service接口,如图3所示。这些直接连接并用于Magento的Blocks,Layouts,和模板,它们将被定义为应用程序的前端。

b)产品搜索 (b) Product searching)

One of the prominent features on any website is the product search feature, which allows users to type in terms to search for products by. Once search results are gathered, the user can usually sort or filter through those by categories or product attributes.

产品搜索功能是任何网站上最重要的功能之一,它允许用户键入术语来搜索产品。 收集搜索结果后,用户通常可以按类别或产品属性对这些结果进行排序或过滤。

In Magento, the search usually uses either MySQL, Solr or Elasticsearch for indexing the catalog. Catalog indexing determines what results are returned to the storefront when entering a new search term or changing filtering options from already gathered results.

在Magento中,搜索通常使用MySQL,Solr或Elasticsearch来索引目录。 目录索引确定在输入新的搜索词或更改已收集结果中的过滤选项时将哪些结果返回到店面。

c)ElasticSearch (c) ElasticSearch)

Elasticsearch is a free and open-source search-engine built on Apache Lucene. It is particularly used when dealing with large amounts of data and when needing to quickly retrieve that data. When using MySQL, querying for data can take very long when having a lot of data. Thus, the main selling point of Elasticsearch is to multiply querying speeds by the hundreds. It works by indexing data into documents that have keys and values and it comes with an API that allows for retrieving these indexed documents.

Elasticsearch是基于Apache Lucene构建的免费开放源代码搜索引擎。 它在处理大量数据以及需要快速检索该数据时特别使用。 使用MySQL时,拥有大量数据时查询数据可能会花费很长时间。 因此,Elasticsearch的主要卖点是将查询速度乘以数百。 它通过将数据索引到具有键和值的文档中来工作,并且附带了一个API,该API可以检索这些索引文档。

When used on a Magento store, the catalog is indexed in an Elasticsearch node. It is easily configurable by just enabling it and specifying from the admin panel of the store, the IP address and port of the host where the Elasticsearch node is located.

在Magento商店上使用时,该目录在Elasticsearch节点中建立索引。 只需启用它并从商店的管理面板中指定Elasticsearch节点所在主机的IP地址和端口,即可轻松配置它。

d)搜索API (d) Search API)

Magento has a fair amount of REST API endpoints, of which one that can be used for searching products. This search API endpoint takes as data sent an array called search criteria, which has the following structure

Magento有大量的REST API端点,其中一个可用于搜索产品。 此搜索API端点将数据发送给称为搜索条件的数组作为数据,该数组具有以下结构

To make a request, the client must send a GET request to a specific path appended to the base URL of the store. The path is /rest/V1/search/? to which the search criteria are appended.

要发出请求,客户端必须将GET请求发送到附加到商店基本URL的特定路径。 路径是/ rest / V1 / search /? 附加搜索条件的位置。

2. ReactJS

(

2. ReactJS

)

a)作为工具进行React (a) React as a Tool)

React is a JavaScript library created by Facebook and designed for building user interfaces. It relies on the use of components and states for rendering dynamic content on web pages without the need for page loads. It is one of the most popular and supported JavaScript libraries for UI interfaces these days.

React是Facebook创建JavaScript库,旨在构建用户界面。 它依靠使用组件和状态来呈现网页上的动态内容,而无需页面加载。 这是当今最流行和受支持的UI接口JavaScript库之一。

Unlike older JavaScript solutions, which involved manually triggering changes on the page, React “knows” when the UI needs to be updated and re-rendered on the page when the states of the components change. The main idea that differentiates React from other libraries or frameworks (e.g. AngularJS, Knockout) is the use of a “virtual DOM”, which enhances performance by reducing the number of changes happening on the DOM.

与较早JavaScript解决方案(涉及在页面上手动触发更改)不同,React在组件状态更改时“知道”何时需要更新UI并在页面上重新呈现UI。 将React与其他库或框架(例如AngularJS,Knockout)区别开来的主要思想是使用“虚拟DOM”,该虚拟DOM通过减少DOM上发生的更改数量来提高性能。

b)React的虚拟DOM (b) React’s virtual DOM)

React’s virtual DOM is technically what it sounds like. It is a DOM that is created when components render and when states change. The approach used is to create a new virtual DOM when some element needs re-rendering and compare it to another virtual DOM representation of the previous state of the app, making the “diff” using an algorithm and re-rendering in the DOM only the elements that need changing.

从技术上讲,React的虚拟DOM听起来像是。 它是在组件渲染和状态更改时创建的DOM。 所使用的方法是在某些元素需要重新渲染时创建一个新的虚拟DOM,并将其与应用程序先前状态的另一个虚拟DOM表示形式进行比较,使用算法制作“ diff”,然后仅在DOM中重新渲染需要改变的元素。

The virtual DOM is a full representation of the DOM without being an actual DOM, meaning that the process of creating a new virtual DOM is much faster than creating the DOM of the actual page. Consequently, since React creates a new virtual DOM every time something needs re-rendering, it does not actually need to know what has changed. This means that the developers do not need to control the rendering process since React will then change the DOM of the page only when an actual change is needed. Performance-wise, it is one of the best and smartest methods to re-render part of the DOM that needs changing.

虚拟DOM是DOM的完整表示,而不是实际DOM,这意味着创建新的虚拟DOM的过程要比创建实际页面的DOM快得多。 因此,由于React每当每次需要重新渲染时都会创建一个新的虚拟DOM,因此它实际上不需要知道发生了什么变化。 这意味着开发人员无需控制渲染过程,因为React仅在需要实际更改时才更改页面的DOM。 从性能角度来看,这是重新渲染需要更改的DOM的最佳方法之一。

c)国家管理图书馆 (c) State management library)

When using a JavaScript library, such as React, developers create components which in most cases are stateful, meaning that each component has states that can change and that trigger component updates. When the application becomes large with many interconnected components, it can become cumbersome and states may need to be passed from parents to children and vice versa. To go around this issue, state management libraries exist. They allow keeping the states of the application in one place for ease of state management. The two most popular libraries used alongside React are Redux and MobX.

当使用JavaScript库(例如React)时,开发人员创建的组件在大多数情况下是有状态的,这意味着每个组件都具有可以更改的状态并触发组件更新。 当应用程序变得庞大且包含许多相互连接的组件时,它可能变得很麻烦,并且可能需要将状态从父级传递给子级,反之亦然。 要解决此问题,存在状态管理库。 它们允许将应用程序的状态保存在一个位置,以便于状态管理。 与React一起使用的两个最受欢迎的库是Redux和MobX。

3. React和Magento

(

3. React and Magento

)

Magento 2.3 uses a new tool called PWA Studio. It is a Progressive Web Application tool that will allow developers to work with Magento in a “headless” way, meaning that the frontend is not directly tied to the backend and communication is done through APIs.

Magento 2.3使用了一个称为PWA Studio的新工具。 它是一个渐进式Web应用程序工具,使开发人员可以“无头”的方式使用Magento,这意味着前端不直接与后端绑定,并且可以通过API进行通信。

Until now, Magento user interface was created by using what are called “blocks” which have a template (phtml file) and a PHP block. Data is often rendered on the page load through these blocks and models and interfaces coming from the backend.

到目前为止,Magento用户界面是通过使用具有模板(phtml文件)和PHP块的所谓“块”创建的。 数据通常通过来自后端的这些块,模型和接口在页面加载时呈现。

PWA Studio uses React, Redux and webpack for development.

PWA Studio使用React,Redux和webpack进行开发。

a)什么是渐进式Web应用程序(PWA)? (a) What Is Progressive Web App (PWA)?)

Progressive Web App is a web app that applies web capabilities (HTML, CSS, Javascript) to deliver great user experience mimicking native apps. More specifically, PWA can function like a native app with an icon on the mobile home screen, splash page (after opening the app), full-screen display, push notifications, and so on.

渐进式Web应用程序是一种Web应用程序,它应用Web功能(HTML,CSS,Javascript)来提供模仿本机应用程序的出色用户体验。 更具体地说,PWA的功能类似于在移动主屏幕上带有图标,启动页面(打开应用程序后),全屏显示,推送通知等的本机应用程序。

All of the PWAs must assure three essential criteria: Fast (respond to user interactions nearly instantly), Reliable (be able to work under poor network conditions) and Engaging (deliver smooth app-like experience).

所有PWA必须确保三个基本标准:快速(几乎立即响应用户交互),可靠(能够在恶劣的网络条件下工作)和参与(提供类似应用程序的流畅体验)。

PWA和本机应用程序之间有一些主要区别: (There are some major differences between a PWA and a native app:)

  • A native app can only run on a certain operating system (iOS or Android) while PWA is powered by mobile browsers and supported on both iOS and Android.

    当PWA由移动浏览器支持并且在iOS和Android上受支持时,本机应用程序只能在特定操作系统(iOS或Android)上运行。
  • You have to download the native apps from an app store; meanwhile, PWA can be installed quickly after adding to the home screen.

    您必须从应用程序商店下载本机应用程序; 同时,添加到主屏幕后可以快速安装PWA。
  • Users must access their app stores to get the latest version of the native apps but refreshing to get PWA updates.

    用户必须访问其应用程序商店才能获取本机应用程序的最新版本,但必须刷新才能获取PWA更新。
  • Since PWA runs right in a web browser, it is easier for store owners to share and promote the PWAs than native apps. PWAs work on-demand without taking up the device’s memory like the native apps

    由于PWA在Web浏览器中运行,因此与本地应用程序相比,商店所有者更容易共享和推广PWA。 PWA按需工作,而不会像本机应用程序那样占用设备的内存

b)Magento和PWA (b) Magento and PWA)

In 2017, Magento collaborated with Google to bring the best of PWA features to Magento platform by the end of 2018. Magento 2.3 was released on November 28, 2018, with a ton of impressive updates and Magento PWA was one of it.

2017年,Magento与Google合作,到2018年底将最好的PWA功能带入Magento平台。Magento 2.3于2018年11月28日发布,进行了大量令人印象深刻的更新,Magento PWA就是其中之一。

Magento, in fact, is one of the first e-commerce platforms to enable its users to fully utilize the potential of PWAs. Magento has also introduced PWA Studio which offers the required tools for developers to successfully create and maintain a PWA storefront on top of Magento.

实际上,Magento是首批使用户能够充分利用PWA潜力的电子商务平台之一。 Magento还推出了PWA Studio,它为开发人员提供了必要的工具,以在Magento之上成功创建和维护PWA店面。

c)为什么要在Magento 2中应用PWA?

(

c) Why Should We Apply PWA In Magento 2?

)

Progressive Web App integration has been drawing huge attention from Magento users, especially when Magento 2 PWA Studio was released. Below are three primary motivations to convert your website to Magento PWA:

渐进式Web应用程序集成已经吸引了Magento用户的极大关注,特别是在发布Magento 2 PWA Studio时。 以下是将您的网站转换为Magento PWA的三个主要动机:

  • Enhanced user experience on mobile devices: Getting the PWA on users’ mobile is effortless, no download required, but it’s just the door before they experience amazing functions like offline mode (access the app even when losing your Internet connectivity), background sync (postpone actions until the network connection is stable) and other app-like features.

    增强了在移动设备上的用户体验:轻松获取用户手机上的PWA,无需下载,但这只是他们体验令人惊叹的功能(如脱机模式(即使失去Internet连接也可以访问应用程序),后台同步(推迟))的大门直到网络连接稳定为止的操作)和其他类似应用的功能。
  • Lower cost of development & maintenance compared to native apps: For native apps, you will have to develop two separate apps (one for iOS, and another for Android), which leads to doubled time and effort for app development and maintenance. On the other hand, a single codebase is needed to create a PWA that can run regardless of the operating system.

    与本地应用程序相比,开发和维护成本更低:对于本地应用程序,您将必须开发两个单独的应用程序(一个用于iOS,另一个用于Android),这将导致应用程序开发和维护的时间和精力增加了一倍。 另一方面,需要单个代码库来创建可以在不考虑操作系统的情况下运行的PWA。
  • PWA in Magento 2 website is not simply a heated trend, it will be the future of the apps: Many Magento stores have adopted this technology and found their mobile user satisfaction significantly improved.

    Magento 2网站中的PWA不仅是一个激烈的趋势,还将是应用程序的未来:许多Magento商店都采用了该技术,并发现其移动用户满意度得到了显着提高。

d)Magento为什么专注于PWA? (d) Why is Magento concentrating on PWAs?)

The above graph shows that 63.5% of e-commerce sales in 2018 took place through mobile phones and tablet devices. In 2019, sales via hand-held devices are expected to reach 67.2%.

上图显示,2018年电子商务销售额中有63.5%是通过手机和平板电脑设备进行的。 2019年,通过手持设备的销售额预计将达到67.2%。

Since m-commerce is driving more online sales, Magento has made a wise move to bring advanced trends like PWA to its platform.

由于移动商务推动了更多在线销售,因此Magento做出了明智的举动,将PWA等先进趋势引入其平台。

e)Magento PWA如何改善在线业务?

(

e) How can Magento PWA improve online business?

)

Remarkable speed — The one vital factor for all online stores is speed. If a mobile site takes more than three seconds to load there will be a 53% drop in mobile visits. In other words, 53% of customers will leave a website if it takes more than three seconds to load. PWAs will be playing a major role here as they are blazingly fast. The reason for PWAs to be faster is browser-level caching which is possible because of service workers. PWAs use service workers to pre-cache part of the web app to load instantly when the user opens it the next time.

极高的速度-速度是所有在线商店的重要因素。 如果移动网站的加载时间超过三秒钟,那么移动访问量将下降53%。 换句话说,如果加载时间超过三秒钟,则53%的客户将离开网站。 PWA在这里将发挥重要作用,因为它们的速度非常快。 PWA更快的原因是浏览器级缓存,这可能是由于服务工作者所致。 PWA使用服务工作者预先缓存Web应用程序的一部分,以便在用户下次打开它时立即加载。

跨平台兼容性 (Cross-platform compatibility)

— PWAs can run smoothly on almost all the widely used mobile browsers and platforms. This includes browsers such as Chrome, Safari, Edge, and Firefox. The single web codebase is enough to run on multiple platforms, including desktops. Hence, businesses don’t have to develop and maintain apps for different platforms. Furthermore, PWAs don’t have to be updated from the app store. Updates can be delivered real-time just like a website.

— PWA可以在几乎所有广泛使用的移动浏览器和平台上平稳运行。 这包括Chrome,Safari,Edge和Firefox等浏览器。 一个Web代码库足以在包括台式机在内的多个平台上运行。 因此,企业不必为不同平台开发和维护应用程序。 此外,不必从应用程序商店中更新PWA。 可以像网站一样实时提供更新。

响应式设计 (Responsive design)

— Implementing PWA will result in consistent experience across devices like desktop, mobile phones, and tablet devices. This will help in improving the customer experience. Google has said that sites with responsive web design will rank better in Google search results. Hence, implementing PWA can make the site rank higher in Google search results.

—实施PWA将在台式机,移动电话和平板电脑等设备上带来一致的体验。 这将有助于改善客户体验。 谷歌表示,具有自适应网页设计的网站将在Google搜索结果中排名更高。 因此,实施PWA可以使网站在Google搜索结果中的排名更高。

离线支持 (Offline support)

— A part of the complete PWA site can be made to work offline. For example, customers can browse the products of your e-commerce site and can add it to the cart without internet connectivity, provided if they have visited the pages previously. Customers can even place orders offline, once the internet is connected the order will be processed.

—可以使整个PWA站点的一部分脱机工作。 例如,客户可以浏览您的电子商务网站的产品,并将其添加到没有Internet连接的购物车中(前提是他们以前访问过这些页面)。 客户甚至可以离线下订单,一旦互联网连接,订单将被处理。

SEO友好 (SEO-friendly)

— Since PWA sites are highly engaging and reliable, visitors might stay for a longer than the usual time. Also, factors such as speed, offline support and so on will contribute to high user engagement. Another significant advantage of using PWA in terms of SEO is “mobile-first index”. Google recently announced that the mobile version of a site would be indexed first. This means that sites that don’t have a mobile-friendly version would not perform well in rankings.

—由于PWA网站具有很高的吸引力和可靠性,因此访客可能会比平时停留更长的时间。 而且,诸如速度,脱机支持等因素将有助于提高用户参与度。 在SEO方面使用PWA的另一个重要优势是“移动优先指数”。 谷歌最近宣布,该网站的移动版本将首先被索引。 这意味着没有适用于移动设备的版本的网站在排名中的表现将不佳。

推送通知 (Push notifications)

— Push notifications are the messages that are sent as notifications from the application. They are said to increase engagement by up to 88%. Push notifications are important to e-commerce businesses to keep customers informed about the latest deals, offers, and order updates.

—推送通知是作为通知从应用程序发送的消息。 据说他们将参与度提高了88%。 推送通知对于电子商务企业来说很重要,它可以使客户随时了解最新交易,报价和订单更新。

添加到主屏幕 (Add to home screen)

— The app icon, which looks like a native app icon, of PWA sites can be added to the home screen of smartphones. Users can click the icon and visit the site directly instead of going to the browser and then to the website. This will increase the time spent by the user on the app which will eventually result in a higher conversion rate.

—可以将PWA网站的应用程序图标(看起来像本机应用程序图标)添加到智能手机的主屏幕。 用户可以单击该图标直接访问该站点,而不用先浏览器再浏览该网站。 这将增加用户在应用程序上花费的时间,最终将导致更高的转化率。

f)PWA可以为电子商务企业带来哪些好处? (f) What benefits can PWAs promise for e-commerce businesses?)

Since PWAs combine the best of two worlds — native app and mobile web, they solve two significant problems faced by the e-commerce industry at the same time:

由于PWA结合了本机应用程序和移动网络这两个世界的优点,因此它们同时解决了电子商务行业面临的两个重要问题:

ü Higher Conversion rate — Conversions on mobile web are less when compared to the conversions on mobile apps. PWAs provide seamless app-like experience, and combined with features such as offline support, speed, and cross-platform compatibility; conversion rates can go up.

ü更高的转化率-与移动应用上的转化相比,移动网络上的转化次数要少。 PWA提供无缝的类似于应用程序的体验,并结合了脱机支持,速度和跨平台兼容性等功能; 转换率会上升。

ü Increase in the number of users — Customers download only the mobile apps of well-established e-commerce businesses. With PWAs, customers can add the PWA of the online store to their phone’s home screen with just click of a button.

ü用户数量增加-客户仅下载成熟的电子商务企业的移动应用程序。 使用PWA,客户只需单击一个按钮,即可将在线商店的PWA添加到手机的主屏幕。

g)将Magento 2网站转换为PWA的方法? (g) Methods To Convert A Magento 2 Website To PWA?)

  • Install Magento 2 PWA Extensions

    安装Magento 2 PWA扩展
  • Create own PWA Using Magento 2 PWA Studio

    使用Magento 2 PWA Studio创建自己的PWA
  • Convert Site To PWA Using Magento 2 PWA Theme

    使用Magento 2 PWA主题将网站转换为PWA

h)PWA案例研究 (h) PWA case studies)

速卖通 (AliExpress)

AliExpress is one of the largest e-commerce business, not only in China but globally. Once they implemented PWA, they saw results in days. There was a 74% increase in the time spent on their website, and the page views doubled.

全球速卖通是最大的电子商务业务之一,不仅在中国而且在全球。 一旦实施了PWA,他们将在几天内看到结果。 他们在网站上花费的时间增加了74%,页面浏览量增加了一倍。

Flipkart (Flipkart)

Flipkart is India’s biggest e-commerce store and launched Flipkart Lite as its PWA.

Flipkart是印度最大的电子商务商店,并推出了Flipkart Lite作为其PWA。

Users time on site increased to 3.5 minutes with PWA, earlier it was 70 seconds in the case of the native app. The engagement rate increased to 40% and 70% greater conversion was seen from the customers who arrived via Add to Homescreen feature. The data usage also reduced to one third.

使用PWA时,用户在网站上的时间增加到3.5分钟,对于本机应用程序,则是70秒。 通过“添加到主屏幕”功能到达的客户看到了较高的参与率,转化率提高了70%。 数据使用量也减少到三分之一。

OLX (OLX)

OLX is a leading marketplace in India, and the bounce rates were high for mobile-web. Half of their traffic was from mobile-web, and they chose PWA to solve their problems.

OLX是印度的领先市场,移动网络的跳出率很高。 他们一半的流量来自移动网络,他们选择了PWA来解决他们的问题。

After implementing PWA, the bounce rate went down by 80%, and the Click Through Rate (CTR) on Ads went up by 146%. With the help of push notifications, the engagement rate went up by 250%.

实施PWA后,跳出率下降了80%,广告的点击率(CTR)上升了146%。 借助推送通知,参与度提高了250%。

朱米亚 (Jumia)

Jumia is a popular e-commerce store in Africa, and after witnessing the benefits of PWA, they have applied PWA to their other operations such as Jumia Travel. Traffic to their PWA increased by 12 times more than the combined traffic of native apps — both Android and iOS. The data usage reduced by five times and 2x less data was required to complete the first transaction. In addition to that, the data storage required was reduced by 25x.

Jumia是非洲最受欢迎的电子商务商店,在见证了PWA的好处之后,他们将PWA应用于其其他业务(例如Jumia Travel)。 他们的PWA流量比Android和iOS本机应用程序的总流量增加了12倍。 完成第一笔交易所需的数据使用量减少了五倍,所需数据减少了两倍。 除此之外,所需的数据存储量减少了25倍。

Kong加 (Konga)

Konga is a big player in Nigeria, and they used PWA to reduce data consumption. By implementing PWA, the initial load took 92% fewer data and to complete the first transaction 82% less data was required.

Konga在尼日利亚是一个重要的参与者,他们使用PWA来减少数据消耗。 通过实施PWA,初始负载减少了92%的数据,而完成第一个事务所需的数据减少了82%。

利用PWA有限功能的企业 (Businesses that utilize limited features of PWA)

To utilize the full potential of PWA, the site should be built from scratch. This can be quite expensive. However, it is also possible to integrate only the required PWA features to the existing website.

为了充分利用PWA的潜力,应该从头开始构建该站点。 这可能是相当昂贵的。 但是,也可以仅将所需的PWA功能集成到现有网站。

Businesses can concentrate on the features that will create maximum impact, and implement it. This will also increase customer experience considerably. Let us see examples of some businesses that use selected features of PWA.

企业可以集中精力于将产生最大影响的功能并加以实施。 这也将大大增加客户体验。 让我们看一些使用PWA选定功能的企业的示例。

柏林航空公司 (AirBerlin)

AirBerlin utilized the offline functionality of PWA to offer reliable offline support to their customers at airports. Offline support was added and the initial load time was reduced to less than a second. This allowed their passengers to access boarding pass and journey details without internet connectivity.

AirBerlin利用PWA的脱机功能为机场的客户提供可靠的脱机支持。 添加了脱机支持,并且初始加载时间减少到不到一秒钟。 这样,他们的乘客就可以在没有互联网连接的情况下访问登机牌和旅程的详细信息。

华盛顿邮报 (The Washington Post)

The Washington Post built a simple PWA version using PWA demo for their top news feed. They focused on speed. The page load time was reduced to 80ms. You can see the live demo of this product at WAPO.com/PWA. Since they saw an incredible result, they decided to use PWA for their core mobile web experience.

《华盛顿邮报》使用PWA演示为其最重要的新闻提要构建了一个简单的PWA版本。 他们专注于速度。 页面加载时间减少到80ms。 您可以在WAPO.com/PWA上观看此产品的实时演示。 由于他们看到了令人难以置信的结果,因此他们决定将PWA用于他们的核心移动Web体验。

翻译自: https://habr.com/en/post/462243/

magento使用

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值