Magento 2 an Adobe Commerce Create PWA app in 5 minutes without PWA Studio and other single-page JS solutions
Many Agencies and Adobes representations advertise PWA Studio as a Progressive Web App however, in reality, they just add PWA as a buzzword to attract merchants. To have the PWA app you don’t need to re-platforming to Adobe PWA studio also.
Adobe and tires agencies like to suggest you platforming because they wanna charge $1 000 000 from you for the re-platforming and customization, however today I will show you how to make PWA for free in 5 minutes and save $1M
Basically, there are 4 main requirements for Magento PWA app:
- A web manifest.json, with the correct fields filled in
- The web site to be served from a secure (HTTPS) domain
- An icons to represent the app on the device
- A service worker registered, to allow the app to work offline (this is required only by Chrome for Android currently)
There are no requirements to convert your site Single Page APP or platform Adobe PWA Studio. PWA can work with any existing Magento theme.
At first, you need to star this Open Source Magento Repo:
You can also install the source codes from this repo (recommended) or use the composer Magento PWA package:
composer require genaker/module-pwaInstall This module and after run the command to Generate JS ServiceWorker and Icon images and Manifest files:
php bin/magento pwa:generateThis command creates this folder pub/media/pwa and serviceworker.js file in the pup/
1- PWA images:
Images will be used in the PWA. When a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on.
The icons property is an array of image objects. Each object must include the src, a sizes property, and the type of image. To use maskable icons, sometimes referred to as adaptive icons on Android, you'll also need to add "purpose": "any maskable" to the icon property. See Manifest File.
2. Magento PWA Manifest File:
The manifest file can have any name but is commonly named manifest.json and served from the root (your website's top-level directory). The specification suggests the extension should be .webmanifest, but browsers also support .json extensions, which may be easier for developers to understand.
{
"short_name": "Magento PWA ReactJS Theme ",
"name": "Magento PWA ",
"icons": [
{
"src": "/media/pwa/images/icons-vector.svg",
"type": "image/svg+xml",
"sizes": "512x512"
},
{
"src": "/media/pwa/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/media/pwa/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "How's weather today?",
"short_name": "Today",
"description": "View weather information for today",
"url": "/today?source=pwa",
"icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
},
{
"name": "How's weather tomorrow?",
"short_name": "Tomorrow",
"description": "View weather information for tomorrow",
"url": "/tomorrow?source=pwa",
"icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
}
],
"description": "Magento React Luma PWA module",
"screenshots": [
{
"src": "/images/screenshot1.png",
"type": "image/png",
"sizes": "540x720"
},
{
"src": "/images/screenshot2.jpg",
"type": "image/jpg",
"sizes": "540x720"
}
]
}
Most of the fields are self-explanatory, but to be certain we’re on the same page:
name: The full name of your web app.short_name: Short name to be shown on the home screen.description: A sentence or two explaining what your app does.icons: A bunch of icon information — source URLs, sizes, and types. Be sure to include at least a few, so that one that fits best will be chosen for the user's device.start_url: The index document to launch when starting the app.display: How the app is displayed; can befullscreen,standalone,minimal-ui, orbrowser.theme_color: A primary color for the UI, used by the operating system.background_color: A color used as the app's default background, used during install and on the splash screen.
A little bit more about display and display_override options:
display
You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Games can even be made to launch full screen.
fullscreenOpens the web application without any browser UI and takes up the entirety of the available display area.standaloneOpens the web app to look and feel like a standalone app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar.
minimal-uiThis mode is similar to standalone, but provides the user a minimal set of UI elements for controlling navigation (such as back and reload).
browserA standard browser experience.
display_override
Web apps can choose how they are displayed by setting a display mode in their manifest as explained above. Browsers are not required to support all display modes, but they are required to support the spec-defined fallback chain ("fullscreen" → "standalone" → "minimal-ui" → "browser"). If they don't support a given mode, they fall back to the next display mode in the chain. This inflexible behavior can be problematic in rare cases, for example, a developer cannot request "minimal-ui" without being forced back into the "browser" display mode when "minimal-ui" is not supported. Another problem is that the current behavior makes it impossible to introduce new display modes in a backward-compatible way since explorations like tabbed application mode don't have a natural place in the fallback chain.
These problems are solved by the display_override property, which the browser considers before the display property. Its value is a sequence of strings that are considered in the listed order, and the first supported display mode is applied. If none are supported, the browser falls back to evaluating the display field.
In the example below, the display mode fallback chain would be as follows. (The details of "window-control-overlay" are out-of-scope for this article.)
"window-control-overlay"(First, look atdisplay_override.)"minimal-ui""standalone"(Whendisplay_overrideis exhausted, evaluatedisplay.)"minimal-ui"(Finally, use thedisplayfallback chain.)"browser"
{
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
}The browser will not consider display_override unless display is also present.
3. Magento PWA Service worker JS:
Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
Service worker concepts and usage
A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available).
A service worker is run in a worker context: it, therefore, has no DOM access and runs on a different thread to the main JavaScript that powers your app, so it is non-blocking. It is designed to be fully async; as a consequence, APIs such as synchronous XHR and Web Storage can’t be used inside a service worker.
Service workers only run over HTTPS, for security reasons. Having modified network requests, wide open to man in the middle attacks would be really bad. In Firefox, Service Worker APIs are also hidden and cannot be used when the user is in private browsing mode.
That's it! Done!
Basically, you can edit Manifest.json, Service Worker, and Icons files manually without generating them all the time.
Check PWA Online:
Demo of the websites :
Google Page Speed insight PWA performance on mobile:
You can also try to install it as an app on your mobile phone. With additional work, you can push this app to Apple and Google Play store.
You can also add the PWA app into the Microsoft Store and Apple Store with all iOS features including native Push notifications. If you are interested in this solution feel free to send me an email on (yegorshytikov@gmail.com) with the Subject: Magento 2 fast PWA.
Real Magento PWA implementation real use case:
