https://github.com/quavedev/pwa

Meteor package that allows you to configure your PWA
https://github.com/quavedev/pwa

meteor-package pwa

Last synced: 3 months ago
JSON representation

Meteor package that allows you to configure your PWA

• Host: GitHub
• URL: https://github.com/quavedev/pwa
• Owner: quavedev
• Created: 2020-05-22T13:26:07.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-30T03:54:42.000Z (over 4 years ago)
• Last Synced: 2024-06-19T03:06:28.130Z (5 months ago)
• Topics: meteor-package, pwa
• Language: JavaScript
• Size: 4.88 KB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-meteor - quave:pwa - A Meteor package that allows you to configure your PWA. (Offline)

README

        
# quave:pwa

`quave:pwa` is a Meteor package that allows you to configure your PWA.

## Why

PWA is a very simple way to provide a better experience for your users. Every website should provide a manifest compatible with PWA specifications.

We believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).

## Installation

```sh

meteor add quave:pwa

```

### Usage

In your settings

```json

  "packages": {

    "quave:pwa": {

      "name": "MyApp",

      "appleItunesAppId": "1514380385",

      "googlePlayAppId": "com.mysite.app",

      "lang": "pt-BR",

      "backgroundColor": "#6200A8",

      "themeColor": "white"

    }

  }

```

In your server

```javascript

import { Meteor } from 'meteor/meteor';

import { registerPwaManifestHandler } from 'meteor/quave:pwa';

Meteor.startup(() => {

  registerPwaManifestHandler();

});

```

In your `head` tag of your HTML add a link to this manifest:

```html

  ...

  

  ...

```

That is it, now you can access http://localhost:3000/pwa.json to check your PWA Manifest. Also you can open Chrome DevTools > Application tab > Manifest to check if everything is working correctly.

## Advanced

If you want to provide configurations in runtime (in case you serve multiple apps from the same backend) you can use

`createResponderPwaManifest` function. See a full example from a market place that each store can have a native app.

```javascript

import { createResponderPwaManifest, MANIFEST_PATH } from 'meteor/quave:pwa';

import { StoresCollection } from '../../app/stores/data/StoresCollection';

import { getNativeStoresInfo } from './native';

import { getBaseUrlFromHeaders } from '../mode/modeCommon';

export const pwaJson = (req, res) => {

  const baseUrl = getBaseUrlFromHeaders(req.headers);

  const store = StoresCollection.findByFullUrl(baseUrl);

  const nativeStoresInfo = getNativeStoresInfo(store);

  createResponderPwaManifest(nativeStoresInfo)(req, res);

};

Meteor.startup(() => {

    WebApp.connectHandlers.use(

      MANIFEST_PATH,

      Meteor.bindEnvironment(pwaJson)

  );

});

```

### License

MIT