SlideShare a Scribd company logo
1 of 42
Download to read offline
Exploring PWA for Shopware
PWA in a nutshell
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
BOOM! done! 🎉
What makes a PWA
• Installable ✔
• Offline enabled ✔
• Secure ✔
• Discoverable ✔
• Native functionalities
• Progressive
• Async processing
Make it an
application
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 ✔
• Offline enabled ✔
• Secure ✔
• Discoverable ✔
• 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 ✔
• Offline enabled ✔
• Secure ✔
• Discoverable ✔
• Native functionalities ✔
• Progressive ✔
• Async processing ✔
Mobile friendly UI
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
Exploring pwa for shopware
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
Shopware PWA
№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
The Stack
*Disclaimer: details will be subject to change!
The Stack
Shopware 6
SalesChannel API
PWA application
Symfony
RESTful API endpoints
VueJS app
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/
The Stack
Shopware 6
SalesChannel API
PWA application
Symfony
RESTful API endpoints
VueJS app
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.
Crafting you API call
API Documentation
• https://docs.shopware.com/en/shopware-platform-dev-en/
• https://swag-vsf-docs.netlify.com/
Let's write some code
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
<?php declare(strict_types=1);
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
<?php declare(strict_types=1);
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
The end result
Delivery:
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

More Related Content

What's hot

Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Aaron Gustafson
 
Php Development In The Cloud
Php Development In The CloudPhp Development In The Cloud
Php Development In The CloudIvo Jansch
 
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...Francesco Corti
 
JavaFX on Mobile (by Johan Vos)
JavaFX on Mobile (by Johan Vos)JavaFX on Mobile (by Johan Vos)
JavaFX on Mobile (by Johan Vos)Stephen Chin
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsAkshay Sharma
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialThomas Daly
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinaleAntonio Peric-Mazar
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt AEM HUB
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020Howard Greenberg
 
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...OdessaJS Conf
 
Composer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.pptComposer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.pptPromet Source
 
2016 네이버sw기술소개
2016 네이버sw기술소개2016 네이버sw기술소개
2016 네이버sw기술소개NAVER Engineering
 
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...Serdar Basegmez
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontendAudrey Neveu
 

What's hot (20)

DIWD 2011
DIWD 2011DIWD 2011
DIWD 2011
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
 
Php Development In The Cloud
Php Development In The CloudPhp Development In The Cloud
Php Development In The Cloud
 
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF appl...
 
JavaFX on Mobile (by Johan Vos)
JavaFX on Mobile (by Johan Vos)JavaFX on Mobile (by Johan Vos)
JavaFX on Mobile (by Johan Vos)
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020
 
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
 
Composer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.pptComposer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.ppt
 
2016 네이버sw기술소개
2016 네이버sw기술소개2016 네이버sw기술소개
2016 네이버sw기술소개
 
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontend
 

Similar to Exploring pwa for shopware

PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018Bhavesh Surani
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMartinSotirov
 
Apache Flex: Overview
Apache Flex: OverviewApache Flex: Overview
Apache Flex: OverviewTarun Telang
 
Containerdays Intro to Habitat
Containerdays Intro to HabitatContainerdays Intro to Habitat
Containerdays Intro to HabitatMandi Walls
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developersFilip Rakowski
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechDivante
 
Top 10 PWA Frameworks in 2020
Top 10 PWA Frameworks in 2020Top 10 PWA Frameworks in 2020
Top 10 PWA Frameworks in 2020Devathon
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationDivante
 
