Welcome to the PWA Bunga! documentation

PWA Bunga! is a modular, intuitive, and user-friendly front-end template designed for quick and efficient development of websites and, in particular, Progressive Web Apps (PWA).

This documentation explains how to use the files provided in the PWA Bunga! project to create performant and user-friendly progressive web applications. It also provides information on best practices for customizing the files to fit the specific needs of your application and how to integrate them to create a complete progressive web application.

Whether you are a beginner or experienced developer, this template will help you save time and focus on creating specific features for your website or application, rather than setting up the basic architecture.

• Contents of PWA Bunga!
• Getting started with PWA Bunga!
• Follow the PWA Bunga! project
• Contribute to the PWA Bunga! Project

Contents of PWA Bunga!

This front-end template is designed in a modular way and consists of three main modules: Starter, CSS, and PWA.

PWA Bunga! Starter

The Starter module provides the basic files and folders to quickly start a website or PWA project. This includes resource folders, an HTML template, 404 and 403 error pages, an htaccess file, favicons in .ico, .svg or .png formats, as well as empty CSS and JS files that can be filled according to your needs.

• Asset folders
• Blank Files
• Error pages
  • Error 403
  • Error 404
• Favicons
  • ICO File
  • SVG File
  • Don't have a logo in SVG format?
• Template
  • HTML tag
  • Meta charset tag
  • Title tag
  • Meta description tag
  • viewport meta tag
  • Open Graph
  • Favicons
  • Touch-icon for iOS
  • Progressive Web App
  • Theme management in light or dark mode
  • Call CSS files
  • PWA User Interface
  • Call Javascript files
• .htaccess file
  • Performance
  • Security
  • Redirects

PWA Bunga! CSS

The CSS module includes a base CSS file with best practices, HTML element normalization, ergonomic improvements, and reset to improve consistency and compatibility across browsers, as well as to make the developer's work easier.

• Scroll behavior
  • Ergonomic improvements
• Universal Inheritances
  • Best Practices
• Selection
  • Reset
• The root element
  • Best Practices
  • Ergonomic improvements
• Sections
  • Reset
• Grouping content
  • Ergonomic improvements
  • Reset
• Text-level semantics
  • Normalization
  • Ergonomic improvements
  • Reset
• Embedded content
  • Normalization
  • Ergonomic improvements
  • Reset
• Tabular data
  • Normalization
  • Ergonomic improvements
  • Reset
• Forms
  • Normalization
  • Ergonomic improvements
  • Reset
• Interactive
  • Normalization

PWA Bunga! PWA

The PWA module provides files and instructions to transform your website into a Progressive Web App (PWA). This includes the webmanifest file that contains application metadata, icons for the home screen, the service worker file that allows the application to work offline, a JavaScript file to enhance the user experience, and an optional CSS file to customize the user interface.

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

Getting started with PWA Bunga!

Old school way

• Download the PWA Bunga! front-end template zip:
• Download PWA Bunga! 1.0
• Open your favorite code editor
• Customize the template to fit your project!

Follow the PWA Bunga! project

Source code

PWA Bunga! is a project maintained on Github.

Github account of PWA Bunga!

• https://github.com/PwaBunga

PWA Bunga!'s main repository

• https://github.com/PwaBunga/template

PWA Bunga!'s documentation repository

• https://github.com/PwaBunga/documentation

PWA Bunga! modules repositories

These 3 repositories correspond to the 3 modules of PWA Bunga!, they are present to facilitate and organize contributions to the project.

• https://github.com/PwaBunga/starter
• https://github.com/PwaBunga/css
• https://github.com/PwaBunga/pwa

What's New

To stay informed about the latest updates and news, you can follow the project's Twitter account:

• https://twitter.com/pwabunga

Discussing the project

Feel free to use the discussions module in the main repository to give your opinion, thoughts or ideas about PWA Bunga!

• https://github.com/PwaBunga/template/discussions

Contribute to the PWA Bunga! Project

To contribute, you can use the issue trackers of the PWA Bunga! module repositories.

• https://github.com/PwaBunga/starter/issues
• https://github.com/PwaBunga/css/issues
• 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.