What makes a good eCommerce platform? Performance, flexibility, and ease-of-use. Magento 1 epitomized these features upon release back in 2008 as well as throughout most of its lifespan, however, both market and technology have moved forward since then and no amount of updates can help Magento 1 keep up with its modern counterparts. The core technology has evolved as have the expectations and demands of eCommerce platforms.

Fast forward to November 2015, and the Magento​ team announces the new era of commerce innovation with the release of Magento 2.0​ for the Enterprise and Community editions. The new platform addressed the shortcomings of its predecessor by accelerating time-to-market for upgrades, integrations, and customizations, all while ensuring an overall higher-quality product. In Magento’s own words, Magento 2 provides enhanced performance and scalability, new features to boost conversion rates, and business agility and productivity improvements. 

At the same time, new powerful technology has been gaining popularity, changing the way people engage with mobile Internet: Progressive Web Apps (PWA) have been claimed to be the greatest invention since the introduction of adaptive web design! In a nutshell, PWA enables the creation of websites that behave like native apps, without the downsides and extra expenses associated with app development.

Both M2 and PWA uncover a new range of possibilities for eCommerce. But the real magic begins when the two are joined in a combo where M2 provides back-end, and PWA acts as a user-facing front-end.

This book explores the process of an eCom website migration from M1 to M2 with integrated PWA. Why is it relevant? Several reasons:

In the following sections we take a look at the essential features offered by M2 and PWA, and outline a migration path from M1 to M2 with integrated PWA. We are convinced that businesses need to be aware of what’s involved in the process to make correct and well-timed choices. 

So, whether you are looking to explore the options, or are in search of a migration reference book, you should be able to find key information in this guide.

Overall functionality and features introduced in M2 are at this point well-documented. 

What’s more important for a business owner is to understand how M2 upgrades are beneficial specifically for them. Consider the following.

• Richer set of features, better integration with Numerous out-of-the-box features will satisfy the needs of most every merchant. And those looking for more will be pleased to delve deeper into Magento 2's thriving digital ecosystem, integrating third party extensions with unprecedented ease.
  

• Future-proof: the underlying technology powering Magento 2 is a modernised technology stack that introduces unprecedented scalability, flexibility, as well as significant security improvements.

• Advanced reporting & marketing: Magento 2 grants access to all the critical data, ensuring that your business decisions are well-informed and impactful, and your marketing efforts are rewarded.

• Improved performance: On average, Magento 2 sites run 20% faster than Magento 1. Magento 2 is able to process more orders per hour and respond faster to requests, it has decreased time-to-cart and, in general, improved loading speeds across the board.
  

• Streamlined checkout process: With an easy 2-step checkout process and an Instant Purchase option, the final part of the customer's journey has never been smoother. This kind of frictionless and straight-forward flow improves customer experience and helps Magento 2 merchants drive sales.

• Mobile friendly: Mobile is not only the future, it's NOW. Magento 2 prioritises mobile eCommerce and supports Progressive Web Application (PWA) compatibility. This enables you to upgrade your mobile site and adopt the speed and UX of native apps.

• Advanced interface: Manage pages, add products, oversee processes through an updated intuitive and user-friendly interface. Instead of drowning in dull administrative duties, spend more time on business development & efficient management.​

• Easier version upgrades: Staying up to date with the latest Magento version has never been easier. Not only convenient, but equally as important, for each major release brings crucial updates. Get the latest features, the most recent improvements, and important security patches with each new version.

• Developer friendly: Not only will your developer team appreciate working with the latest tech stack, but Magento 2 will allow them to do so more efficiently. Infrastructure improvements, easier page adding, content updates, and just about everything else is smoother, faster, and more effortless.

Simply put, a PWA is a special web application that is accessed like a normal website, but offers most of the benefits previously only available with native apps. Overall, PWA can transform a conventional website into a faster, more stable and more engaging version of itself with super-fast operation, offline mode, push notifications, ability to save on home screen, optional access to phone hardware, GPS and much more.

If your website takes more than 3 seconds to load, 53% of visitors will bounce. 

PWA offers a combination of dedicated technological solutions to address slow page loading times and minimise lag while browsing. As a result - a drastic improvement in site performance as well as reduced server load as an additional bonus.

