Issue
hello, my service worker have hash missmatch problem, I guess there is facebook causing this error. I have question:
- how can I skip facebook url cache on SW?
- how to force reload? I mean force update, clear service worker itself
Solution
ok, hash mismatch manifest.webmanifest. The question is why we got this error?
What is hash?
hash mean you hash a text to a limit random character. It can be a small line of text or a book, does's matter. all become random charater like this: 556dbd80aaaa6096e48da8e49505e6953991ce81
now my manifest look like this:
{
"name": "reader-web",
"short_name": "reader-web",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
and it have a hash for these 556dbd80aaaa6096e48da8e49505e6953991ce81
.
ON MY MICROSOFT windows 10 computer have these hash.
Ok we push that file to server by GIT
then the server serve it to client. and the client got error:
Debug log:
[23m49s182u] TypeError(Failed to fetch, TypeError: Failed to fetch
at Driver.safeFetch (https://awread.vn/ngsw-worker.js:2796:41)
at Driver.handleFetch (https://awread.vn/ngsw-worker.js:2240:33)) Driver.fetch(https://www.facebook.com/tr/?id=178697176886410&ev=fb_page_view&dl=https%3A%2F%2Fawread.vn%2F&rl=&if=false&ts=1639919002667&sw=1920&sh=1080&at=)
[23m48s718u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://awread.vn/manifest.webmanifest: expected 556dbd80aaaa6096e48da8e49505e6953991ce81, got bc11265797cbb7d7676a8e9838d3808c53a9cb32 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://awread.vn/manifest.webmanifest: expected 556dbd80aaaa6096e48da8e49505e6953991ce81, got bc11265797cbb7d7676a8e9838d3808c53a9cb32 (after cache busting)
at PrefetchAssetGroup.cacheBustedFetchFromNetwork (https://awread.vn/ngsw-worker.js:759:35)
at async PrefetchAssetGroup.fetchFromNetwork (https://awread.vn/ngsw-worker.js:695:25)
at async PrefetchAssetGroup.fetchAndCacheOnce (https://awread.vn/ngsw-worker.js:658:29)
at async PrefetchAssetGroup.handleFetch (https://awread.vn/ngsw-worker.js:514:29)
at async https://awread.vn/ngsw-worker.js:1484:30
at async AppVersion.handleFetch (https://awread.vn/ngsw-worker.js:1481:27)
at async Driver.handleFetch (https://awread.vn/ngsw-worker.js:2221:31)) Driver.handleFetch(version: a38f1134bbce491571e14f75adc9ef27a23b4437)
wait... why? we need 556dbd80aaaa6096e48da8e49505e6953991ce81
but we got bc11265797cbb7d7676a8e9838d3808c53a9cb32
?
check the manifest.webmanifest on server by:
sha1sum manifest.webmanifest
we got bc11265797cbb7d7676a8e9838d3808c53a9cb32
Who change it? beacuse build step? something modify that file causing that error? no... because git system. follow this answer after 10 hours debuging. I found this: https://stackoverflow.com/a/62935101/5748537
". By default, git replaces line endings. And this led to the fact that the files on the server were different from the original ones and their hashes was also different."
so we change it by git config --local core.autocrlf false
and we done!
Answered By - Hiep Tran
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.