Tecna-pwa-lib NPM

TecnaPwaLib

This project library was generated with Angular CLI version 7.1.3.

Usage

Create a new angular project with ng new my-app-pwa

Change directory cd my-app-pwa

Install tecna-pwa-lib library as npm dependecy npm install tecna-pwa-lib

Modify /src/index.html as below

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <title>My App Pwa</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="blue">
  <meta name="apple-mobile-web-app-title" content="My App Pwa">
  <link rel="apple-touch-icon" href="assets/icons/icon-152x152.png" sizes="152x152">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#000000">
</head>
<body>
<tpwa-app></tpwa-app>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

Modify /src/app/app.module.ts as below

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
import {TecnaPwaAppComponent, TecnaPwaLibModule} from 'tecna-pwa-lib';


const config = {
  app_name: 'My App Pwa',
  rest_api_username: '',
  rest_api_password: '',
  rest_api_url: 'http...',
  local_db_name: 'myappPwaDb'
};

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
    TecnaPwaLibModule.forRoot(config)
  ],
  bootstrap: [TecnaPwaAppComponent]
})
export class AppModule { }

Delete /src/app/app.component.

Modify /src/main.ts for importing 'hammerjs'

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Create /src/manifest.json

{
  "gcm_sender_id": "370072803732",
  "name": "My App Pwa",
  "short_name": "My App Pwa",
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/my-app-pwa/",
  "start_url": "/my-app-pwa/index.html",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Create /src/.htaccess as below for webserver pwa response compliance

RewriteEngine On
RewriteBase /my-app-pwa
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

RewriteRule ^/ /index.html [R=301,NC,L]

create /ngsw-config.json and replace with your server endpoint address for service worker configuration

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }, {
      "name": "remote-assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "urls": [
          "https://fonts.googleapis.com/icon?family=Material+Icons",
          "https://fonts.gstatic.com/s/materialicons/**"
        ]
      }
    }
  ],
  "dataGroups" : [
    {
      "name" : "performance-data",
      "urls" : [
        "https://your.server.host/wp-json/wc/v3/shipping/zones",
        "https://your.server.host/wp-json/wc/v3/shipping/zones/*/locations",
        "https://your.server.host/wp-json/wc/v3/shipping/zones/*/methods",
        "https://your.server.host/wp-json/wc/v3/products?per_page=*&page=*&featured=true",
        "https://your.server.host/wp-json/wc/v3/products/categories?per_page=*&page=*&orderby=name",
        "https://your.server.host/wp-json/wc/v3/products?per_page=*&page=*&category=*",
        "https://your.server.host/wp-json/wc/v3/products/*/variations",
        "https://your.server.host/wp-json/wc/v3/products/*",
        "https://your.server.host/wp-json/wc/v3/coupons?code=*",
        "https://your.server.host/wp-json/wp/v2/media/*",
        "https://your.server.host/wp-content/uploads/**"
      ],
      "cacheConfig" : {
        "maxSize" : 400,
        "maxAge" : "1h",
        "strategy": "performance"
      }
    },
    {
      "name" : "freshness-data",
      "urls" : [
        "https://your.server.host/wp-json/app-config/v1/settings",
        "https://your.server.host/wp-json/app-config/v1/notifications",
        "https://your.server.host/wp-json/app-config/v1/push_subscriber_add",
        "https://your.server.host/wp-json/app-config/v1/push_subscriber_delete",
        "https://your.server.host/wp-json/app-config/v1/product/categories?per_page=*&page=*&orderby=name"
      ],
      "cacheConfig" : {
        "maxSize" : 400,
        "maxAge" : "1h",
        "timeout": "2s",
        "strategy": "freshness"
      }
  ]
}

Modify /angular.json in the build section of my-app-pwa project add 'src/manifest.json' and 'src/.htaccess' and "serviceWorker": true

...

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app-pwa-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              "src/.htaccess"
            ],
            "styles": [
              "src/styles-theme.scss",
              "src/styles.less"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.min.js"]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true
            }
          }
        }
        
...

Create required images in the /src/assets/images folder

add_to_home_screen_icon.png
iphone_share_icon.png
loading_spinner.png
logo-small.png

Create required icons in the /src/assets/icons folder

icon-72x72.png
icon-96x96.png
icon-128x128.png
icon-144x144.png
icon-152x152.png
icon-192x192.png
icon-384x384.png
icon-512x512.png
icon-black-72x72

Build app Run ng build --prod --base-href /my-app-pwa/ to build and package the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build required for enabling service worker.

Development server

Run ng build tecna-pwa-lib --watch for library auto rebuild watching Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run npm run package to build and package the library project. The build artifacts will be stored in the dist/ directory. Run npm run publish to publish the library project. The artifacts will be publish in the npm repository with current logged npm user.