PWA Bunga! PWA

A PWA (Progressive Web App) is a web application that uses the latest web technologies to provide a similar user experience to that of a native application. Unlike native apps, PWAs do not require download from a store applications and can be used directly from a web browser.

They are designed to be reliable, fast and engaging, allowing users to access an offline version of the application, to receive push notifications, to adapt to different screen sizes and to integrate with other system features, such as camera or microphone.

PWAs have a wider reach than native applications because they can be used on different types of devices (smartphones, tablets, desktops) and on different web browsers (Chrome, Firefox, Safari, etc.). This means that we can create a single PWA that will work for all users, instead of having to create multiple versions for each platform or operating system.

They also have other advantages such as the fact that they are web applications, which means that they are accessible via a browser and therefore easily indexable by search engines.

PWAs are growing in popularity as they offer a cheaper and more accessible alternative to native apps. while providing a similar quality user experience.

The basic files of a PWA

In order to set up your PWA, you will find in PWA Bunga! PWAs:

• The icon files: It is important to have icons of different sizes for the application, so that it can adapt to different screens and be installed on the screen device home.
• The app.webmanifest file: This file contains app metadata, such as its name, description, icon, and theme color. It also allows the app to be installed on the home screen of the device.
• The serviceworker.js file: This is a JavaScript script that runs in the background and allows the application to be available offline. The service worker can cache resources for later use, which improves application loading speed.
• The pwabunga.js file: This file will register the Service worker and provide functions to improve the user experience of PWA events.
• The pwabunga-ui.css file: An optional CSS file for styling UI elements used by pwabunga.js.

Summary of PWA documentation Bunga! PWAs

Webmanifest

• General PWA Information
  • Name
  • Description
  • Language
  • Identifier
• Navigating the PWA
  • Homepage URL
  • Navigation scope
• PWA Theme
  • Display mode
  • Orientation
  • Theme Color
  • Background color
  • Icons

Icons

• Icons and Touch icons for application environments and older versions of Android
  • Icon display
  • Icon dimensions
  • Call icons
• Maskable icons: adaptive icons for the Android environment
  • Safe area and adaptive icon shapes
  • Display of responsive icons
  • Call responsive icons
• Touch icon for iOS environment
  • Formats and dimensions of apple-touch-icon.png

Service worker

• Configuring cache and request processing
  • Cache name and version
  • Cached Resources
  • Choice of request processing strategy
  • Declaration of a dynamic folder
• Cache manipulation
  • Adding resources to cache
  • Updating cache resources
  • Deleting a cache instance
  • Removing old versions from cache
• Request processing policies
  • Cache only
  • Network only
  • Cache first
  • Network first
  • Stale While Revalidate
• Service worker events
  • Install event
  • Activate event
  • Message event
  • Fetch event

pwabunga.js

• Service worker registration
  • pwaRegister function
• Improved user experience
  • pwaInstall function
  • pwaUpdate function
  • pwaShare function
  • pwaParams function
• Permissions
  • pwaNotification function
  • pwaGeolocation function

pwabunga-ui.css

• Variables
• PWA UI Components
  • Buttons
  • PWA Banner
  • PWA Modal
  • PWA Switch
  • PWA Alert
  • PWA Loader
• Additional Styles
  • PWA Actionbar
  • Version element of pwaParams() function
  • Listing permissions
• States of elements useful to pwabunga.js functions
  • pwaInstall() function install button
  • pwaShare() function share button
  • Elements of the pwaParams() function

Contribute

To contribute, you can use the issue trackers from the PWA Bunga! PWA module repository.

• https://github.com/PwaBunga/pwa/issues

Changes made to these 3 repositories will then be applied to the main project repository.

The issue tracker is the preferred channel to report bugs, feature requests, and submit pull requests, but please respect the following guidelines:

• Please do not use the issue tracker for personal support requests.
• Please do not derail or troll issues. Keep the discussion on topic and respect the opinions of others.