zonkyio / ember-web-app

This Ember addon helps you configure and manage the Web App Manifest to create Progressive Web App

Home Page:https://zonkyio.github.io/ember-web-app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

incorrectly appending rootUrl to assets and fingerprinting not working

arenoir opened this issue · comments

Icons are being generated with rootURL appended to the asset path. I believe this is incorrect as all other assets are do not have the rootURL automatically appended.

On top of the rootURL being appended the fingerprinting is also being garbled.

Take a look at the outputted index.html file.

<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-57x57-2fe7f8869de43c10b8b3539158fa49a9.png" sizes="57x57">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-72x72-aab13d4db8d4936d4e7e9864c8730367.png" sizes="72x72">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-76x76-e8745ba00253a83b84fefc6a0d11786d.png" sizes="76x76">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-114x114-6933ac20e6ba3e54ff77ae7339e7e44b.png" sizes="114x114">
<link rel="apple-touch-icon" href="/mobile/assets/images/apple/apple-touch-icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-152x152-bb8b37c1ec0d898303c5a79113bfbc03.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-144x144-54cdad57da3c4a9bce86acc39dea1f3c.png" sizes="144x144">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-180x180-e58ac18012614ce608dfa549363b3c39.png" sizes="180x180">
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/mobile/assets/images/apple/apple-touch-icon-144x144-54cdad57da3c4a9bce86acc39dea1f3c.png" sizes="144x144">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-320x460-e18ce856d6e2a7282c13a9b8fc670819.png" sizes="320x460">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-640x920-560a9e2f62bb4614270f82e613eca62b.png" sizes="640x920">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-640x1096-62dec087eec70063c6a5d0e2f7ee088f.png" sizes="640x1096">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-748x1024-99c56c1f01be0a30f4cdac49856d7b7f.png" sizes="748x1024">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-768x1004-692683fee0df112d5970671da8616efb.png" sizes="768x1004">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-1496x2048-37f18dfda64189b65c909d68eb396201.png" sizes="1496x2048">
<link rel="apple-touch-icon" href="/mobile/https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-startup-image-1536x2008-15fe3da222d3408edd727d581cb938d5.png" sizes="1536x2008">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-no-text-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-no-text-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-no-text-280.png" sizes="280x280">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-no-text-512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-800.png" sizes="800x800">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-1000.png" sizes="1000x1000">
<link rel="apple-touch-icon" href="/mobile/assets/icons/fp-logo-1600.png" sizes="1600x1600">

Output of index.html
https://gist.github.com/arenoir/e29eeec1000f505b1253f8e6baf3cda2

manifest.js
https://gist.github.com/arenoir/ef78aa37b7127e1a16a3ed48852fd9b4

According to the ember-cli guide:

"the asset URLs will not use rootURL and will instead be: https://cdn.example.com/assets/vendor-3b1b39893d8e34a6d0bd44095afcd5c4.js."

https://ember-cli.com/user-guide/#deployments

Thanks for the 🐛 report.

I'm curious that some icons have the /mobile prefix and some don't, I would except only one way.

If I understand correctly the rootURL should be applied on manifest and msapplication-config, the rest of the assets (icons) should respect the fingerprint's prepend property and only fallback to rootURL if not specified?

Does the following example meet you expectations?

<!-- only `rootURL` applied  -->
<link rel="manifest" href="/mobile/manifest.webmanifest">
<meta name="msapplication-config" content="/mobile/browserconfig.xml">

<!-- asset does not have the `/mobile` in the path -->
<link rel="apple-touch-icon" href="https://cdn.fieldphone.com/production/fp-mobile/assets/images/apple/apple-touch-icon-57x57-2fe7f8869de43c10b8b3539158fa49a9.png" sizes="57x57">

<!-- ... -->

@bobisjan

I believe the icons in the list were messed up because a couple of the icon files did not exist in the file system and thus they were not fingerprinted. Once I fixed the missing files the /mobile prefix was appended as expected.

That being fixed the rootURL still should not be appended to the asset path if the asset is fingerprinted.

Your example is how I expect it should work and how the documentation describes the rootURL works with fingerprinted assets.

@arenoir, the PR with the fix is ready, can you please test if this fixes your issue?

@bobisjan yes this did fix my issue. Thanks!

I also tested fingerprinting the webmanifest file. I am unsure if it is necessary or valid to serve the webmanifest from a cdn. Adding the manifest to the fingerprint options still includes the rootURL.

@arenoir, thanks for testing, going to merge and release.

Adding the manifest to the fingerprint options still includes the rootURL.

I’ve encountered this behavior when working on this fix too, because of this and other previous issues, I would like to move away from “auto-injecting” the manifest link (and browserconfig meta), see #145.