X
Tap here to go to the mobile version of the site.

Support Forum

gzip compressed files fail on Windows localhost development and live with Android Firefox

Posted

I have three sites I developed using React and Webpack with go web servers, using the following browsers with gzipped files using compression-webpack-plugin I have no problems live or using localhost: Brave: Windows and Android Chrome: Windows and Android Edge: Windows Opera: Windows and Android

But,

Firefox: Windows ===> live works, Android Fails

Firefox: Windows localhost fails

In Dev tools when it fails, I click on vendor.js or bundle.js and get the gzipped output see attached images.

On Android, if you go to https://lib.kaneisdi.com you'll get an empty screen.

When I remove the gzipped files and it uses the js files everything works.

I tried with restart Add-ons disabled.

Thanks

Pierre

I have three sites I developed using React and Webpack with go web servers, using the following browsers with gzipped files using compression-webpack-plugin I have no problems live or using localhost: Brave: Windows and Android Chrome: Windows and Android Edge: Windows Opera: Windows and Android But, Firefox: Windows ===> live works, Android Fails Firefox: Windows localhost fails In Dev tools when it fails, I click on vendor.js or bundle.js and get the gzipped output see attached images. On Android, if you go to https://lib.kaneisdi.com you'll get an empty screen. When I remove the gzipped files and it uses the js files everything works. I tried with restart Add-ons disabled. Thanks Pierre
Attached screenshots

Chosen solution

Confirmed - my Firefox can decode it now.

Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 23.0 r0

Application

  • Firefox 55.0.3
  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:55.0) Gecko/20100101 Firefox/55.0
  • Support URL: https://support.mozilla.org/1/firefox/55.0.3/WINNT/en-US/