“Offline mode” is not a fully native offline experience. Rather, it allows to manipulate caching mechanisms to make cache storage independent of the remote server. 

Thus, if connection drops, browsing still remains possible. For example, when you hit the Back button, rather than seeing a 404 error, a cached page with the previously retrieved data will be delivered and displayed.

It’s even possible to check out offline. However, the order would be processed after connection is reestablished.

Push notifications are a great tool to engage the current users and re-engage the ones who have visited the store prior.  

Marketing campaigns, order progress information, abandoned cart reminders - it’s a unique communication channel to help your brand become a part of your user’s everyday life. If done well, this feature will give the customers additional motivation to open the app and use it, ensuring up to double the time spent on it and increasing your conversions up to 4 times.

Beyond the Rack achieved a 26% average increase​​​​​ in spend and 72% more time spent on their PWA from users visiting via push notifications.

One of the reasons the demand for (expensive) native app development for iOS and Android is so high is it can give your business a great boost by having its app listed in app stores. 

PWAs can circumvent that need.

Thanks to technologies like Trusted Web Activity​​, you can convert any Progressive Web App into a native app within a few hours. It’s then possible to deploy it to both the Apple App Store and Google Play Store without the need to develop a native app from scratch.

Progressive Web Apps are designed to provide the best possible mobile-first user experience. Despite the numerous amazing features, Progressive Web Apps are extremely lightweight and can operate seamlessly even on low-bandwidth networks. 

Presence on the user's home screen, which is essentially the most valuable digital real estate, puts your logo front-and-center and your site one click away. 

PWA allows to skip both bookmarking your webpage, and roaming around Play & App Stores to find and download your application. This gives Progressive Web Apps a major advantage over both apps and websites, and enables potential customers to add your PWA to their Home screen directly from the browser. 

This makes them a lot quicker to deploy. It also enables creation of a full native-app experience without the hassle of coding and review process, unavoidable for a regular app. 

Since the PWAs are native-app like, your shoppers won't even need a browser once the web app is added and displayed on their Home screen. Once launched, it’ll open fullscreen and work independently.

Every platform has both advantages and disadvantages, leaving you the unenviable task of overcoming platform-specific limitations. 

PWAs are platform-agnostic. This removes the necessity to build and maintain separate native apps for the web, iOS, and Android. It also means that with PWA you can provide the same user experience to everyone, regardless of their current platform.

Updates are a chore for users and a liability for every party involved. PWAs don’t need them - they actively update themselves in real-time, just like regular websites!​

Same as any other website, PWAs have URLs and can be crawled and indexed by search engines. Unlike native apps, users can find PWA pages directly in SERPs. 

And faster load times keep both search engines and users happy​​​!

Now that we have looked at some of the most notable PWA features, let’s take a look at the effect the technology has on different aspects of a website.

First impressions matter! And the first experience your visitors get with your site is neither design nor content. It’s the page-load time. The most polished user journey means nothing if you can’t get your visitors to the starting line. ​

​PWAs scale down the volume of data requests to a fraction compared to a traditional website. It is not unlikely to see PWA adopters experience up to a 300% performance improvement​​. If a site is already optimised for speed, this can lead to ​near-instant loading speeds, akin to those of native apps. ​

​Even without integrating Accelerated Mobile Pages, PWAs help with first-page load by prioritising the first meaningful paint and serving a light shell document with inlined resources.​

PWA’s fast load times support accessibility​ for companies that operate in emerging markets or need to provide users consistent site access at all times.​

For instance, Uber’s rapid expansion into new markets demanded a fast, device-agnostic ride-hailing application that worked well at any location. After they adopted PWA​ requests came in at only 50kb, allowing the PWA to load in under 3 seconds on 2G networks!

Historically, native apps have outperformed mobile websites in terms of user engagement. Progressive Web Apps can close that gap with features previously reserved only for native apps.

PWAs even beat native apps ​in a few instances - examples include elimination of app-install friction and decreasing web-to-app install drop-offs.

A combination of new powerful features and performance enhancements allow PWA to significantly improve mobile web experience. Here are a few examples of what PWA can do for you, both as a store owner, and a user:

As an eCommerce store owner:

• Increase your conversion rate
• Increase user time on your site
• Provide better user experience
• Increase your organic search traffic
• ​PWAs are usually more affordable to create and maintain than native apps
• Your most loyal customers can save your app on their home screen​​
• As a result, improved profits​
  

