Latest version (3.1.2) breaks the injected manifest URL in windows 10

[george3447]

PWA Configuration

new WebpackPwaManifest({
            name: packageConfig.name,
            short_name: 'Angular PWA',
            description: packageConfig.description,
            background_color: '#ffffff',
            theme_color: '#607d8b',
            inject: true,
            icons: [{
                src: path.resolve('src/assets/images/logo.png'),
                sizes: [96, 128, 192, 256, 384, 512],
                destination: path.join('assets', 'icons')
            },
            {
                src: path.resolve('src/assets/images/logo.png'),
                size: '1024x1024',
                destination: path.join('assets', 'icons')
            }
            ]
        })

Please see the difference,

html-webpack-plugin: 2.29.0
webpack: 3.3.0
webpack-pwa-manifest: 3.1.1

<link rel="manifest" href="\manifest.ef1097bcbf4ac5ce67f564d4256f7a35.json" /> its working fine

html-webpack-plugin: 2.29.0
webpack: 3.3.0
webpack-pwa-manifest: 3.1.2

<link rel="manifest" href="//manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json" /> not working

[arthurbergmz]

May I see your Webpack config? I think it's related to your publicPath.

[george3447]

webpack.production.config.ts

import * as webpack from 'webpack';
import * as path from 'path';

import * as CleanWebpackPlugin from 'clean-webpack-plugin';
import * as CompressionPlugin from 'compression-webpack-plugin';
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
import * as UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import * as WebpackPwaManifest from 'webpack-pwa-manifest';
import * as OfflinePlugin from 'offline-plugin';

const packageConfig: any = require("../package.json");
const fileName = "[name].[chunkhash]";
const hostEndPoint = {
    distLocal: "/"
};

let cwd = process.cwd();
console.log(process.env.NODE_ENV);
let ENV = process.env.npm_lifecycle_event;
let outputPath = path.join(cwd, '/', ENV);


const extractSASS = new ExtractTextPlugin({
    filename: `assets/css/${fileName}.css`
});

const extractCSS = new ExtractTextPlugin({
    filename: `assets/css/${fileName}.css`
});

const prodConfiguration: webpack.Configuration = {
    devtool: 'nosources-source-map',
    output: {
        path: outputPath,
        publicPath: hostEndPoint[ENV],
        filename: `assets/js/${fileName}.js`,
        chunkFilename: `assets/js/${fileName}.js`,
        devtoolModuleFilenameTemplate: '[resource-path]'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: extractSASS.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'postcss-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            })
        }, {
            test: /\.css$/,
            use: extractCSS.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { sourceMap: true } }
                ]
            })
        },

        {
            test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$/,
            use: `file-loader?name=assets/images/[name].[hash].[ext]`
        },
        {
            test: /\.woff$|\.woff2$|\.eot$|\.woffs$|\.ttf$/,
            use: `file-loader?name=assets/fonts/[name].[hash].[ext]`
        }]
    },
    plugins: [
        new CleanWebpackPlugin([ENV], { root: cwd }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            options: {
                tslint: {
                    emitErrors: true,
                    failOnHint: true
                },
                context: '',
                resolve: {},
                ts: {
                    configFileName: './tsconfig.esnext.json'
                }
            }
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        extractSASS,
        extractCSS,
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor", "manifest"]
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new WebpackPwaManifest({
            name: packageConfig.name,
            short_name: 'Angular PWA',
            description: packageConfig.description,
            background_color: '#ffffff',
            theme_color: '#607d8b',
            inject: true,
            icons: [{
                src: path.resolve('src/assets/images/logo.png'),
                sizes: [96, 128, 192, 256, 384, 512],
                destination: path.join('assets', 'icons')
            },
            {
                src: path.resolve('src/assets/images/logo.png'),
                size: '1024x1024',
                destination: path.join('assets', 'icons')
            }
            ]
        }),
        new OfflinePlugin({
            excludes: ['manifest.*.json', '**/*.map'],
            AppCache: false,
            ServiceWorker: {
                events: true
            }
        })
    ]
};

export default prodConfiguration;`

[arthurbergmz]

Was the file 'manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json' properly exported by the plugin?
Can you check if it is located at '/manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json'?

[george3447]

Yes the manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json exported properly, the issue is with injected URL.

injected URL : <link rel="manifest" href="//manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json" />

[arthurbergmz]

Can you, please, run a test using my last commit? I added a regex that should do the trick.
Thank you!

[george3447]

Yes I have run the test, unfortunately its produced the following URL

<link rel="manifest" href="\/manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json" />

I think the following regex will fix the issue, but you may need to verify with other environments

"//manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json".replace(/\/+/g, '\/') 
"/manifest.d1684d7a301d4e6cc8cc450a1300a3ee.json"

[arthurbergmz]

Oops, my bad!
Please, update WebpackPwaManifest on your project to v3.1.3.

Thanks!

[george3447]

I think you missed to release the new build, see https://github.com/arthurbergmz/webpack-pwa-manifest/blob/master/dist/WebpackPwaManifest.js#L53 its not updated

[arthurbergmz]

Oh gosh, I can't believe I've done that.
Please, update to v3.1.4.

Sorry! 😆

[george3447]

Sorry, I just fount that the same issue is happening for generated URLs inside manifest.json. Please see the following output using different version of the plugin.

v3.1.1 - working

{
  "icons": [
    {
      "src": "\\assets\\icons\\icon_1024x1024.de89d8a8253bd1e1ed7b92c2b11a63dc.png",
      "sizes": "1024x1024",
      "type": "image/png"
    },
    {
      "src": "\\assets\\icons\\icon_512x512.dadc1d30ceccb0f6527b63da54ad29a6.png",
      "sizes": "512x512",
      "type": "image/png"
    }
..................
]}

v3.1.4 - not working

{
  "icons": [
    {
      "src": "//assets\\icons/icon_1024x1024.de89d8a8253bd1e1ed7b92c2b11a63dc.png", // using path.join
      "sizes": "1024x1024",
      "type": "image/png"
    },
    {
      "src": "//assets/icons/icon_512x512.dadc1d30ceccb0f6527b63da54ad29a6.png", // not using path.join
      "sizes": "512x512",
      "type": "image/png"
    }
..................
]}

[arthurbergmz]

Ok, now that worries me.
I'm gonna check this asap.