Extensions

  • Adblock Plus 2.9.1 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • Grammarly for Firefox 8.793.1186 (87677a2c52b84ad3a151a4a72f5bd3c4@jetpack)
  • React Developer Tools 2.5.1 (@react-devtools)
  • TabGroups Manager revived 2017.06.21.011 ({9b9a630c-a8c0-11e5-a190-6a611d5d46b0})
  • Valence 0.3.8 (fxdevtools-adapters@mozilla.org)
  • Wired-Marker 4.0.17082100 ({e36db930-f18d-4449-b45f-e286cfb9e03a})
  • Bitdefender Wallet 21.1.10 (bdwtwe@bitdefender.com) (Inactive)
  • Firebug 2.0.19 (firebug@software.joehewitt.com) (Inactive)
  • Flash Control 2.1.4 (jid1-sNL73VCI4UB0Fw@jetpack) (Inactive)
  • LastPass: Free Password Manager 4.1.54 (support@lastpass.com) (Inactive)
  • ScrapBook 1.5.14 ({53A03D43-5363-4669-8190-99061B2DEBA5}) (Inactive)
  • SQLite Manager 0.8.3.1-signed.1-signed (SQLiteManager@mrinalkant.blogspot.com) (Inactive)
  • Tab Counter 1.9.9.3 (tabcounter@morac) (Inactive)
  • Tab Groups 2.1.4 (tabgroups@quicksaver) (Inactive)
  • Tab-To-Do 1.6.4 (@tabtodo) (Inactive)
  • Video DownloadHelper 6.3.1 ({b9db16a4-6edc-47ec-a1f4-b86292ed211d}) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: AMD Radeon HD 5450
  • adapterDescription2:
  • adapterDeviceID: 0x68f9
  • adapterDeviceID2:
  • adapterDrivers: aticfx64 aticfx64 aticfx64 amdxc64 aticfx32 aticfx32 aticfx32 amdxc32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64
  • adapterDrivers2:
  • adapterRAM: 512
  • adapterRAM2:
  • adapterSubsysID: 03741043
  • adapterSubsysID2:
  • adapterVendorID: 0x1002
  • adapterVendorID2:
  • crashGuards: []
  • currentAudioBackend: wasapi
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 10.0.15063.483
  • driverDate: 11-4-2015
  • driverDate2:
  • driverVersion: 15.201.1151.1008
  • driverVersion2:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'HW_COMPOSITING'}, {u'status': u'available', u'description': u'Direct3D11 Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'D3D11_COMPOSITING'}, {u'status': u'available', u'description': u'Direct2D', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'DIRECT2D'}, {u'status': u'available', u'description': u'Direct3D11 hardware ANGLE', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'D3D11_HW_ANGLE'}, {u'status': u'unavailable', u'description': u'GPU Process', u'log': [{u'status': u'unavailable', u'message': u'Multi-process mode is not enabled', u'type': u'default'}], u'name': u'GPU_PROCESS'}, {u'status': u'unavailable', u'description': u'WebRender', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u"Build doesn't include WebRender", u'type': u'runtime'}], u'name': u'WEBRENDER'}]}
  • info: {u'AzureCanvasAccelerated': 0, u'AzureCanvasBackend': u'direct2d 1.1', u'AzureFallbackCanvasBackend': u'skia', u'AzureContentBackend': u'direct2d 1.1'}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webgl1DriverExtensions: GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query MOZ_debug OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc MOZ_WEBGL_depth_texture
  • webgl1Renderer: Google Inc. -- ANGLE (AMD Radeon HD 5450 Direct3D11 vs_5_0 ps_5_0)
  • webgl1Version: OpenGL ES 2.0 (ANGLE 2.1.0.dec065540d5f)
  • webgl1WSIInfo: EGL_VENDOR: Google Inc. (adapter LUID: 000000000000aad6) EGL_VERSION: 1.4 (ANGLE 2.1.0.dec065540d5f) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture_nv12 EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
  • webgl2DriverExtensions: GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_norm16 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
  • webgl2Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query MOZ_debug OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc
  • webgl2Renderer: Google Inc. -- ANGLE (AMD Radeon HD 5450 Direct3D11 vs_5_0 ps_5_0)
  • webgl2Version: OpenGL ES 3.0 (ANGLE 2.1.0.dec065540d5f)
  • webgl2WSIInfo: EGL_VENDOR: Google Inc. (adapter LUID: 000000000000aad6) EGL_VERSION: 1.4 (ANGLE 2.1.0.dec065540d5f) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture_nv12 EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
jscher2000
  • Top 10 Contributor
8583 solutions 70195 answers

Could you try this change in how vendor.js and bundle.js are served:

Server: nginx Date: Mon, 25 Sep 2017 20:24:36 GMT Content-Type: application/gzip => application/javascript Transfer-Encoding: chunked Connection: keep-alive Accept-Ranges: bytes Content-Encoding: gzip Last-Modified: Sun, 24 Sep 2017 23:06:07 GMT Vary: Cookie

Could you try this change in how vendor.js and bundle.js are served: <code>Server: nginx Date: Mon, 25 Sep 2017 20:24:36 GMT Content-Type: '''application/gzip''' '''=> application/javascript''' Transfer-Encoding: chunked Connection: keep-alive Accept-Ranges: bytes Content-Encoding: gzip Last-Modified: Sun, 24 Sep 2017 23:06:07 GMT Vary: Cookie</code>

Question owner

Changing that stopped my sites from rendering properly in all browsers.

Remember, it works fine if it's from my server and fails at recognizing gzip compression when it's localhost or on Android.

Changing that stopped my sites from rendering properly in all browsers. Remember, it works fine if it's from my server and fails at recognizing gzip compression when it's localhost or on Android.
jscher2000
  • Top 10 Contributor
8583 solutions 70195 answers

bigbuckbunny said

Changing that stopped my sites from rendering properly in all browsers.

That's strange.

Remember, it works fine if it's from my server and fails at recognizing gzip compression when it's localhost or on Android.

Not for me: I get a page of gibberish for this in Firefox 55 on Windows 7 (copy/paste to the address bar):

view-source:https://lib.kaneisdi.com/vendor.js

That's where I checked the Network Monitor and discovered the incorrect content type for a .js file.

I've never seen that before. There must be something strange about your server configuration.

''bigbuckbunny [[#answer-1010035|said]]'' <blockquote> Changing that stopped my sites from rendering properly in all browsers. </blockquote> That's strange. <blockquote>Remember, it works fine if it's from my server and fails at recognizing gzip compression when it's localhost or on Android.</blockquote> Not for me: I get a page of gibberish for this in Firefox 55 on Windows 7 (copy/paste to the address bar): view-source:https://lib.kaneisdi''.''com/vendor.js That's where I checked the Network Monitor and discovered the incorrect content type for a .js file. I've never seen that before. There must be something strange about your server configuration.

Question owner

The gibberish is the gzip compressed file (which was included with my images) and if there was something wrong with my server why does it work in all the browsers that I listed in my original post.

On windows 10 with Firefox 55 64 bit, when I paste view-source:https://lib.kaneisdi.com/vendor.js

It's clean js, sample copy paste: !function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.ex

7 different browsers have no problems with gzip and my local server is Go running in Gogland and all those browsers work fine.

If it would fail in any of the other browsers, I would have questioned my server setup, but localhost.

I just won't serve gzip on Firefox Android and tell my mobile users that it will be slow to load and give them the other alternatives. I'm not supporting old browsers and everything works the way I want it and I have to move on to publishing.

Thanks for the input.

Pierre

The gibberish is the gzip compressed file (which was included with my images) and if there was something wrong with my server why does it work in all the browsers that I listed in my original post. On windows 10 with Firefox 55 64 bit, when I paste view-source:https://lib.kaneisdi.com/vendor.js It's clean js, sample copy paste: !function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.ex 7 different browsers have no problems with gzip and my local server is Go running in Gogland and all those browsers work fine. If it would fail in any of the other browsers, I would have questioned my server setup, but localhost. I just won't serve gzip on Firefox Android and tell my mobile users that it will be slow to load and give them the other alternatives. I'm not supporting old browsers and everything works the way I want it and I have to move on to publishing. Thanks for the input. Pierre
cor-el
  • Top 10 Contributor
  • Moderator
17346 solutions 156811 answers

Maybe this is a problem with the server you use and the file might be double gzipped in some cases if you use a file that is already compressed.

Maybe related to this bug report.

  • Bug 538971 - [GoAhead-Webs] Sometimes sends broken Content-Type: application/gzip for compressed scripts
Maybe this is a problem with the server you use and the file might be double gzipped in some cases if you use a file that is already compressed. Maybe related to this bug report. * Bug 538971 - [GoAhead-Webs] Sometimes sends broken Content-Type: application/gzip for compressed scripts

Question owner

RESOLVED

First I need to apologize to jscher2000 for my response, after reviewing it I found a little rude. I got the concussion thingy and was tired.

I saw that in Firefox the content type was x-gzip and in the other browsers it was just gzip and did a search on x-gzip that led to:

https://github.com/shurcooL/httpgzip/issues/1

So I included x-gzip in the content type on the server and everything works in localhost and Android.

It's weird that it worked live though except jscher2000 from what I take on your system it failed and that's why you got the garbage?

If that's the case can you let me know if you see/saw (yeah couldn't help myself) the login page.

Thanks Again

Pierre

RESOLVED First I need to apologize to jscher2000 for my response, after reviewing it I found a little rude. I got the concussion thingy and was tired. I saw that in Firefox the content type was x-gzip and in the other browsers it was just gzip and did a search on x-gzip that led to: https://github.com/shurcooL/httpgzip/issues/1 So I included x-gzip in the content type on the server and everything works in localhost and Android. It's weird that it worked live though except jscher2000 from what I take on your system it failed and that's why you got the garbage? If that's the case can you let me know if you see/saw (yeah couldn't help myself) the login page. Thanks Again Pierre
jscher2000
  • Top 10 Contributor
8583 solutions 70195 answers

Chosen Solution

Confirmed - my Firefox can decode it now.

Confirmed - my Firefox can decode it now.