-
Bartosz StarygaFront-End Solution Architect, Magnolia
Getting started with Progressive Web Apps (PWAs)
Progressive Web Apps (PWAs) are getting popular, and more and more websites and web applications are incorporating PWA elements. In this article, you will learn what a PWA is, how to get started with PWAs, and what benefits PWA techniques offer.
What is a Progressive Web App?
A PWA is a specific type of website or web application that is platform-independent and can imitate the behavior of a native mobile app across devices. Installing a PWA on your mobile device gives you a convenient app-like shortcut and makes the website or app available for offline use.
As developers, you can enable parts of your website to function offline, work like a native app, or leverage other capabilities of a PWA.
When discussing the topic, it’s important to understand that a PWA does not relate to a specific technology and does not require you to resign from your favorite framework. PWAs provide options on top of web development, for example, media queries. This means that we can implement PWAs on new and existing websites.
PWA 101
To qualify as a PWA a website must meet several requirements:
The connection to the website must be secure. The domain must have an SSL certificate and encrypt traffic.
The website must be responsive
- adjusting to mobile devices.
The website has to achieve a score of at least 75% in Google Lighthouse.
The <head> of the website must include a <meta> element defining its theme color.
The website must have a manifest
- a file containing information about the PWA including its name
- icon
- and URL to open.
A PWA needs a service worker. A service worker is a JavaScript file controlling the caching behavior in online mode and the logic to support the PWA in offline mode.
Theme color
By adding the meta tag “theme-color” the color of the browser’s toolbar changes on browser/mobile OS combinations that support this tag, such as Chrome for Android. You can add the tag, even if you're not creating a PWA.
You can set a theme color by adding just one line of code in the <head> of your HTML documents:
<meta name="theme-color" content="COLOR"> Juts replace COLOR with the color’s HEX notation:
<meta name="theme-color" content="#589823" /> Why Progressive Web Apps Make Sense
The web is changing, and consumers expect more—faster. To adapt to keep up, brands are turning to progressive web apps (PWAs).
Manifest
The manifest is a JSON file containing information about your PWA. You can include the application’s name, icon links, the URL to open upon launch, the app language, and the color of the splash screen, to name a few.
Let's focus on the basic version of the manifest for now. The following name/value pairs are the minimum:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "",
"sizes": "",
"type": ""
}
],
"start_url": "",
"background_color": "",
"theme_color": "",
"display": ""
}
Let me explain these properties:
name: The name of your application
name is a default property used for pop-ups and messages referencing your application.
short_name: The short name of your application
If the app’s name is too long to fit, short_name will be used.
icons: The icons available for your application
Each icons’ entry contains its file location and icon size. The file type is optional. When providing multiple icon sizes, the mobile device selects the best size to display.
start_url: The URL to load when the user launches the app
You can assign a dedicated start_URL to your PWA. This allows you to use a tool like Google Analytics to track how many users use your PWA vs. your native website. If you don't want to track PWA usage you can insert your website’s address or “/”.
background_color and theme_color: The colors used by your application
background_color sets the color of the splash screen, for example, the welcome screen of our application. theme_color sets the color of the toolbar and should be the same as the “theme-color” meta tag.
display: The display type of our application
display can have the following values:
fullscreen: The application will fill the entire screen including the toolbar and any secondary buttons
- giving the impression of a native mobile app. This is a very useful option for games. If for any reason this option is not available
- the fallback option is standalone.
standalone: This display option is a great imitation of a native app and very similar to fullscreen
- except that it gains elements of the mobile device UI such as a toolbar or help buttons. The fallback is minimal-ui.
minimal-ui: Depending on the user’s device and browser
- they may see the "forward"
- "back"
- and "refresh" buttons
- and possibly a print or share option. The fallback is browser.
browser: The app opens in the user's default browser
- acting like a web shortcut rather than a standalone app. This option does not have a fallback.
This is what an example of manifest.json:
{
"name": "Getting started with PWAs",
"short_name": "PWAs",
"icons": [
{
"src": "48.ico",
"type": "image/ico",
"sizes": "48x48"
}
],
"start_url": "/?utm_source=pwa",
"background_color": "#589823",
"theme_color": "#f6f6f6",
"display": "standalone"
}
manifest.json has to be linked to in the <head> your website:
<link rel="manifest" href="manifest.json" /> I recommend you version your manifest file to force your browser to load the latest version of our PWA if needed:
<link rel="manifest" href="manifest.json?v=1.0.0" /> Service Worker
A service worker allows you to extend your application with features of native mobile apps such as offline work and push notifications. It is written in JavaScript and its .js file has to be linked to your application.
It acts as a proxy between the app and the internet and caches elements of your website, such as images, HTML, and CSS files, making these elements available offline. Caching also speeds up the operation of your app in online mode, as cached elements are taken from the cache rather than downloaded from the network.
Operating as a web worker, a service worker runs as a separate thread in the background. It is unrelated to the application, so you don't block the main thread nor interfere with the work of your app. It can also perform programmed operations even when the app or browser is closed, allowing you to send push notifications.
Running in a separate thread also means that the service worker does not have access to the DOM elements, localStorage, nor AJAX. It therefore uses other web API features like Fetch API and Cache API, and operates only on asynchronous data, known as promises.
Major libraries like React, Angular, and Vue already allow you to bootstrap your app with a service worker.
The future of experience design
The concept of PWAs is very much a guiding idea for creating websites and delivering new value to end users. It's a consequence of the evolution of the internet: what used to be simple web development evolved into responsive web design and is now moving toward Progressive Web Apps.
If you want to learn more about PWAs and lean into the progressiveness of the web application experience, you can find more information on the following pages:
PWAdvent calendar (useful at any time of the year)
Managing content for PWAs
The easiest and most convenient way to make content available to PWAs is the headless approach, enabling the consumption of text, images, videos, and any other assets via API. Headless content management systems (CMSs) provide REST APIs to allow any frontend to fetch content; some also offer GraphQL to query specific content elements. The headless CMS at the heart of the Magnolia DXP, for example, offers a Delivery API, GraphQL, and audience trait parameters for headless personalization.
While many headless CMSs have neglected visual editing, Magnolia also offers a unique WYSIWYG editor that allows non-technical users to design content for PWAs using a GUI with in-line editing, drag-and-drop, and an omnichannel preview that shows content authors exactly how content will be displayed to visitors and users in the final digital experience.
Why not book a demo to learn more about how Magnolia works with PWAs?