As a user:

• PWAs are faster, loading in an instant
• You can browse the website even while being offline
• Better, smoother browsing experience
• Receive reminders and notifications of the latest campaigns
• One-click access (save your favorite website as an icon on your phone home screen)

Is PWA right for you? Take a minute and consider the following questions. 

If the answer to the above questions is Yes, upgrading to PWA is the option you will, probably, have to investigate on multiple occasions in the future.

But website migration from M1 to M2 is already a serious step for many business owners. A subsequent migration to PWA on top of that is a prospect that some may find discouraging. However, you can hack this by migrating your store from M1 to M2 with integrated PWA. ​

When done right, migration to M2/PWA helps avoid extra work and cut expenses. Thus, a migration to M2 with the adoption of ScandiPWA​ theme will amount in only 20-30% more effort compared to a regular M1-M2 migration.

Other PWA solutions include Magento’s own PWA studio​, Vue Storefront​ by Divante, DEITY Falcon​, Front Commerce​ and Spartacus​, to name a few.

The fact that the industry is waking up to the PWA technology signals that, by any means, we can expect it to set the standards of eCommerce in years to come. Therefore, adopting it early will help ensure your competitiveness, and M1-M2/PWA migration is a logical and accessible step towards this goal.

​The latest developments in eCommerce span the entire ecosystem. Not only specific areas are affected, but the very principles of how we perceive and interact with the field are morphing. Potentially detrimental for those unable to adapt, this change opens a whole new set of opportunities for those willing to take the next step.​

However, despite all the traffic generated from mobile devices, mobile conversion rate is still lagging. It can be attributed to the fact that mobile devices are often seen as auxiliary: used to browse for product information, while the purchases are closed on desktop when possible.

Other factors, reducing mobile conversion, are poor site performance, underwhelming UX/UI, slow connection or insufficient network access, and fragmented user attention.

​Additional pressure on mobile sales is put by Google’s announcing mobile-first indexing, high user expectations, fierce competition accelerated by the recent COVID-induced boom in eCommerce.

Let’s dive into some of the technical concepts. Understanding these should help you better see how PWA addresses the shortcomings of mobile eCommerce.​

One of the first things that stands out about PWAs is how fast they are compared to regular websites. A lot of it has to do with the way they approach page content rendering.​

SPA / CSR

Technically, most PWAs are single-page applications (SPA) making extensive use of client-side rendering (CSR) and built following AJAX methodology. Page content is rendered in the browser by updating the necessary parts via tiny strings of Javascript. This  ensures instant content load and assures the overall “app-like” feeling.

This is a major improvement compared to the traditional server-side rendering (CSR), where the entire HTML of a page has to be sent from the server every time a change is required.

Tech stack components listed below compose the core of most any PWA today. Depending on the particular implementation, additional elements will be incorporated to serve the current needs. ​

Service workers

Service worker is a programmable proxy between server and browser. Its job is to cache server responses and fire them back at the user every time a repeated request is encountered. This is a crucial element of any PWA, allowing them to both mimic instantaneous app-like response and minimise load on the server.

React

React is a JavaScript library that enables the most effective client-side page rendering. Its job is to compare the expected representation of the page against the current one, and apply the necessary changes locally.

GraphQL

GraphQL provides the API to enable behavior specified by React. Modern, powerful and developer-friendly, it is a query language chosen by Magento for the needs of front-end development and available as a part of Magento installation.

One of the first things that stands out about PWAs is how fast they are compared to regular websites. A lot of it has to do with the way they approach page content rendering.​

Compatibility  

There are two major things that need to be mentioned in the context of compatibility between M2 and PWA.

• Magento has added support for headless approach in M2. This means that M2 back-end can be decoupled from the original front-end, and used to power a website with an arbitrary front-end on top of it.
• M2 has seen the addition of PWA support. As a result, there are now multiple ready-to-use PWA solutions and themes available on the market. Not only does it give  merchants more options to choose from, but the development costs and TTL have been significantly reduced as well.

Cost-efficiency

As mentioned previously, PWAs are websites that offer the functionality of native apps - without the extra expenses associated with building an app. How exactly does PWA facilitate cost saving?