[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA StudioCedCommerce
 
Reusable Whiteboard Wicket Component for Apache Openmeetings
Reusable Whiteboard Wicket Component for Apache OpenmeetingsReusable Whiteboard Wicket Component for Apache Openmeetings
Reusable Whiteboard Wicket Component for Apache OpenmeetingsAndun Sameera
 
Cloud Foundry: Hands-on Deployment Workshop
Cloud Foundry: Hands-on Deployment WorkshopCloud Foundry: Hands-on Deployment Workshop
Cloud Foundry: Hands-on Deployment WorkshopManuel Garcia
 
Building a REST API Microservice for the DevNet API Scavenger Hunt
Building a REST API Microservice for the DevNet API Scavenger HuntBuilding a REST API Microservice for the DevNet API Scavenger Hunt
Building a REST API Microservice for the DevNet API Scavenger HuntAshley Roach
 
Simplified DevOps Bliss -with OpenAI API
Simplified DevOps Bliss -with OpenAI APISimplified DevOps Bliss -with OpenAI API
Simplified DevOps Bliss -with OpenAI APIVictorSzoltysek
 
Simplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptxSimplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptxssuser5faa791
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - IntroductionWebStackAcademy
 

Similar to Exploring pwa for shopware (20)

PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
 
Always on! ... or not?
Always on! ... or not?Always on! ... or not?
Always on! ... or not?
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
 
Apache Flex: Overview
Apache Flex: OverviewApache Flex: Overview
Apache Flex: Overview
 
Containerdays Intro to Habitat
Containerdays Intro to HabitatContainerdays Intro to Habitat
Containerdays Intro to Habitat
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Top 10 PWA Frameworks in 2020
Top 10 PWA Frameworks in 2020Top 10 PWA Frameworks in 2020
Top 10 PWA Frameworks in 2020
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
 
Always on! Or not?
Always on! Or not?Always on! Or not?
Always on! Or not?
 
[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio
 
Reusable Whiteboard Wicket Component for Apache Openmeetings
Reusable Whiteboard Wicket Component for Apache OpenmeetingsReusable Whiteboard Wicket Component for Apache Openmeetings
Reusable Whiteboard Wicket Component for Apache Openmeetings
 
Cloud Foundry: Hands-on Deployment Workshop
Cloud Foundry: Hands-on Deployment WorkshopCloud Foundry: Hands-on Deployment Workshop
Cloud Foundry: Hands-on Deployment Workshop
 
Building a REST API Microservice for the DevNet API Scavenger Hunt
Building a REST API Microservice for the DevNet API Scavenger HuntBuilding a REST API Microservice for the DevNet API Scavenger Hunt
Building a REST API Microservice for the DevNet API Scavenger Hunt
 
Simplified DevOps Bliss -with OpenAI API
Simplified DevOps Bliss -with OpenAI APISimplified DevOps Bliss -with OpenAI API
Simplified DevOps Bliss -with OpenAI API
 
Simplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptxSimplify DevOps with Microservices and Mobile Backends.pptx
Simplify DevOps with Microservices and Mobile Backends.pptx
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 

More from Sander Mangel

Shopware PWA - a technical overview of
Shopware PWA - a technical overview ofShopware PWA - a technical overview of
Shopware PWA - a technical overview ofSander Mangel
 
Quality Assurance at every step of a Magento project
Quality Assurance at every step of a Magento projectQuality Assurance at every step of a Magento project
Quality Assurance at every step of a Magento projectSander Mangel
 
PWA 101, what you need to know about ShopwarePWA
PWA 101, what you need to know about ShopwarePWAPWA 101, what you need to know about ShopwarePWA
PWA 101, what you need to know about ShopwarePWASander Mangel
 
Pwa, separating the features from the solutions
Pwa, separating the features from the solutions Pwa, separating the features from the solutions
Pwa, separating the features from the solutions Sander Mangel
 
Headless Magento - Meet Magento Poland 2017
Headless Magento - Meet Magento Poland 2017Headless Magento - Meet Magento Poland 2017
Headless Magento - Meet Magento Poland 2017Sander Mangel
 
Headless approach for offloading heavy tasks in Magento
Headless approach for offloading heavy tasks in MagentoHeadless approach for offloading heavy tasks in Magento
Headless approach for offloading heavy tasks in MagentoSander Mangel
 
Van Magento 1 naar 2
Van Magento 1 naar 2Van Magento 1 naar 2
Van Magento 1 naar 2Sander Mangel
 
Scaling an eCommerce environment
Scaling an eCommerce environmentScaling an eCommerce environment
Scaling an eCommerce environmentSander Mangel
 
Migrating to Magento 2 - As a Merchant
Migrating to Magento 2 - As a MerchantMigrating to Magento 2 - As a Merchant
Migrating to Magento 2 - As a MerchantSander Mangel
 

More from Sander Mangel (10)

Shopware PWA - a technical overview of
Shopware PWA - a technical overview ofShopware PWA - a technical overview of
Shopware PWA - a technical overview of
 
Quality Assurance at every step of a Magento project
Quality Assurance at every step of a Magento projectQuality Assurance at every step of a Magento project
Quality Assurance at every step of a Magento project
 
PWA 101, what you need to know about ShopwarePWA
PWA 101, what you need to know about ShopwarePWAPWA 101, what you need to know about ShopwarePWA
PWA 101, what you need to know about ShopwarePWA
 
Pwa, separating the features from the solutions
Pwa, separating the features from the solutions Pwa, separating the features from the solutions
Pwa, separating the features from the solutions
 
Headless Magento - Meet Magento Poland 2017
Headless Magento - Meet Magento Poland 2017Headless Magento - Meet Magento Poland 2017
Headless Magento - Meet Magento Poland 2017
 
Headless approach for offloading heavy tasks in Magento
Headless approach for offloading heavy tasks in MagentoHeadless approach for offloading heavy tasks in Magento
Headless approach for offloading heavy tasks in Magento
 
Van Magento 1 naar 2
Van Magento 1 naar 2Van Magento 1 naar 2
Van Magento 1 naar 2
 
Layered Landing
Layered LandingLayered Landing
Layered Landing
 
Scaling an eCommerce environment
Scaling an eCommerce environmentScaling an eCommerce environment
Scaling an eCommerce environment
 
Migrating to Magento 2 - As a Merchant
Migrating to Magento 2 - As a MerchantMigrating to Magento 2 - As a Merchant
Migrating to Magento 2 - As a Merchant
 

Recently uploaded

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 

Recently uploaded (12)

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 

Exploring pwa for shopware

  • 1. Exploring PWA for Shopware
  • 2. PWA in a nutshell
  • 3. 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
  • 4. 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
  • 5. 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
  • 7. What makes a PWA • Installable ✔ • Offline enabled ✔ • Secure ✔ • Discoverable ✔ • Native functionalities • Progressive • Async processing
  • 9. 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
  • 10. What makes a PWA • Installable ✔ • Offline enabled ✔ • Secure ✔ • Discoverable ✔ • Native functionalities ✔ • Progressive • Async processing ✔
  • 11. 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
  • 12. What makes a PWA • Installable ✔ • Offline enabled ✔ • Secure ✔ • Discoverable ✔ • Native functionalities ✔ • Progressive ✔ • Async processing ✔
  • 14. 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
  • 15. 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
  • 16. 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
  • 18. 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
  • 19. 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
  • 21. №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
  • 23. *Disclaimer: details will be subject to change!
  • 24. The Stack Shopware 6 SalesChannel API PWA application Symfony RESTful API endpoints VueJS app
  • 25. The Stack Shopware 6 SalesChannel API PWA application Symfony RESTful API endpoints VueJS app
  • 26. PWA Application Shopware PWA Nuxt JS Module Based on Atomic Design State Management Modularity Routing Retail UX Playbook
  • 27. 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/
  • 28. The Stack Shopware 6 SalesChannel API PWA application Symfony RESTful API endpoints VueJS app
  • 29. 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.
  • 33. Writing a plugin Stays the same • Admin • Backend New way of working • Templating • Delivery of content
  • 34. Writing a plugin Client requirements:
  • 36. Defining the PWA configuration { "slots": [ { "name": "SwPluginTopNavigation", "file": "main.vue" } ], "settings": {} } src/Resources/app/pwa/config.json
  • 37. 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
  • 38. 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 <?php declare(strict_types=1); 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
  • 39. Annotations for API documentation <?php declare(strict_types=1); 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
  • 40. 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
  • 42. 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