Magento 2 PWA in 5 minutes without re-platforming. Real use case.

One of the Magento 2 merchants X decided to drop Magento PWA Studio re-platforming and just to use this -> PWA Magento 2 Free extension:

GitHub - Genaker/Magento2PWA: PWA extension for Magento 2. Just install and PWA is ready.

Unfortunately, to avoid a legal issue with Magento/Adobe Commerce. Cloud, etc. Agreement we can’t tell the name of the real store/merchant. Adobe doesn’t allow publicity against them and merchant can have an issue, my either. So the client using Magento Open Source but the module works for the Commerce Version of the Magento either.

Cost Benefits: ~$100,000 PWA Studio high maintenance implementation project become a 0$(free) opens-source extension installation.

The installation took just 5 minutes.

Sure, Magento 2 Luma KnockoutJS based frontend is not sweet. However, the buggy Magento PWA Studio Single Page Application approach is not a solution. It uses the same slow Magento GraphQL backend to fetch the data. These extensions also support best in the class Hyva modern theme. The Hyva, as a Magento UI less frontend provides the best possible performance without PWA Studio overcomplication and bloat. So, using Hyva and Magento PWA extension you can achieve the best possible PWA performance for Magento 2.

Note: live link is not available currently all changes are on staging. When changes will be pushed to production this article will be updated.

Also, the site made a huge contribution to the real Open-Source Adobe free community Magento PWA initiative by creating pull requests with the improvements.

So, To implement Magento PWA features :

• Offline access
  Magento PWAs work even if a device loses its Internet connection, so your customers will no longer have their experience interrupted by spotty WiFi.
• User experience
  Magento PWAs provide a more responsive user experience, improving user engagement with features like push notifications.
• Installability
  Magento PWAs can be accessed through a web browser, eliminating download times while providing users with the option of accessing the app directly on their device.
• Security
  Magento PWAs pass network requests through service workers, minimizing their interactions with the internet.
• Discoverability
  Magento PWAs can be accessed and used right from a link in a search engine or on social media, exposing them to far more potential users than a visit to even the most popular app store.
• Cross-browser compatibility
  Magento PWAs work across all modern browsers, including Chrome, Edge, Firefox, and Safari.

You need just:

composer require genaker/module-pwa

or

php -d memory_limit=-1 /usr/local/bin/composer require genaker/module-pwa 

After you need to run:

php bin/magento setup:upgrade --keep-generated

You don’t need to remove generated we are not using the stupid Magneto deployment model. We are having additional command it deploys/generates all service worker JS/image data to the media folder.

However, if you are using the HTML minify feature:

you will have the error:

Invalid template file: '/var/www/html/var/view_preprocessed/pub/static/vendor/genaker/module-pwa/view/frontend/templates/head/serviceworker_register_sript.phtml' in module: '' block's name: 'serviceworker_register_sript' [] []

So, you need to regenerate “static” .phtml files additionally.

After you can run

php bin/magento setup:di:compile

Don’t forget to clear OpCache by restarting PHP-fpm.

The module requires just a single setting:

Store->Configuration->PWA->PWA

Manifest JSON file :