• PWA runs off of a single codebase - no need for separate platform-specific development for IOS / Android
• No need for updates - PWA will automatically update, just like any website
• No need for tedious app store verification process - PWA launch process is just like a regular website
• Wider adoption goes hand-in-hand with more accessible pricing. To exemplify, ScandiPWA​ - a full-featured PWA theme for Magento - is available to anyone as an open-source solution.

Merchants running M1 stores and looking to implement PWA need to be aware that PWA compatibility is only available for M2 sites. This means that an upgrade from M1 to PWA also implies a migration to M2.

The benefits of M2 compared to M1 are well-documented, and include enhanced performance,  feature and functionality upgrades, multiple frontend and backend improvements, better UX, security and stability, and a significant ecosystem level-up. 

There are, however, certain pain points that businesses need to be aware of before they step on the migration path. Understanding these limitations will help you to plan the scope, time and budget of the migration project ahead.

While we are on the topic, it is worth mentioning another important touchpoint - namely, the approaching Magento 1 end-of-life. Come July 2020, Magento 1 will officially stop receiving updates and support from Magento. This means unpatched security vulnerabilities, end of the Magento 1 3rd party extension integration, and application ecosystem. And no technical support from Magento. This may expose both your store and your customers to a number of potential threats.

​

Why is Magento pushing so hard for migration? It's due to a combination of aging technology powering Magento 1 and the opportunities offered by Magento 2. Given the exponential rate of technological development, maintaining large stores & funneling financial transactions through a 10+ year old infrastructure is becoming increasingly dangerous, slow, and overall inefficient.

​

Moreover, launching any huge new updates or expansions, or resolving fundamental performance issues on Magento 1 is fiscally unsound, as the reprieve or benefits they will provide, will be temporary, given the end of life. If any such expansions or issue solutions are planned, it is far more reasonable to not only do them on the newer platform, but do them while migrating, to get 2 birds with 1 stone!​

The core components of a M1-M2/PWA migration project generally replicate those of an ordinary M1-M2 migration, with an addition of several extra cues specific to PWA. Being aware of the main focus areas will help you efficiently plan and prioritise your efforts prior to migration as well as throughout the process.

Needless to say, the overall look and feel of an eCommerce site are extremely important. A well-designed site allows for seamless customer experience, drives sales, and facilitates building meaningful and lasting customer relationships. Failure to deliver great user experience, on the contrary, will result in a lack of engagement, leading to lost sales.

Depending on the specific business requirements, design-wise, a migration may go in either of the following directions.

A redesign involves a revision of UX/UI aiming to update appearance, behavior, user journey, etc. The general rule of thumb here is to build the new improved version based on the existing design, thus, preserving the familiar look and feel. Otherwise, you are running the risk of confusing your loyal customers with a radically new interface, which may push them away from the site.

There is good news for those opting PWA implementation and a redesign. PWA removes any restrictions that used to limit front-end development on M1 sites, and offers superior website design capabilities

A redesign is not always a part of migration. Often a site will already have a solid UI. In this case the existing design has to be duplicated and re-implemented on the new platform.​

NOTE: Whether you choose to redesign your site during migration or keep the existing UI, there is one important thing to remember. PWAs are structurally different from traditional websites, and their front-end needs to be built to match a specific set of requirements. In the scope of migration, it means that the entire front-end of your site will have to be rewritten on React.​

PWA introduces a different technology stack compared to a typical Magento development. Depending on the specific implementation, the tech stack may vary, but almost certainly there will be elements alien to the normal Magento developers. 

From a merchant’s standpoint, this information comes handy when choosing an agency / developer team to perform the migration. Because PWA tech stack comes with a learning curve and requires a certain amount of prior experience, it is suggested that the teams that comply with the requirements are considered as the first choice.

(For more information, see the chapter “How to find the right team”)

Core set of development activities associated with migration to PWA includes the following:

• Rewrite the front-end using React
• Assure GraphQL compatibility 
• Make sure all the extensions are PWA-compatible. Depending on the availability, either of the following approaches can be used:
• Find ready-made alternatives on the market, 
• Develop the necessary custom modules, in case no suitable alternatives are found
• Adapt the existing custom solutions for PWA compatibility

