Learn how to build your own PWA enabled page in under 5 minutes ⚡️, what SPAs' have to do with PWA and how Shopware implements their headless commerce solution!
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
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
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.
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