@tramvai/module-progressive-web-app 2.109.0 → 2.109.1

package/README.md

@@ -1,56 +1,25 @@
-# Pwa
+# @tramvai/module-progressive-web-app
 
-Pwa integration sw manifest icons meta
+Progressiwe Web App module.
 
-## Подключение
+Complete documentation is available in [PWA page](03-features/017-pwa.md).
 
-Необходимо установить `@tramvai/module-progressive-web-app`
+## Installation
+
+You need to install `@tramvai/module-progressive-web-app` module:
 
 ```bash
-yarn add @tramvai/module-progressive-web-app
+npx tramvai add @tramvai/module-progressive-web-app
 ```
 
-И подключить в проекте
+Then, connect `TramvaiPwaModule` from this package to `createApp` function:
 
-```tsx
+```ts
 import { createApp } from '@tramvai/core';
 import { TramvaiPwaModule } from '@tramvai/module-progressive-web-app';
 
 createApp({
   name: 'tincoin',
-  modules: [ TramvaiPwaModule ],
+  modules: [TramvaiPwaModule],
 });
-```
-
-## Переменные окружения
-
-- `SOME_ENV` - описание
-
-## Explanation
-<!-- Цель: Рассказать подробно про доступные фичи в этой библиотеке -->
-<!-- О чем написать: Рассмотреть подробно основные фичи которые есть в библиотеке и рассказать как они работают и их особенности. Лучше акцентировать внимание на самих фичах, а не на том, как можно проинтегрировать или использовать (для этого есть раздел How to) -->
-
-### Супер фича
-
-Что делает эта фича и как эта фича будет полезна пользователю?
-
-
-## API
-<!-- Цель: Подробно расписать интерфейс библиотеки -->
-<!-- О чем написать: Описать интерфейс библиотеки какие есть поля и что они означают. -->
-
-### createApp
-
-Описание интерфейсов и способ использований
-
-## How to
-<!-- Цель: ответить на вопрос как сделать что-то или как решить определенную проблему -->
-<!-- О чем написать: рассмотреть основные вопросы, которые могут возниктуь у нового пользователя -->
-### Как можно сделать что-то и решить проблему?
-
-Стоит описывать различные кейсы пользователей и как их можно решить
-
-##  Экспортируемые токены
-<!-- Цель: Вывести все доступные токены -->
-
-@inline src/tokens.ts
+```

package/lib/manifest/server.es.js

@@ -4,6 +4,14 @@ import { PROXY_CONFIG_TOKEN } from '@tramvai/tokens-server';
 import { appConfig } from '@tramvai/cli/lib/external/config';
 import { PWA_MANIFEST_URL_TOKEN, PWA_SW_SCOPE_TOKEN } from '../tokens.es.js';
 
+const validateRelativeUrl = (url) => {
+    if (!url.startsWith('/')) {
+        throw new Error(`Webmanifest url should start from "/", got ${url}`);
+    }
+    if (!(url.endsWith('.json') || url.endsWith('.webmanifest'))) {
+        throw new Error(`Webmanifest url should has .json or .webmanifest extension, got ${url}`);
+    }
+};
 const TramvaiPwaManifestModule = declareModule({
     name: 'TramvaiPwaManifestModule',
     providers: [
@@ -51,13 +59,24 @@ const TramvaiPwaManifestModule = declareModule({
                 const normalizedUrl = manifestDest.startsWith('/') ? manifestDest : `/${manifestDest}`;
                 const normalizedScope = swScope.replace(/\/$/, '');
                 const finalUrl = `${normalizedScope}${normalizedUrl}`;
-                // @todo check that finalUrl is relative and ends with .json or .webmanifest and no slash duplicates
                 return finalUrl;
             },
             deps: {
                 swScope: PWA_SW_SCOPE_TOKEN,
             },
         }),
+        provide({
+            provide: commandLineListTokens.init,
+            useFactory: ({ manifestUrl }) => function validateSwUrlAndScope() {
+                if (!process.env.TRAMVAI_PWA_WORKBOX_ENABLED) {
+                    return;
+                }
+                validateRelativeUrl(manifestUrl);
+            },
+            deps: {
+                manifestUrl: PWA_MANIFEST_URL_TOKEN,
+            },
+        }),
     ],
 });
 

