Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

quave:pwa

v1.0.0•Published 4 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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

meteor add quave:pwa

Usage

In your settings

1  "packages": {
2    "quave:pwa": {
3      "name": "MyApp",
4      "appleItunesAppId": "1514380385",
5      "googlePlayAppId": "com.mysite.app",
6      "lang": "pt-BR",
7      "backgroundColor": "#6200A8",
8      "themeColor": "white"
9    }
10  }

In your server

1import { Meteor } from 'meteor/meteor';
2
3import { registerPwaManifestHandler } from 'meteor/quave:pwa';
4
5Meteor.startup(() => {
6  registerPwaManifestHandler();
7});

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

1<head>
2  ...
3  <link rel="manifest" href="/pwa.json" />
4  ...
5</head>

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.

1import { createResponderPwaManifest, MANIFEST_PATH } from 'meteor/quave:pwa';
2
3import { StoresCollection } from '../../app/stores/data/StoresCollection';
4import { getNativeStoresInfo } from './native';
5import { getBaseUrlFromHeaders } from '../mode/modeCommon';
6
7export const pwaJson = (req, res) => {
8  const baseUrl = getBaseUrlFromHeaders(req.headers);
9  const store = StoresCollection.findByFullUrl(baseUrl);
10  const nativeStoresInfo = getNativeStoresInfo(store);
11
12  createResponderPwaManifest(nativeStoresInfo)(req, res);
13};
14
15Meteor.startup(() => {
16    WebApp.connectHandlers.use(
17      MANIFEST_PATH,
18      Meteor.bindEnvironment(pwaJson)
19  );
20});

License

MIT