Over a half of all traffic is attributed to mobile devices​ - a trend that is only going to grow over time. Consequently, failure to optimise the site for seamless use on mobile devices will repel many users and cost you a substantial part of your revenue.​

PWA is a technology that is initially geared specifically towards mobile use. Boasting features to enhance performance, increase user engagement and avoid potential pitfalls of the mobile Internet, it is an effective tool to raise your competitiveness and solidify mobile conversions.

Be sure to migrate all the valuable site content, i.e. content that is relevant and brings organic traffic to your site. This is also a good opportunity to clean up irrelevant and outdated content, leaving it out of the new site. Furthermore, you need to keep a special focus on SEO in order to preserve organic traffic. 

Not paying enough attention to content and SEO may cause site performance decrease, missing parts of content, and reduced or lost organic traffic, among other things. Unfortunately, a deficient approach to SEO during migration is one of the most frequent mistakes that has a direct negative impact on sales after the new site is launched.​

It is important to note that PWA requires a different approach to SEO. As we already know, PWA uses a technique called client-side rendering (CSR). While it is a great performance enhancing tool, CSR requires a revision of the basic SEO techniques. ​

​At the same time, PWA has been heavily promoted by Google, leading many to believe that Google prioritises PWA pages in their search results.

In the end of the day, our experience shows that PWAs can shine in SERPs if treated correctly. There are PWA-specific techniques to allow search bots to access site content. One such approach involves providing search engines with a server-side-rendered copy of the content, instead of that rendered on the client.​

While it does require additional attention to infrastructure planning, it enables PWA-based websites to effectively compete in SERPs.

Combined with the good old SEO best practices, these techniques will result in a website that not only shows great performance but also ranks well.

Quality assurance is an important part of any development project, and site migration is no exception. Testing ensures that all site elements work as expected, the necessary bug fixes are implemented in a timely manner, and there are no unforeseen artefacts in the proposed logic and user flow. It assures the quality of the final product, streamlines the development process, and helps meet the deadlines.

Failure to track user behavior will likely lead you to making false assumptions regarding site performance, conversion and bounce rate fluctuations. This, in turn will deter you from identifying and fixing any issues that may occur. Both business and content decisions must be informed by trustworthy data.

​​Safe to say that an eCommerce store without a proper enhanced eCommerce data tracking setup should be a thing of the past. ​​

When migrating to PWA, you need to keep in mind that the analytics setup will differ from that of a conventional M2 site. The differences are mainly in the technical implementation, and they originate from the fact that a PWA is a client-side rendered SPA:

1. Instead of adding all tracking scripts in the site markup, we suggest managing enhanced eCommerce and 3rd party script setup using Google Tag Manager (GTM).​  A GTM extension can be used to handle GTM integration on the website.​

2. Pageview tracking cannot rely on Pageview triggers. Instead, a different set of triggers needs to be used in GTM to correctly track pageviews​:

NOTE: This is a generic solution that enables tracking the homepage load and URL changes. It may result in data inaccuracy, since History Change reads all changes on the page and may cause the Pageview tag to fire multiple times on the same page.​

NOTE: Tracking the General event offers greater precision, since it fires on each screen load. This approach will be available if it is included in the specific implementation, such as an open-source analytics extension for ScandiPWA​​.​​

3. The list of all the tracking script domains must be passed to your dev team to be added in the Caching exclusion list. This is crucial to ensure that the tracking scripts are passed to 3rd party services.​

4. Not all the scripts are compatible with JS-based front-end, this may affect 

NOTE: To address this, make sure to verify the compatibility in advance, and arrange an alternative setup if necessary.​

Site performance along with a well-planned UX are at the core of today’s highly competitive eCommerce environment. Unsurprisingly so - modern life is speeding up dramatically and it is reflected in customer expectations. Slow sites cause people to flee for the better-performing ones.

In this respect, it is easy to understand the motivation behind M2 bringing on PWA technology, as it boosts both site performance and UX/UI capabilities.

For a business planning to migrate their eCommerce site, one of the main keys to success is finding the right team to take on the job. There are two basic approaches: some merchants have sufficient in-house resources to perform the task internally, while others  choose to hire a dedicated agency. Either way the merchant needs to make sure the team has a solid prior knowledge of both M2 platform and PWA-specific tech stack. 

