Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitsan-technologies/pwa
Simple and easy to integrate PWA
https://github.com/nitsan-technologies/pwa
Last synced: about 2 months ago
JSON representation
Simple and easy to integrate PWA
- Host: GitHub
- URL: https://github.com/nitsan-technologies/pwa
- Owner: nitsan-technologies
- License: mit
- Created: 2022-12-29T06:54:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T14:05:25.000Z (11 months ago)
- Last Synced: 2024-10-15T22:23:51.974Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 44.9 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ns-pwa
> Simple and easy to integrate most popular PWA feature to your love website. Please perform easy installation guide below to quickly enable PWA feature.
**Features**:
- Plug-n-play PWA feature
- Easy to install PWA
- Pre-configured Package
- Customizable and Extendible
- Access content on any device
- Access web content even when the internet connection is weak or not available
- Load websites quickly
- Benefit from a high-quality user experience
**Advantages**:
- Fast, Reliable, Engaging
- Mobile-First Approach
- Save More Than 75%
- Good for SEO
- Your Website Feels like Native-Mobile
## Table of Contents
- [Demo](https://t3planet.com)
- [Install](#install)
- [Usage](#usage)
- [Browser Support](#browser-support)
- [FAQs](#faqs)
- [Contribute](#contribute)
- [Changelog](#changelog)
- [License](#license)
## Install
```sh
# You can install lozad with npm
$ npm i @nitsantechnologies/ns-pwa
# Alternatively you can use Yarn
$ yarn add @nitsantechnologies/ns-pwa
```
## Usage
Then with a module bundler like rollup or webpack, use as you would anything else:
## Initialization
```javascript
// using ES6 modules
import NsPwa from "@nitsantechnologies/ns-pwa";
const NsPwaVar = new NsPwa({
//Add Your Site/App Short Name
pwa_short_name: "",
// Add your Site/App Name
pwa_name: "",
// Add your Site/App Start URL (Like: (/), (https://example.com/), (https://example.com/blog))
pwa_start_url: "Main URL (like: / or https://example.com/)",
// Add your Site/App Background Color (Like: #000, #fff, RGB(0,0,0))
pwa_background_color: "Background Color",
// Add your Site/App Display
pwa_display: "standalone",
// Add your Site/App Theme Color (Like: #000, #fff, RGB(0,0,0))
pwa_theme_color: "Theme Color",
// Add your Site/App Icons
pwa_icon_48: "/pwa/icon/pwa-48.png",
pwa_icon_72: "/pwa/icon/pwa-72.png",
pwa_icon_96: "/pwa/icon/pwa-96.png",
pwa_icon_144: "/pwa/icon/pwa-144.png",
pwa_icon_192: "/pwa/icon/pwa-192.png",
pwa_icon_512: "/pwa/icon/pwa-512.png",
//You can see your JSON Code with this option
pwa_get_json: true,
});
```
## Service-worker.js
```javascript
//Add Code On Service-Worker JS
const dataCacheName = 'App Data';
const cacheName = 'App';
const filesToCache = [
'/',
'/pwa/pwa.png',
];
//install the sw
self.addEventListener('install', function (e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function (cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function (e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function (keyList) {
return Promise.all(keyList.map(function (key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function (e) {
console.log('[Service Worker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function (response) {
return response || fetch(e.request);
})
);
});
```
## Add your Code At Tag With All proper Data
```html
```
## Browser Support
Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver).
## FAQs
- You can generate your PWA Icons/Images form here > [PWA Icons](https://tools.crawlink.com/tools/pwa-icon-generator/).
- We are Added Service Worker JS Code So you can add Easily
- We use ES6 modules
- Compatible With All Type Front-end Project
- You need To add files Manually (Because Some Limitation)
- PWA Usefull for Better SEO/UI-UX
- PWA Create One type of App For your Website
## Contribute
Interested in contributing features and fixes?
[Excited to receive your PR](https://github.com/nitsan-technologies/pwa).
## License
[MIT](LICENSE) © [NITSAN Technologies](https://nitsantech.com)