{
  "theme_color": "#354af6",
  "background_color": "#6a35f6",
  "display": "fullscreen",
  "scope": "/",
  "start_url": "/",
  "name": "Magento 2 PWA Extension ",
  "short_name": "Magento 2 PWA ",
  "description": "Magento PWA not Studio",
  "icons": [
    {
      "src": "/media/pwa/images/icon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/media/pwa/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/media/pwa/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Web app manifest (i.e. manifest.json) is a JSON file that provides the necessary metadata for your Progressive Web App. With a properly configured web app manifest, your PWA can behave more similarly to a native app — installable to the home screen, and capable of smooth splash screen transitions.

Configuring your web app manifest typically means describing how your PWA will look on the user’s home screen, as well as how it’ll look when the user first launches your app. Additionally, the behavior of the browser UI (whether it’ll be visible or hidden) is also configurable.

Web app manifest is fully supported in Chrome, Edge, Android Browser, Chrome for Android, Firefox for Android, and Samsung Internet. It is partially supported in Safari.

When Manifest Json is ready to run:

php bin/magento pwa:generate

it will create proper PWA files…

Don’t forget to clear the cache. The extension will add additional PWA tags to all HTML pages:

php bin/magento c:c

test the files.

cat pub/serviceworker.js

it is your main Service worker File :

you need also test HTTP access to this file: domain.com/serviceworker.js

you can also check the image file:

site.com/media/pwa/images/icon-512x512.png

Magento 2 PWA logo

when you made any changes into manifest.json or serviceworker.js you should redeploy to propagate changes.

Also, you can check the header PWA block:

<link rel='manifest' href='/media/pwa/manifest.json'>
<link rel="apple-touch-icon" sizes="192x192" href="/media/pwa/images/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="32x32" href="/media/pwa/images/icon-32x32.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/media/pwa/images/icon-512x512.png" />
<meta name="apple-mobile-web-app-title" content="Magento PWA" /><meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="theme-color" content="#b5121b" />

As an additional requirement you should create an offline page :

or You will have the error during Service Worker installation:

serviceworker.js:1 Uncaught (in promise) TypeError: Request failed

In the new version (>1004) of the Magento PWA extension, we have an installation script. It creates this page. hover over you should know about this requirement. To change the offline page URL you can edit:

Magento2PWA/serviceworker.js at main · Genaker/Magento2PWA

const offlineFallbackPage = "/offline";

and redeploy PWA.

After the installation you should see :

Let's summarise, to enable PWA you need just these commands:

composer require genaker/module-pwa
php bin/magento setup:upgrade --keep-generated
php bin/magento setup:di:compile
php bin/magento pwa:generate
php bin/magento c:c

Done! That takes less than 5 minutes.

Magento 2 manifest.json file

The manifest is JSON data that contains several properties.

• name - displayed on the splash-screen below the app icon
• short_name - displayed below the shortcut on the desktop or on the home screen
• description - a general description of the application
• start_url - the URL that is loaded first when you open the application from its shortcut
• scope - the pages of the site that are part of the PWA experience. The "." value includes everything in the manifest directory and subdirectories. It is, therefore, more relevant to place the latter at the root of the site
• background_color - the background color of the splash-screen
• theme_color - the general theme color of the application, used in the status bars for example if they are displayed
• display - specifies the display mode. Here are the different modes available sorted by order of fallback:
• fullscreen: all of the available display area is used and no browser UI is shown.
• standalone: look and feel like a standalone application. This means that the application will have its own window, its own icon in the launcher, and so on. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar.
• minimal-ui: the application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. These elements will vary by browser and system.
• browser (default): the application opens in a conventional browser tab or new window, depending on the browser and platform.
• orientation - defines the default orientation for mobile devices: any, natural,landscape, portrait...
• dir - specifies the primary text direction for the name and description fields: ltr, rtl orauto.
• lang - the main language of the application.
• related_applications - an array of native applications that are installable by the underlying platform and are intended to be alternatives to the PWA that provides similar/equivalent functionality. Ignore if there is no native application.
• icons - list of application icons of different resolutions, used for a shortcut and splash screen. The recommended sizes to be supplied are at least 192x192px and 512x512px. The device will automatically pick the best icon depending on the case. It is also interesting to provide a SVG vector version of the icon that will fit a maximum of sizes.

Manifest generators

Since the application manifest is a text file, you can choose to write it by hand or use a tool that simplifies its creation. Several tools are available online:

• https://app-manifest.firebaseapp.com/
• Web App Manifest Generator

Using one of these tools, generate a manifest file for the app. Your manifest should at least contain the following properties: name,short_name, lang,start_url, display: 'standalone', theme_color and icons with at least two PNG icons sized 192x192px and 512x512px and one SVG version.

Magento Service workers explained

Service Workers are a virtual proxy between the browser and the network. They finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline.

They run on a separate thread from the main JavaScript code of our page, and don’t have any access to the DOM structure. This introduces a different approach from traditional web programming — the API is non-blocking, and can send and receive communication between different contexts. You are able to give a Service Worker something to work on, and receive the result whenever it is ready using a Promise-based approach.

They can do a lot more than “just” offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc. Service workers are quite powerful as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely.

Helpful notes

• Browsers will automatically display an install banner for your web app when it meets PWA certain
• You can append a parameter to your start URL to detect when your app is launched from homescreen, or you can use the display-mode CSS media query
• For games, you can set fullscreen display and landscape orientation
• If your app is under a subdirectory (such as this one), make sure you set start_url and scope to that directory, otherwise launching will default to /
• Not all browsers(Safari) implement the manifest yet, however the <meta> tags will help bridge that gap
• You can even link to your native app as a related app and get the benefit of the install banner
• To determine if the install prompt was successful, or defer it, use the beforeinstallprompt event
• Make sure to add a Service Worker so that your app can work offline and even send notifications