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.

[meandmycode]

Fwiw, even up to 3.1.1 the behaviour on windows is broken as the urls being generated are using windows style paths (backslash) instead of web paths (forward slash), this affects the src in the manifest and the filename of the manifest, there seems to be some compensation built into web browsers to correct these, but it probably wasn't intended.

I can understand that since path.resolve is used to specify where the icons are locally, then this becomes different on either platform, but there should be some normalization for the final web paths.

[arthurbergmz]

Okay, I've came up with a regex that should normalize most URI cases.
Can you guys help me testing my last commit?

[meandmycode]

@arthurbergmz just tried against master and this seems perfect on windows now :-), many thanks

[george3447]

@arthurbergmz I have tried the master version and its working fine, thank you so much for the quick fix. 👍

[arthurbergmz]

No problem, guys! Thanks for reporting these issues.

Please, update to v3.1.5.