Qualification of the team can be easily verified by taking a look at their credentials, namely the presence of relevant Magento 2 certifications​. Among these, Magento 2 certified professional JavaScript developer​ certificate is a good indicator of JS front-end development proficiency, critical for working with PWA.​

Regardless of the approach, scope, industry, or business requirements, partnering with the right team will benefit your company and serve your management style. While employing an internal developer team may take a few unknowns out of the equation, hiring an agency may not be as obvious a task. Below we review key criteria that should inform your decision-making process when choosing a contractor agency. 

The company’s portfolio should be extensive enough, and has to contain other projects similar to yours.

Does the company have an in-house team, or does it plan to delegate your project to a 3-rd party? 

NOTE: There are agencies and independent developer teams that offer outsourcing and while label work. Usually, the companies that hire such teams, don’t make this information readily available. The surest way to find out is to ask your contractor agency directly.​

Does the agency provide the service package you are looking for? Possible focus points will include:​

Pay attention to the way the agency’s internal workflow is organised. ​

NOTE: Agile / Scrum is one of the most widely acknowledged and transparent methodologies from a client’s perspective. The main benefits it offers are:

• Client  is introduced as a part of the team for the time of the project
• Client has a full access to the team
• Work progress is visible at all times

When it comes to planning a site migration, there are three basic aspects that need to be taken into account: time, scope, and budget. The tricky part is to effectively balance all three. To put it simply, it is extremely unlikely that you will be able to achieve optimum values in all three domains, i.e. get a great quality site for cheap, very quickly. 

Planning is the secret ingredient that will allow you to align your resources with your business interests, and help you prioritise your efforts for maximum effect.​

Both M2 migration and an upgrade to M2/PWA need to be planned well in advance. Transition to PWA is normally less straightforward than a M1-M2 migration, thus, may require more foresight.

Effective planning helps accomplish the following objectives:

1. Help cut unnecessary expenses, since many features can be developed with PWA in mind from the start

2. Allow to explore the capabilities offered by PWA and plan features accordingly​

3. Achieve a more solid final product by applying the PWA-first mindset​

Migration from M1 to M2/PWA is a major upgrade. It implies a transition to a new platform with both upgraded tech stack and enhanced extension ecosystem. This is why migration is often viewed  as a chance to revise and upgrade the old feature set to accommodate for the current business needs and latest technological requirements.​

There are a number of ways to go about this. Depending on the particular requirements and faculties available, new features may be in the form of out-of-the-box solutions, built from scratch, or added as 3-rd party extensions.

However, with a wide selection of new features at their fingertips, merchants sometimes get carried away and opt for things they don’t necessarily need. For example, it is not uncommon to encounter sites with some 15-30 installed extensions, half of which the site owner is not even aware of. 

The problem here is that, in the background, all the extra code continues to execute and alter site behavior. This, inevitably, affects a number of crucial site properties, such as performance, stability and security. Additionally, most extra features and plugins come with a price tag attached.

To avoid pitfalls, investigate ways to match your business needs with technological tools, and carefully plan desired features in advance.​

Adequate time planning determines whether the site is launched in time to meet business goals. Besides, setting clear overall as well as transitional deadlines will help keep the workflow smooth and predictable. Coordinate with your team to work out the schedule that will serve your business best.

It is beyond the scope of the current document to provide specific budget estimates. Prices vary dramatically, affected by factors, such as​​

NOTE 1: Prices on the market vary greatly, but the notion that only the pricier agencies tend to deliver high quality work is not 100% true. There are smaller and more affordable agencies that pride themselves in taking on a select number of projects to keep quality standards high and prices low.

NOTE 2: Even if different agencies may have a similar hourly fee, be sure to keep an eye on their comparative overall time estimates.​

Listed below are the basic steps typically forming the core of a M1-M2/PWA migration project. The steps are intentionally generalised, since further specifics may vary depending on technical implementation and the business goals it aims to achieve.

A migration is usually structured to comprise several main parts. Work on several of these parts may be taking place simultaneously at any given time.

A good practice is to allocate a couple weeks after a successful migration for post go-live support. During this time a part of the contracted team is assigned to handle the following:​

Beyond this point, depending on the backlog and scope, the project may go through a number of follow-up phases, when the team continues working on further feature development. Otherwise, the migrated website gets transferred to the agency’s support department for on-going support and maintenance.​