package/lib/manifest/server.js

@@ -8,6 +8,14 @@ var tokensServer = require('@tramvai/tokens-server');
 var config = require('@tramvai/cli/lib/external/config');
 var tokens = require('../tokens.js');
 
+const validateRelativeUrl = (url) => {
+    if (!url.startsWith('/')) {
+        throw new Error(`Webmanifest url should start from "/", got ${url}`);
+    }
+    if (!(url.endsWith('.json') || url.endsWith('.webmanifest'))) {
+        throw new Error(`Webmanifest url should has .json or .webmanifest extension, got ${url}`);
+    }
+};
 const TramvaiPwaManifestModule = core.declareModule({
     name: 'TramvaiPwaManifestModule',
     providers: [
@@ -55,13 +63,24 @@ const TramvaiPwaManifestModule = core.declareModule({
                 const normalizedUrl = manifestDest.startsWith('/') ? manifestDest : `/${manifestDest}`;
                 const normalizedScope = swScope.replace(/\/$/, '');
                 const finalUrl = `${normalizedScope}${normalizedUrl}`;
-                // @todo check that finalUrl is relative and ends with .json or .webmanifest and no slash duplicates
                 return finalUrl;
             },
             deps: {
                 swScope: tokens.PWA_SW_SCOPE_TOKEN,
             },
         }),
+        core.provide({
+            provide: core.commandLineListTokens.init,
+            useFactory: ({ manifestUrl }) => function validateSwUrlAndScope() {
+                if (!process.env.TRAMVAI_PWA_WORKBOX_ENABLED) {
+                    return;
+                }
+                validateRelativeUrl(manifestUrl);
+            },
+            deps: {
+                manifestUrl: tokens.PWA_MANIFEST_URL_TOKEN,
+            },
+        }),
     ],
 });
 

package/lib/workbox/browser.browser.js

@@ -1,6 +1,6 @@
 import { declareModule, provide, Scope, optional, commandLineListTokens } from '@tramvai/core';
 import { MODERN_SATISFIES_TOKEN } from '@tramvai/tokens-render';
-import { ENV_MANAGER_TOKEN } from '@tramvai/tokens-common';
+import { ENV_MANAGER_TOKEN, LOGGER_TOKEN } from '@tramvai/tokens-common';
 import { PWA_WORKBOX_TOKEN, PWA_SW_URL_TOKEN, PWA_SW_SCOPE_TOKEN, PWA_SW_PARAMS_TOKEN } from '../tokens.browser.js';
 import { providers } from './shared.browser.js';
 
