-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
28ba2d9
commit c6daa50
Showing
1 changed file
with
82 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,83 @@ | ||
# pwa-template | ||
PWA Installable website Template | ||
# PWA Installable Website | ||
|
||
NOT FINISHED | ||
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](#features) | ||
- [Usage](#usage) | ||
- [Customization](#customization) | ||
- [Contributing](#contributing) | ||
- [License](#license) | ||
|
||
## 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:** | ||
|
||
```bash | ||
git clone https://github.com/NajmAjmal/pwa-template.git | ||
``` | ||
|
||
2. **Navigate to the Project Directory:** | ||
|
||
```bash | ||
cd pwa-template | ||
``` | ||
|
||
3. **Install Dependencies (if any):** | ||
|
||
You may need to install dependencies if your project requires them. | ||
|
||
```bash | ||
# 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](LICENSE). |