What are Progressive Web Applications (PWAs)?
Progressive Web Applications (PWA) comprise a cutting edge new technology for designing and developing websites for mobile devices. While many are talking about PWAs as a hot new trend, there’s little consensus around what it means to you and your online customers. This blog post will address those concerns and provide context into what PWAs mean for companies running ecommerce on SAP Hybris, which is now known as SAP Commerce.
First of all, let’s begin with a few simple, clear definitions. First up, the key difference between desktop websites and web applications is that web applications don’t usually fully refresh the page. Instead, apps create small transactions of the content that will be loaded within the page. With that subtle difference in mind, we can move on to define progressive web apps.
PWAs are web applications that load and behave like regular websites but with many of the features, functionalities and benefits of mobile apps, empowering you to deliver a best-of-both-worlds mobile experience for your customers. A few key criteria that help to define PWA:
• Mobile First. PWAs are mobile first, which is beyond mobile friendly. Responsive design is the minimum you can expect from a PWA. More frequently, PWAs makes use of user network management tactics to transfer only the necessary data. An example of this is caching resources like fonts, CSS or JavaScript rather than running frequent requests for these assets.
• Offline Support. PWAs provide offline support after the initial page load. This means your visitors who have already loaded your PWA can experience the full site even if they are not connected. Network management, client side routing and local storage all allow you to provide this offline support.
• New Browser Capabilities. PWAs take advantage of new browser capabilities to allow more complex user interface interactions and improve user engagement.
• In-browser Simulation: PWAs have practically everything a native application has but you have the ability to simulate everything in a browser.
What makes PWAs different?
So much of what differentiates PWAs from standard websites or mobile apps is the architecture behind the scenes that empowers the new features and functionalities. Because of this, you may need a full-stack web architect to help you develop PWAs rather than a front-end web developer who specializes in a certain portion of the architecture.
There’s a new structure in place called the Service Worker, a scriptable network proxy that serves as an interface between the javascript code, the browser and the network. Service Workers use cache mechanisms more efficiently to supply content between the network and device even during offline periods.
There’s also the concept of client-side routing, which renders content by running JavaScript in the browser, further empowering offline support in PWAs. This is in contrast to server-side routing, the previous standard for web development, which requires an active Internet connect to relay content.
Best of all, PWAs offer new technical features that take advantage of the latest browser capabilities. More and more, you’re already seeing these out on the web. In just the past few months we’ve seen these features:
• Push notifications (requires user permission)
• Localization / GPS (requires user permission)
• Camera access (requires user permission)
• Big local storage (up to 2 GB) to persist and cache critical information
There are deeper architectural details to PWA that we will cover in future blog posts, including appshells, lazy patterns, isomorphic JavaScript and the need to learn new front end frameworks, libraries and technologies such as TypeScript.
How does it fit in with SAP Commerce?
If you’re using SAP Hybris (now SAP Commerce) as your ecommerce platform of choice, you’re wondering the potential impact that PWAs will have on your operations and your business. This is a very interesting challenge because we use Java in developing for Hybris. Hybris uses a different architecture and technology than what the industry is currently using for PWAs.
Our vision for developing a PWA on SAP Hybris involves building the JavaScript App Shell hosted on SAP Commerce cloud or on premise and dispatched from the app server. After we serve the app shell, we then request data to Hybris on the client side using a REST API by using OCC or a similar approach.
The best case scenario for structuring a PWA with SAP Commerce is:
Client –> Storefront –> API –> SAP Commerce
The advantages of developing PWAs within the context of SAP Commerce Cloud are many. Of course, scalability ranks highly, as few ecommerce platforms can match the enterprise-level scalability of SAP Commerce.
Decoupling is also a major advantage. The ability to decouple your front-end and back-end in PWA means that you can eventually change whatever back-end components you’d like, the content management system for example, without impacting your front-end. Conversely, you could change your entire front-end to use a new framework and still reuse the connections to the back-end. The ecommerce back-end will handle lower requests since it will only dispatch the minimum data required by the front end. Lastly, servers with this architecture are easier to tune. For example, you could install a caching system to your front-end without impacting the back-end.
Staying ahead of the PWA trend and being mindful of PWA in your SAP Commerce development certainly gives you a lot to think about. Fortunately, ObjectWave takes pride in being one of the oldest and most experienced SAP Commerce integrators out there. Click here to request a consultation, and let us help you.
