📱Progressive Web Application (PWA)

Owned by Michel van Beek
Last updated: Jun 15, 2023 by Martin
6 min read

Introduction

The Progressive Web App (PWA) feature of the Web Manager. This page provides an overview of what a PWA is, its benefits, and the features it offers. Additionally, it highlights the built-in PWA functionality of the Web Manager, including its current capabilities and future developments. Also, it will cover how to use the PWA. The page will be updated once we have developed, improved, or investigated more.

What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) is a web application that combines the best features of a website and a native mobile app. It leverages modern web technologies (CSS/HTML/JS) to deliver a reliable, engaging, and app-like user experience across different devices. PWAs can be accessed directly through web browsers and can currently also be installed on devices, receiving notifications, and camera access, providing seamless offline capabilities and enhanced performance.

To make this all work together, there is a concept called the service worker which is already created in its basic forms for the Web Manager. It is basically a JavaScript file that runs separately from the main browser thread (lower impact on performance). It intercepts network requests and caches or retrieves resources from the cache. It also delivers push messages. Service workers enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content. Using Service Worker PWAs can load immediately and also provide a reliable user experience in poor network conditions also.

So the fundamental work has been created to move forward. Please see developments in the future later on.

Benefits of a Progressive Web App

PWAs offer several advantages over traditional web applications and native mobile apps:

  1. Enhanced User Experience: PWAs provide a smooth and immersive user experience with features like smooth animations (like animations and page transitions), push notifications, and the already existing offline functionality.

  2. Built-in for the Web Manager: Within every site, there is the possibility made for enabling the PWA or that specific site, which gives them the possibility to select the features and functionality the app needs to have. This works seamlessly with all sites and clients

  3. Cross-platform/device compatibility: PWAs work across multiple platforms, including desktops, smartphones, and tablets, reducing the need for platform-specific development.

  4. Improved performance: PWAs are optimized for speed and performance, resulting in faster loading times and better overall performance. The Web Manager’s overall score in Lighthouse is very high

  5. Seamless installation: Users can easily install PWAs on their devices without visiting any app store, like Google Play of the iOS version, eliminating installations and increasing user engagement.

Current Features of the Web Manager's Progressive Web App

Home Screen Functionality

The Web Manager's PWA feature allows users to add the website to their device's home screen, providing easy acc

Home Screen Functionality

The Web Manager's PWA feature allows users to add the website to their device's home screen, providing easy access with just a single tap. This enhances user convenience and encourages frequent visits to the website.

Offline Functionality

With the Web Manager's PWA, guests can continue using the application even in offline mode. This means they can access important (non-dynamic) content, browse through previously viewed pages, and interact with the app without an internet connection. Once connectivity is restored, the PWA automatically syncs any changes made while offline.

Performance Optimization

The PWA feature of the Web Manager incorporates performance optimization techniques to ensure a smooth and fast user experience. It adheres to best practices outlined by tools like Lighthouse to deliver optimized results, improving page load times, responsiveness, and overall performance.

Manual and Dynamic manifests

The manifest file plays a crucial role in defining the app's metadata and appearance. There are two types of manifests: manual manifests and dynamic manifests. Inside the Web Manager, we have managed to create both as we have multiple clients and flexibility. A manual manifest contains information about the PWA, such as its name, description, icons, theme colors, display modes, and other properties.

Inside the Web Manager, we have the possibility to configure the manual manifest over the PWA's appearance and behavior. They can specify icons/images of various sizes and resolutions. For example, the icons/images can be displayed in browser menus, on the home screen, or in task switchers, providing users with a consistent visual identity for the app on different devices. Additionally, define the display mode, which determines how the PWA appears to users (for example as a standalone app or within a browser tab).

On the other hand, there are dynamic manifests that are fetched dynamically and when needed. It can create a server-side script or utilize client-side code to generate the manifest on-the-fly based on certain conditions or user preferences. This is especially handy when it comes to the Web Manager’s way of working with different Sites and clients. The Web Manager will make use of this in regard to creating a dynamic manifest on-the-fly that showcases (personalized) product recommendations or displays the accommodation results.

Future Developments

Manifests

Dynamic manifests will be extensively used for results, dynamic fetching from APIs, and other important functionalities. The standalone or fullscreen display modes on how the PWA appears to the users will also be developed.

Improved working

There are still many factors we need to consider and implement. Especially when it comes to performance and the way the app is handling requests etc. Our continuous performance improvements will help here by splitting the work and proposing the app only what it needs. This will then deliver the best UX.

Also, we should investigate the update part, where we will integrate the actual app feeling in a separate chunk of code, so it won’t affect the UX and works still in the same container as before.

Location Integration

In future updates, the Web Manager's PWA will provide location integration capabilities. This will enable location-based services, such as displaying “nearby” accommodations or perhaps facilities/events and activities, tailored to the user's current location.

Push Notifications

The Web Manager's PWA will also support push notifications, allowing personalized and timely updates to be sent directly to devices. This feature will enable efficient communication and engagement with users, such as sending a confirmation that an upload has taken place on the my environment or important announcements. This will also need modifications in different widgets

Camera Integration

The future development of camera integration in the Web Manager's PWA will enable interactive functionalities such as image uploads and QR code scanning. This will expand the possibilities to be used for online travel party updates during booking or before reaching the reception in the my environment. Possibilities can be endless.

Bluetooth

The Web Manager's PWA will also incorporate Bluetooth technology to enable seamless interactions with for example the door locks (keyless entry), allowing guests to unlock doors using their smartphones. Bluetooth integration could also facilitate personalized notifications or offers based on proximity to specific amenities or points of interest within the accommodations.

How to use it in the Web Manager

Please provide screenshots and tests (QA can help)

  1. Double-check the site settings: To ensure that PWA is working, check inside the site settings of the site you want to function as a PWA and enable the feature.

  2. Upload the requested information: See the PWA tab for more information on what is needed to give the app-like feeling and working behaviors.

  3. Access the website/site: Open the web browser on your device and navigate to the URL of the PWA you want to install. For example COF or KRM.

  4. Add to the home screen: Once the PWA loads, look for the browser's menu or settings options. In most browsers, this can be accessed via a three-dot icon or a “gear/cog” icon located at the top or bottom (new iOS version) of the browser window.

  5. Find the "Add to Home Screen" option: Within the browser menu or settings, search for an option labeled "Add to Home Screen," "Install," or a similar phrase. This option may be located under a "More Tools" or "Share" submenu.

  6. Activate the installation: Select the "Add to Home Screen" option. This action will prompt a dialog box or overlay where you can customize the app's name or confirm the installation.

  7. Confirm the installation: Review the details and, if desired, modify the app's name to your preference. Then, select the "Add" or "Install" button to proceed.

  8. PWA Icon on the home screen: After confirming the installation, the PWA icon should appear on your device's home screen, similar to a native app icon.

  9. Accessing the PWA: To launch the PWA, locate its icon on your device's home screen, just like you would with any other installed app. Tap the icon to open the PWA in a window, without the browser's address bar and other elements. (that is the stand-alone mode).

Enabling other features

Inside the site, there are placeholders created for the functionalities that will come in future developments..