Appearance

Powered by Platform One

Progressive Web Apps (PWAs) on Padawan ​

What are Progressive Web Apps? ​

Progressive Web Apps (PWAs) are web applications built using standard web technologies (HTML, CSS, JavaScript) that offer a native-app-like experience, including features like offline access, push notifications, and can be installed, while being accessible via a URL and discoverable through search engines.

Key Characteristics of PWAs ​

  • Built with Web Technologies: PWAs leverage the same technologies as websites (HTML, CSS, JavaScript), making them accessible from any browser and on any device.
  • Installable: Users can "install" PWAs to their home screen, giving them a native app-like experience.
  • Offline Capabilities: PWAs can function offline, allowing users to access content and features even without an internet connection.
  • Reliable: PWAs are designed to be fast and dependable, even on unreliable network connections.
  • Discoverable: As websites, PWAs are easily discoverable in search engine results.
  • Cross-Platform: PWAs can run on multiple platforms and devices from a single codebase.
  • Linkable: PWAs can be easily shared via a URL.
  • Progressive Enhancement: PWAs use progressive enhancement, meaning they provide a basic experience for all users and enhance it progressively based on the capabilities of the user's device and browser.

How PWAs Work ​

Service Workers ​

PWAs utilize service workers, which are background scripts that enable features like offline caching, push notifications, and background synchronization.

Web App Manifest ​

A web app manifest is a JSON file that provides metadata about the PWA, such as its name, icon, and splash screen, which helps the browser understand how to install and display the PWA.

Benefits of PWAs ​

  • Improved User Experience: PWAs offer a native-app-like experience, including fast loading times, offline capabilities, and push notifications, which can lead to higher user engagement and satisfaction.
  • Cost-Effective: Developing a PWA is often cheaper and faster than developing a native app, as it leverages existing web technologies and a single codebase.
  • Wider Reach: PWAs can reach a wider audience than native apps, as they are accessible from any browser and device.
  • Easier to Update: PWAs can be updated easily, as they are hosted on a web server.

Getting started ​

We recommend using the PWA Vite Plugin to create a new project that is already pre-configured for PWAs in your framework of choice (Vue, React, Svelte, etc). Run the following command to create a new project:

sh
npm create @vite-pwa/pwa@latest

When you're ready to deploy your PWA on Padawan, simply follow the Padawan Getting Started docs and configure your repo to use the npm package type (ex: npm.yml@platform-one/products/bullhorn/padawan/padawan-pipeline for your GitLab CI/CD Configuration File).

Example ​

We have deployed an example PWA using the method above.

Feel free to access the site on a mobile device and add it to your home screen.

Example Features ​

Permissions ​

There are many permissions that can affect how PWA features are enabled. For debugging purposes it is useful to show what permissions are active using the Permissions API (MDN Reference).

Notifications ​

You can use the Notification API (MDN Reference) to send device-local notifications to your users. However, this type of notification can only be received when the user has the PWA open and the PWA is not in the device background.

Mobile Push Notifications are not supported at this time, as they rely on 3rd-party services such as Google's Firebase Cloud Messaging (FCM) or Apple Push Notification service (APNs).

Geolocation ​

You can use the Geolocation API (MDN Reference) to get the device's current location and use it in your PWA.

SpeechSynthesis (Text-to-Speech) ​

You can use the Web Speech APIs (MDN Reference) to have your PWA read text.

Additional Resources ​

Powered By Platform One