@@ -11,14 +11,19 @@ const TramvaiPwaWorkboxModule = declareModule({
         provide({
             provide: PWA_WORKBOX_TOKEN,
             scope: Scope.SINGLETON,
-            useFactory: ({ swUrl, swScope, modern, swParams, envManager }) => {
+            useFactory: ({ swUrl, swScope, modern, swParams, envManager, logger }) => {
+                const log = logger('pwa:workbox');
                 let workbox = null;
                 return async () => {
                     if (!('serviceWorker' in navigator)) {
-                        // @todo: logs
+                        log.info('Service Worker is not supported');
                         return workbox;
                     }
-                    const { Workbox } = await import('workbox-window/Workbox');
+                    if (workbox) {
+                        return workbox;
+                    }
+                    const { Workbox } = await import(
+                    /* webpackChunkName: "tramvai-workbox-window" */ 'workbox-window/Workbox');
                     const hasModernBuild = !!process.env.TRAMVAI_MODERN_BUILD;
                     const isCsrMode = envManager.get('TRAMVAI_FORCE_CLIENT_SIDE_RENDERING') === 'true';
                     // tramvai modern build is not supported for CSR and not compatible with PWA module in CSR mode
@@ -49,35 +54,43 @@ const TramvaiPwaWorkboxModule = declareModule({
                 modern: MODERN_SATISFIES_TOKEN,
                 swParams: optional(PWA_SW_PARAMS_TOKEN),
                 envManager: ENV_MANAGER_TOKEN,
+                logger: LOGGER_TOKEN,
             },
         }),
         provide({
             provide: commandLineListTokens.init,
-            useFactory: ({ workbox }) => async function registerWorkbox() {
-                // @todo why boolean here?
-                if (!process.env.TRAMVAI_PWA_WORKBOX_ENABLED) {
-                    return;
-                }
-                try {
-                    const wb = await workbox();
-                    if (!wb) {
-                        // @todo: logs
+            useFactory: ({ workbox, logger }) => {
+                const log = logger('pwa:workbox');
+                return async function registerWorkbox() {
+                    if (!process.env.TRAMVAI_PWA_WORKBOX_ENABLED) {
                         return;
                     }
-                    // @todo unregister when Workbox is disabled in config !!!
-                    // https://github.com/nuxt-community/pwa-module/blob/main/templates/workbox/workbox.unregister.js
-                    await wb.register();
-                    // @todo support force update strategies?
-                    if (process.env.NODE_ENV === 'development') {
-                        await wb.update();
+                    try {
+                        const wb = await workbox();
+                        if (!wb) {
+                            log.info('Service Worker registration stopped');
+                            return;
+                        }
+                        // @todo unregister when Workbox is disabled in config !!!
+                        // https://github.com/nuxt-community/pwa-module/blob/main/templates/workbox/workbox.unregister.js
+                        await wb.register();
+                        // @todo support force update strategies?
+                        if (process.env.NODE_ENV === 'development') {
+                            await wb.update();
+                        }
+                    }
+                    catch (error) {
+                        log.error({
+                            event: 'register-failed',
+                            message: 'Service Worker registration failed',
+                            error,
+                        });
                     }
-                }
-                catch (e) {
-                    // @todo: logs
-                }
+                };
             },
             deps: {
                 workbox: PWA_WORKBOX_TOKEN,
+                logger: LOGGER_TOKEN,
             },
         }),
     ],

package/lib/workbox/server.es.js

@@ -1,9 +1,25 @@
-import { declareModule, provide, Scope } from '@tramvai/core';
+import { declareModule, provide, Scope, commandLineListTokens } from '@tramvai/core';
 import { PROXY_CONFIG_TOKEN } from '@tramvai/tokens-server';
 import { appConfig } from '@tramvai/cli/lib/external/config';
 import { PWA_SW_URL_TOKEN, PWA_SW_SCOPE_TOKEN } from '../tokens.es.js';
 import { providers } from './shared.es.js';
 
+const validateSwScope = (scope) => {
+    if (!scope.startsWith('/')) {
+        throw new Error(`Service Worker scope should start from "/", got ${scope}`);
+    }
+    if (!scope.endsWith('/')) {
+        throw new Error(`Service Worker scope should ends with slash, got ${scope}`);
+    }
+};
+const validateRelativeUrl = (url) => {
+    if (!url.startsWith('/')) {
+        throw new Error(`Service Worker url should start from "/", got ${url}`);
+    }
+    if (!url.endsWith('.js')) {
+        throw new Error(`Service Worker url should has .js extension, got ${url}`);
+    }
+};
 const TramvaiPwaWorkboxModule = declareModule({
     name: 'TramvaiPwaWorkboxModule',
     providers: [
@@ -26,6 +42,20 @@ const TramvaiPwaWorkboxModule = declareModule({
                 swScope: PWA_SW_SCOPE_TOKEN,
             },
         }),
+        provide({
+            provide: commandLineListTokens.init,
+            useFactory: ({ swUrl, swScope }) => function validateSwUrlAndScope() {
+                if (!process.env.TRAMVAI_PWA_WORKBOX_ENABLED) {
+                    return;
+                }
+                validateSwScope(swScope);
+                validateRelativeUrl(swUrl);
+            },
+            deps: {
+                swUrl: PWA_SW_URL_TOKEN,
+                swScope: PWA_SW_SCOPE_TOKEN,
+            },
+        }),
     ],
 });
 

package/lib/workbox/server.js

@@ -8,6 +8,22 @@ var config = require('@tramvai/cli/lib/external/config');
 var tokens = require('../tokens.js');
 var shared = require('./shared.js');
 
+const validateSwScope = (scope) => {
+    if (!scope.startsWith('/')) {
+        throw new Error(`Service Worker scope should start from "/", got ${scope}`);
+    }
+    if (!scope.endsWith('/')) {
+        throw new Error(`Service Worker scope should ends with slash, got ${scope}`);
+    }
+};
+const validateRelativeUrl = (url) => {
+    if (!url.startsWith('/')) {
+        throw new Error(`Service Worker url should start from "/", got ${url}`);
+    }
+    if (!url.endsWith('.js')) {
+        throw new Error(`Service Worker url should has .js extension, got ${url}`);
+    }
+};
 const TramvaiPwaWorkboxModule = core.declareModule({
     name: 'TramvaiPwaWorkboxModule',
     providers: [
@@ -30,6 +46,20 @@ const TramvaiPwaWorkboxModule = core.declareModule({
                 swScope: tokens.PWA_SW_SCOPE_TOKEN,
             },
         }),
+        core.provide({
+            provide: core.commandLineListTokens.init,
+            useFactory: ({ swUrl, swScope }) => function validateSwUrlAndScope() {
+                if (!process.env.TRAMVAI_PWA_WORKBOX_ENABLED) {
+                    return;
+                }
+                validateSwScope(swScope);
+                validateRelativeUrl(swUrl);
+            },
+            deps: {
+                swUrl: tokens.PWA_SW_URL_TOKEN,
+                swScope: tokens.PWA_SW_SCOPE_TOKEN,
+            },
+        }),
     ],
 });
 

package/lib/workbox/shared.browser.js

@@ -6,7 +6,6 @@ const providers = [
         provide: PWA_SW_SCOPE_TOKEN,
         useFactory: () => {
             const swScope = process.env.TRAMVAI_PWA_SW_SCOPE;
-            // @todo validate
             return swScope;
         },
     }),
@@ -17,7 +16,6 @@ const providers = [
             const normalizedUrl = swDest.startsWith('/') ? swDest : `/${swDest}`;
             const normalizedScope = swScope.replace(/\/$/, '');
             const finalUrl = `${normalizedScope}${normalizedUrl}`;
-            // @todo check that finalUrl is relative and ends with .js and no slash duplicates
             return finalUrl;
         },
         deps: {

package/lib/workbox/shared.es.js

@@ -6,7 +6,6 @@ const providers = [
         provide: PWA_SW_SCOPE_TOKEN,
         useFactory: () => {
             const swScope = process.env.TRAMVAI_PWA_SW_SCOPE;
-            // @todo validate
             return swScope;
         },
     }),
@@ -17,7 +16,6 @@ const providers = [
             const normalizedUrl = swDest.startsWith('/') ? swDest : `/${swDest}`;
             const normalizedScope = swScope.replace(/\/$/, '');
             const finalUrl = `${normalizedScope}${normalizedUrl}`;
-            // @todo check that finalUrl is relative and ends with .js and no slash duplicates
             return finalUrl;
         },
         deps: {

package/lib/workbox/shared.js

@@ -10,7 +10,6 @@ const providers = [
         provide: tokens.PWA_SW_SCOPE_TOKEN,
         useFactory: () => {
             const swScope = process.env.TRAMVAI_PWA_SW_SCOPE;
-            // @todo validate
             return swScope;
         },
     }),
@@ -21,7 +20,6 @@ const providers = [
             const normalizedUrl = swDest.startsWith('/') ? swDest : `/${swDest}`;
             const normalizedScope = swScope.replace(/\/$/, '');
             const finalUrl = `${normalizedScope}${normalizedUrl}`;
-            // @todo check that finalUrl is relative and ends with .js and no slash duplicates
             return finalUrl;
         },
         deps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-progressive-web-app",
-  "version": "2.109.0",
+  "version": "2.109.1",
   "description": "Pwa integration - SW, manifest, icons and meta",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -23,15 +23,15 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@tramvai/tokens-common": "2.109.0",
-    "@tramvai/tokens-render": "2.109.0",
-    "@tramvai/tokens-server": "2.109.0",
+    "@tramvai/tokens-common": "2.109.1",
+    "@tramvai/tokens-render": "2.109.1",
+    "@tramvai/tokens-server": "2.109.1",
     "workbox-window": "^6.4.1"
   },
   "devDependencies": {},
   "peerDependencies": {
-    "@tramvai/cli": "2.109.0",
-    "@tramvai/core": "2.109.0",
+    "@tramvai/cli": "2.109.1",
+    "@tramvai/core": "2.109.1",
     "@tinkoff/dippy": "0.8.15",
     "tslib": "^2.4.0"
   }