All About Progressive Web Apps and implementation in TYPO3

• PWAs have 36% higher conversion rates than native apps.
• According to Smashing Ideas, companies that switch to PWA notice an increase from at least 20% by up to 250% of increased revenue for businesses.
• Businesses switching to PWAs notice a decrease in page loading speed of up to 10 times
• PWAs can be up to 90% smaller than native mobile apps.
• See how the major brands have adapted PWA and flourished using them,

To unleash the potential of PWA for your TYPO3 website, Macopedia has developed an awesome solution by means of TYPO3 Extension for PWA Solution named, “pwa_manifest”.

It allows you to start exploring PWA solutions for TYPO3 in minutes. It provides a docker/ddev local environment with both TYPO3 and JS demo applications. It's based on

• https://github.com/TYPO3-Headless/headless
• https://github.com/TYPO3-Headless/headless_news
• https://github.com/TYPO3-Headless/nuxt-typo3
• https://github.com/TYPO3-Headless/create-nuxt-typo3

Let’s learn how to installing and configure the PWA Manifest Module for your TYPO3 website in simple steps,

Key Requirements

The extension requires TYPO3 in version at least 9.5.

Download PWA Manifest Extension

The extension is available at TYPO3 Extension Repository for TYPO3 version 9 & 10 in the beta version.

Click here to download.

Installation

To install the PWA manifest extension using composer use,

composer require friendsoftypo3/pwa_manifest

Moreover, if you wish to include the TypoScript template, and go to the page with ?type=835.

Configurations

Once done, go straight to Site Configuration in your TYPO3 backend and edit your page and add the required information.

The Web App Manifest

The TYPO3 manifest.json file is what allows users to add the PWA to their home screen. It contains configurations that you can modify to change how your PWA will behave – like the name, display name, background color, orientation, and more.

Here is a reference for your understanding 

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

The file will be added to the head tag of your index page.

<link rel="manifest" href = "/manifest.json">

Upon configurations and setting up your site, as shown in the image below, it shows the “Add to the home screen” option. When you select that option, an icon will be created on the home screen.

To refresh; PWAs are mobile sites built with a JavaScript framework that delivers an app-like experience to users. PWA’s look and behave like regular web pages but have some of the functionality of a mobile app.

You don’t need to re-code your entire website to add PWA features. Depending on your site, there are different ways to design a PWA.

The be considered a PWA, an user experience must be:

• Fast – Should take less than three seconds to load
• Reliable – It should load quickly even under poor network conditions
• Engaging – It should immerse the user in the experience
• Responsive – Must work across devices of different shapes and sizes

If you have a TYPO3 site, It’s pretty straightforward to convert your TYPO3 site into a PWA with a TYPO3 Extension.

Working Mechanism of PWA