notwaldorf / mojibrag

📢 stuff. Use ✨🙊😂🔥.
https://mojibrag.firebaseapp.com/
74 stars 29 forks source link

app-indexedb-mirror not working on android #49

Open n1ywb opened 7 years ago

n1ywb commented 7 years ago

I was trying to get the app to work offline on my phone without much luck; I fired up chrome remote debugging and sure enough there is an error on the js console

image

if we flip over to the network pane and look at the offending request I note that although a .js file was requested, the server has responded with text/html content; indeed on the preview pane I see that it is index.html

image

You can actually test this from the command line using this curl command; you should get JS but you get HTML

curl 'https://mojibrag.firebaseapp.com/src/common-worker-scope.js?https://mojibrag.firebaseapp.com/bower_components/app-storage/app-indexeddb-mirror/app-indexeddb-mirror-worker.js' -H 'pragma: no-cache' -H 'accept-encoding: gzip, deflate, sdch, br' -H 'accept-language: en-US,en;q=0.8' -H 'user-agent: Mozilla/5.0 (Linux; Android 4.4.4; XT1080 Build/SU6-7.7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.85 Mobile Safari/537.36' -H 'accept: */*' -H 'cache-control: no-cache' -H 'authority: mojibrag.firebaseapp.com' -H 'referer: https://mojibrag.firebaseapp.com/?lang=en' --compressed

I hypothosise this is caused by firebase hosting rewriting the URL to index.html. maybe because of the rewrite rules in firebase.json

alternatively maybe the service worker config needs to treat this request differently?

need to figure out how to get firebase to NOT rewrite that URl

n1ywb commented 7 years ago

It might have something to do with this using the wrong BASE_URI https://github.com/PolymerElements/app-storage/blob/master/app-indexeddb-mirror/common-worker.html#L23

n1ywb commented 7 years ago

I think this is indeed a bug in https://github.com/PolymerElements/app-storage/blob/master/app-indexeddb-mirror/common-worker.html#L23

I added a rewrite rule to my firebase.json and it seems to have worked around this issue in my app

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "./build/bundled/",
    "rewrites": [
      {
        "source": "/src/common-worker-scope.js",
        "destination": "/bower_components/app-storage/app-indexeddb-mirror/common-worker-scope.js"
      },
      {
        "source": "**/*",
        "destination": "/index.html"
      }
    ]
  }
}

still not sure if this fixes offline support

n1ywb commented 7 years ago

Nope, didn't fix offline, it just gets stuck on that request

image

I added some things to my sw-prechache config

+    '/bower_components/app-storage/app-indexeddb-mirror/app-indexeddb-mirror-worker.js',
+    '/bower_components/app-storage/app-indexeddb-mirror/common-worker-scope.js',
+    '/bower_components/app-storage/app-indexeddb-mirror/common-worker.html'

now it gets past that request and actually loads data from indexeddb when offline so that's a big improvement; only after a long delay though

n1ywb commented 7 years ago

I also hacked in this to common-worker.html

var BASE_URI = "/bower_components/app-storage/app-indexeddb-mirror";
abdonrd commented 7 years ago

Reference: https://github.com/Polymer/polymer-build/issues/22

n1ywb commented 7 years ago

This didn't work

var BASE_URI = "/bower_components/app-storage/app-indexeddb-mirror";

but THIS did

var WORKER_SCOPE_URL =
    Polymer.ResolveUrl.resolveUrl('/bower_components/app-storage/app-indexeddb-mirror/common-worker-scope.js', BASE_URI);

Still no offline joy, until I think I found the last piece of the offline puzzle; common-worker does this thing where it passes the url to the real worker as a URL argument with ? and that confuses the service worker and bypasses the pre-cache

Found the fix here https://github.com/GoogleChrome/sw-precache#ignoreurlparametersmatching-arrayregex

put

  ignoreUrlParametersMatching: [
    /app-indexeddb-mirror/
  ],

into sw-precache-config.js

n1ywb commented 7 years ago

@abdonrd Looks related to Polymer/polymer-build#22

I also opened https://github.com/PolymerElements/app-storage/issues/78