Skip to content

NajmAjmal-old/pwa-template

Repository files navigation

PWA Installable Website

This is a simple Progressive Web App (PWA) installable website that you can use as a template for your projects. It includes basic HTML, CSS, and JavaScript files to get you started.

Table of Contents

Features

  • Basic structure for a PWA installable website.
  • A service worker to cache assets and provide offline functionality.
  • An example of how to prompt users to install the PWA.
  • A sample manifest file for configuring the PWA's appearance.

Usage

  1. Clone the Repository:

    git clone https://github.com/NajmAjmal/pwa-template.git
  2. Navigate to the Project Directory:

    cd pwa-template
  3. Install Dependencies (if any):

    You may need to install dependencies if your project requires them.

    # Example for installing dependencies using npm
    npm install
  4. Customize the Website:

    • Edit the index.html file to add your website's content.
    • Modify the styles.css file to change the website's styling.
    • Customize the manifest.json file to configure the PWA's details.
  5. Deploy to GitHub Pages (Optional):

    If you want to host your PWA website on GitHub Pages:

    • Create a GitHub repository for your project.
    • Push your code to the GitHub repository.
    • Enable GitHub Pages in your repository settings.
  6. Access Your PWA:

    Visit your website in a web browser. You should see your customized PWA installable website.

  7. Install the PWA:

    When you visit the website, you'll have the option to install the PWA by clicking the "Install PWA" button. This will add your website to the user's home screen for easy access.

Customization

You can customize this project in various ways:

  • Content: Edit the index.html file to replace the lorem ipsum content with your own text, images, and elements.

  • Styling: Modify the styles.css file to change the website's appearance. Customize fonts, colors, and layout to match your branding.

  • PWA Configuration: Update the manifest.json file to configure how your PWA appears and behaves. Change the app name, description, icons, and more.

  • Service Worker: Extend the service-worker.js file to implement advanced caching strategies or add additional functionality.

Contributing

If you'd like to contribute to this project or report issues, please feel free to open an issue or submit a pull request. Your contributions are welcome!

License

This project is licensed under the MIT License.