Exploring pwa for shopware

The early beginnings
“ I had been angling for a way to make web apps first-class citizens since the Chrome Apps era. In London in ~'12-'13, Jake Archibald and
Alex started working on Service Workers.
The other piece of the plan was a small manifest file. Marcos from Mozilla was working on the manifest format and we joined him there.
Jeff Burtoft from MSFT was angling for something very similar within the constraints of UWP”
- Alex Russell, Senior Staff Software Engineer at

What makes a PWA
• Installable (https://codelabs.developers.google.com/codelabs/your-first-pwapp/#6)
• Offline enabled (https://www.monterail.com/blog/pwa-working-offline)
• Secure (https://letsencrypt.org/)
• Discoverable (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json)
• Native functionalities
• Progressive
• Async processing

How to build your own PWA in 5 minutes
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Shopware PWA</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png"
href="/favicon32x32.png" size="32x32">
<link rel="apple-touch-icon"
href="/favicon32x32.png">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<img src="/logo.png" />
<h1>My Amazing Shopware PWA</h1>
<p>Welcome to my Shopware PWA webshop</p>
<script>
navigator.serviceWorker
.register('/serviceworker.js').then(function(reg) {
console.log('Serviceworker registered under
scope:', reg.scope);
}).catch(function(err) { console.log('ERROR!!! ',
err); });
</script>
</body>
</html>
Index.html
this.addEventListener('install', event => {
event.waitUntil(
caches.open('shopware-cache').then(function(cache)
{
return cache.addAll([
'logo.png',
'offline.html'
]);
})
);
});
this.addEventListener('fetch', event => {
if (event.request.method === 'GET' &&
event.request.headers.get('accept').includes('text/ht
ml')) {
event.respondWith(
fetch(event.request.url).catch(error => {
return caches.match('offline.html');
})
);
} else {
event.respondWith(
caches.match(event.request).then(function
(response) {
return response || fetch(event.request);
}));
}
});
serviceworker.js
{
"name": "My Amazing Shopware PWA",
"short_name": "Shopware PWA",
"description": "A very simple Shopware PWA",
"theme_color": "#189EFF",
"background_color": "#189EFF",
"display": "fullscreen",
"orientation": "portrait",
"start_url": "/index.html",
"icons": [{
"src": "favicon32x32.png",
"sizes": "32x32",
"type": "image/png"
}]
}
manifest.json
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Shopware PWA - offline</title>
<meta charset="UTF-8">
</head>
<body style="text-align:center; padding-top:10px;
font-family: Arial, Helvetica, sans-serif">
<img src="logo.png" />
<h1>You are currently offline</h1>
<p style="color:#607182;">Computer says No</p>
</body>
</html>
offline.html
https://github.com/sandermangel/shopware-simple-pwa

What makes a PWA
• Installable ✔
• Offline enabled ✔
• Secure ✔
• Discoverable ✔
• Native functionalities
• Progressive
• Async processing

The SPA
"JavaScript can be used in a web browser to display the user interface (UI), run
application logic, and communicate with a web server."
- source: https://en.wikipedia.org/wiki/Single-page_application
- Routing
- Asset management
- Dynamic content fetching
- View building
Because every solution needs a ton of vague acronyms

What makes a PWA
• Installable ✔
• Secure ✔
• Native functionalities ✔
• Progressive
• Async processing ✔

Making it Progressive
- Webpack and Babel provide backward compatibility for Javascript, CSS and other assets
- Typescript is used in the core, developing on Shopware PWA can be done with "traditional" Javascript
✔ At any time the application should work as well as a regular responsive website.
✔ Provide fallbacks & graceful degradation for features such a Service Workers which are not supported in older browsers
Because not everyone spends half of their paycheck on new electronics

What makes a PWA
• Installable ✔
• Secure ✔
• Native functionalities ✔
• Progressive ✔
• Async processing ✔

Keeping Mobile Ergonomics in mind
Users usually hold the phone one-handed (49%).
The span of possible gestures is very narrow.
“How Do Users Really Hold Mobile Devices”
- Steven Hoober
https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

Rethink content and UI
● Users scroll, forget about "Above the fold"
● Position all navigation within thumb reach
● Rethink UI elements, sliders don't work too well on mobile
● Prevent flickering and layout shift

Key Takeaways So Far
• PWA is a collection of functionalities and technologies that can be implemented on any frontend application*
• An SPA gives it the ability to (pre) cache data and behave like a native app
• Design for all devices, not just the latest and greatest
• An amazing PWA starts with the design
* extremely broad generalisation that should not be taken literal

Tech stack built for decoupled PWA applications
• Modern tech stack
• API first and used internally
• Proven and well understood API technology
• Built from the ground up

Tech stack built for decoupled PWA applications
• 3 years of experience with PWA for ecommerce
• Built on proven and easy to use frameworks
• Designed specifically for Shopware 6
• Extensible for plugins, themes and project specific code

№1 Open Source PWA for eCommerce
The fastest growing Open Source Repo on GitHub. TOP5 Repo!
The leading PWA solution for eCommerce, extensive community of developers, possibility to
build mobile-first commerce without changing the backend.
50+
PARTNERS GLOBALLY
70+
LIVE IMPLEMENTATIONS
2500+
PEOPLE IN THE COMMUNITY
130+
ACTIVE CONTRIBUTORS ON GITHUB
INNOVATION
FOR ECOMMERCE
AWARD
#2
PRODUCT
OF THE DAY

*Disclaimer: details will be subject to change!

The Stack
Shopware 6
SalesChannel API
PWA application
Symfony
RESTful API endpoints
VueJS app

PWA Application
Shopware PWA
Nuxt JS Module
Based on Atomic Design
State Management
Modularity
Routing
Retail UX Playbook

Easy to Customize
• Atoms > Molecules > Organisms > Pages
• Customize your components via Props
• If Props don't solve it, use Slots.
• Modify Page Composition
• Global changes via SCSS variables
Resources
https://storybook.storefrontui.io/
https://services.google.com/fh/files/events/pdf_retail_ux_playbook.pdf
https://atomicdesign.bradfrost.com/table-of-contents/

PWAify your Shopware Instance
Download https://github.com/elkmod/SwagShopwarePwa
/store-api/v1/pwa/page
Resolves a given path to the cms or product page, include specific data in the response through specific parameters.
/store-api/v1/pwa/navigation
Delivers a category along with its child categories down to a desired level.
/api/v1/_action/pwa/dump-bundles
Connect Shopware plugins with your PWA during the application build by providing metadata and PWA specific source files.

API Documentation
• https://docs.shopware.com/en/shopware-platform-dev-en/
• https://swag-vsf-docs.netlify.com/

Writing a plugin
Stays the same
• Admin
• Backend
New way of working
• Templating
• Delivery of content

Writing a plugin
Client requirements:

HelloCody
Example code: https://github.com/elkmod/SwagHelloCody

Defining the PWA configuration
{
"slots": [
{
"name": "SwPluginTopNavigation",
"file": "main.vue"
}
],
"settings": {}
}
src/Resources/app/pwa/config.json

Templating
<template>
<div class="hello-cody">
<h3>{{ phrase }}</h3>
</div>
</template>
<style lang="scss" scoped>
.hello-cody {
padding: 20px 5px;
min-height: 30px;
text-align: right;
h3 {
font-weight: 100;
}
}
</style>
[...]
src/Resources/app/pwa/main.vue
[...]
<script>
import axios from "axios";
import config from "~/shopware-pwa.config.js";
const SHOPWARE_API_URL = config.shopwareEndpoint;
const PLUGIN_ENDPOINT_URL = "/sales-channel-api/v1/random-phrase";
const SW_ACCESS_KEY = config.shopwareAccessToken;
export default {
data() {
return { phraseResponse: null };
},
async mounted() {
try {
this.phraseResponse = await axios.get(
`${SHOPWARE_API_URL}${PLUGIN_ENDPOINT_URL}`,
{ headers: { "sw-access-key": SW_ACCESS_KEY } }
);
} catch (e) { console.warn("SwHelloCody.vue: ", e); }
},
computed: {
phrase() {
return ( this.phraseResponse.data.phrase );
}
}
};
</script>
src/Resources/app/pwa/main.vue

API response
<?php declare(strict_types=1);
namespace SwagHelloCodyController;
use ...;
class RandomPhraseController extends AbstractController
{
private $phraseGenerator;
public function __construct(
RandomPhraseGenerator $phraseGenerator
) {
$this->phraseGenerator = $phraseGenerator;
}
public function randomPhrase()
{
return new JsonResponse([
'phrase' => $this->phraseGenerator
->generatePhrase()
]);
}
}
src/Controller/RandomPhraseController.php
namespace SwagHelloCodyContent;
class RandomPhraseGenerator
{
const PHRASES = [
'👻 - Hello, I am localghost',
'Did you try turning it off and on again?',
'Clear the cache first',
'Works on my machine 🤷🏻‍♀',
'What could possibly go wrong?',
'Home is where the Wifi is',
'There's no place like 127.0.0.1',
];
function generatePhrase(): string
{
try {
$randomIndex = random_int(0, count(self::PHRASES)-1);
} catch (Exception $e) {
$randomIndex = 0;
}
return self::PHRASES[$randomIndex];
}
}
src/Content/RandomPhraseGenerator.php

Annotations for API documentation
namespace SwagHelloCodyController;
use ...;
/**
* @RouteScope(scopes={"sales-channel-api"})
*/
class RandomPhraseController extends AbstractController
{
private $phraseGenerator;
public function __construct(RandomPhraseGenerator $phraseGenerator)
{
$this->phraseGenerator = $phraseGenerator;
}
/**
* @Route("/sales-channel-api/v{version}/random-phrase", name="sales-channel-api.random-phrase", methods={"GET"})
*/
public function randomPhrase()
{
return new JsonResponse([
'phrase' => $this->phraseGenerator
->generatePhrase()
]);
}
}
src/Controller/RandomPhraseController.php

The internals of deploying the plugin
Application Server Build Server PWA Server
./plugins:dump-pwa
plugins-config.json
plugin-sources.zip
building process
Create nuxt project
Configure project (url, auth)
Apply shopware-pwa default sources
Load assets (+configuration)
Process every plugin
Build project
./pwa-cli build --prod
pwa_build.zip
deploy
$ unzip pwa_build.zip
$ yarn start

To summarize PWA on Shopware 6
• Shopware PWA is built by the market leader in the Ecommerce PWA space
• Learn about the PWA stack by diving into VueJS, NuxtJS, UI Library and then Shopware API endpoints and Shopware PWA
• The augmented API endpoints allow you to craft the response
• The deploy process is an important step in PWA development
• Check HelloCody to understand implementation details

Exploring pwa for shopware

More Related Content

What's hot (20)

Similar to Exploring pwa for shopware (20)

More from Sander Mangel (10)

Recently uploaded (20)

Exploring pwa for shopware