Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
PWA - wearethefutureofit
15
Web vs.
Mobile
Hey eCommerce,
what's wrong with you ?
We aren’t ready for mobile
The average load time for mobile sites is
19 seconds over 3G connections.
On a 4G network the average time
isn’t much better: 14 seconds.
53% of mobile site visits are abandoned if pages
take longer than 3 seconds to load.
75% of mobile sites take longer than
10 seconds to load.
Yes, we have some legacy code and
stable framework, we do serious IT!
It’s safe and stable, we don’t need these
hipster-js-things in the project!
Do we need native mobile apps ?
Why people spend so much time in native Apps ?
- push notifications bring users back
- home screen icons make access easy
- access native device features like camera
- possibly work offline
USER ACQUISITION
need to be downloaded
COSTS
expensive to build & maintain
Mobile apps
provide the finest
user experience,
BUSINESS MODEL
high commision lack of control over publishing
but have some
limitations...
USER EXPERIENCE
different on every device
PWA(s) ?
It is just a term referring to a couple of features you can add to
any web application, to any web page running in the browser
to improve it.
We need new tools!
progressively enhance your existing
web pages to feel and work more like
native mobile apps.
What is service workers ?
A service worker is a script that your browser runs in the background,
separate from a web page, opening the door to features that don't need a
web page or user interaction. they already include features like push
notifications and background sync.
It's a JavaScript Worker, so it can't access the DOM directly. Instead, a service
worker can communicate with the pages it controls by responding to messages
sent via the post Message interface, and those pages can manipulate the DOM
if needed.
Service worker is a programmable network proxy, allowing you to control how
network requests from your page are handled
Service
workers
Life cycle
life cycle
Code examples
Register/Install
Web app manifest
The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by browser to show the Add to Home Screen prompt.
A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.
Manifest
file
<link rel="manifest" href="/manifest.json">
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
Anytime. On any device.
The new mobile standard (PWA) behaves the same on each device.
It delivers a 100% responsive and smooth shopping experience, so it’s
not necessary to develop apps for different web browsers and platforms.
One app for all channels
Progressive Web Apps are user
experiences:
Reliable
Customer
Perspective
Fast
Engaging
Provide native app features
Like a
mobile
apps ?
Home screen
Full screen
Offline mode
Push notifications
Push notifications with a
one click opt-in directly
from the PWA site.
Browsing with a weak
or even lack of a
network connection
Hiding the browser top URL bar and the bottom navigation menu
Instant access from the
home screen without
opening the browser and
typing a URL
Reliable
When launched from the user’s home screen, service workers enable a Progressive Web
App to load instantly, regardless of the network state.
A service worker, written in JavaScript, is like a client-side proxy and puts you in control
of the cache and how to respond to resource requests.
By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.
Reliable
Fast
53% of users will abandon a site if it takes longer than 3 seconds to load!
And once loaded, users expect them to be fast—no junky
scrolling or slow-to-respond interfaces.
Engaging
Progressive Web Apps are installable and live on the user's home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.
The Web App Manifest allows you to control how your app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.
Engaging
With eCommerce features
Shopping - adding products to cart, stock synchronization,
Cart Expiration, Multi-store, Products bundle and many more
Ordering - Offline ordering (via in-browser queue), High
speed with local caching, SSL for all online orders, Crossell,
Upsell
Checkout - built-in checkouts, external checkouts, creating
an Account during the Checkout Process, checkout fallback
Payments - synchronization with major payment service
providers like Google, PayPal
eCommerce
features
Shipping - online Tax and Shipping Calculation,
multiple shipping addresses, free shipping
Advantages using PWA:
Lighter than native apps, less memory, less bandwidth.
No need installation instead of built in system.
Advantages
Lower cost because no need to upload the app into store,
run on any device.
Less effort to build unlike native apps which need to upload for
update release.
More support for deep links nowadays.