googlechromelabs / sw-appcache-behavior Goto Github PK

I found this project very useful to transition an application from appCahce to service workers. During the transitioning, I run into the following issue:

Recent versions of chrome get pretty agitated when they see the manifest attribute because they take that as a sign that the app is still using the application cache.

I worked around this issue employing the following hack: On the server side I renamed manifest to app-cache-manifest. This quiets down chrome. However, the sw-appcache-behavior framework now does not work because it expects to find an attribute called manifest to read the manifest file from.

So I added these two lines to make everything work:

...
const manifestPath = document.documentElement.getAttribute("app-cache-manifest")
document.documentElement.setAttribute("manifest", manifestPath)
appcachePolyfill.init(
...

So I was thinking, what about making the attribute name configurable. It defaults to manifest for backwards compatibility but in the API the user can provide a different name. If it sounds good I could submit a PR...

My web app, when used live, is intended to auto-refresh after the cache is refreshed (due to a change in the AppCache manifest - indicating an update to the app's code). I need a way to tell if a given URL (returned in the urls array) was loaded from the network or from the cache. Thanks in advance for advice/assistance.

Is there any demo page where I can see how it works?
I tried to follow the instructions on the readme file, but first there is no index.mjs file for the window client library, just index.umd.js. Then, if I try to import from that file as described in the readme file, I get "The requested module '../appcache-polyfill-window/build/index.umd.js' does not provide an export named 'init'"

If I understand correctly, Chrome will remove AppCache support on/around Apr 28 (https://www.chromestatus.com/feature/6192449487634432, https://www.chromestatus.com/features/schedule).

My team uses AppCache in production for reasons explained here:

WKWebView does not support service workers but it does support AppCache. Chrome on Android also supports AppCache (currently). If AppCache support is removed in Chrome then the suggested alternative, service workers, is not viable for a cross-platform web app that runs inside of a WebView (e.g. via react-native-web-view on iOS and Android).

The README for these packages currently state:

This project is still a work in progress. Please experiment with it on a non-production version of your site, and open issues with feedback or bug reports if you run in to problems.

Is there a goal for this AppCache polyfill to be production ready before AppCache is removed from Chrome?

I'm getting the following when trying to import appcache-polyfill-window in a TypeScript file:

Could not find a declaration file for module 'appcache-polyfill-window'. './node_modules/appcache-polyfill-window/build/index.umd.js' implicitly has an 'any' type.

Does "types" need to be defined in package.json or perhaps ./node_modules/appcache-polyfill-window/build/packages/appcache-polyfill-window/index.d.ts should be moved to ./node_modules/appcache-polyfill-window/build/index.d.ts

Work was done in #17 to remove hash part of URL from request URL and client URL but this same hash removal isn't being done for HTML pages added to the cache via the manifest attribute.

e.g.

There are likely other places that need to be updated too (e.g. in the service worker fetch).

This causes apps that load from the network with a hash fragment to not being able to retrieved from cache due to mismatching key. My team is attempting to work around this for now by changing our root URL to not have a hash fragment but this may not work in other applications or long term for my team. Thanks!

Hi,
I would like to get an Angular-Seed project (v7.2 with Gulp 3.9 and Typescript) offline capable.

In package.json I can see a build target that compiles a lot of js files...
index.js, index.mjs, index.umd.js
into window build subfolder, but which one do I have to integrate in my Project? Whats the differences between them?

And what do you mean in the readme by "Installation"? Do we have to build it at first by npm run build und install the result afterwards in our Project by npm install --save-dev ...?

Thank you for providing this project and best regards,
Nic

I'd like to be able to mimic the behaviour as best possible of the following. Any ideas or suggestions about how would be appreciated

applicationCache.update()

https://webplatform.github.io/docs/apis/appcache/ApplicationCache/update/

To update the cache by starting the cache download process. In the context of these modules, it would be useful to have a way to get appcache-polyfill-window to reload the cache manifest.

applicationCache.status

https://webplatform.github.io/docs/apis/appcache/ApplicationCache/status/

To figure out the current status of the cache. For example, having invoked the update equivalent, to determine if an update was detected, being downloaded, available etc

applicationCache.ondownloading

https://webplatform.github.io/docs/apis/appcache/ApplicationCache/ondownloading/

An event that would fire if an update is being downloaded.

applicationCache.onupdateready

https://webplatform.github.io/docs/apis/appcache/ApplicationCache/onupdateready

An event that would fire if an update has been downloaded and is available to be used

applicationCache.onprogress

https://webplatform.github.io/docs/apis/appcache/ApplicationCache/onprogress

An event that would fire when resources are being downloaded as part of a cache update

There are other events in the applicationCache API that may also be useful.

If there is any way to do this already, or some advice could be provided about how to do this kind of thing please let me know.

The framework uses an IndexDB browser database to store some metadata it needs. It currently names this database keyval-store. When I first run into this database in the browser developer tools I was wondering where it came from.

We should give it a name that shows where it came from.

Contrast the sw-appcache name with the firebase one:

From what I can tell every time I call init({ cachePopulatedCallback }) the cachePopulatedCallback is invoked even if the cache wasn't changed.

I'm not sure yet if this is an issue with initialization or if that callback was intended to always be called even if the same cache is in use.

With the latest version I am not able to install or build project via npm on Win10, using node v9.11 or v12.13

E:\build\_appCache\sw-appcache-behavior-0.3.0>npm install
> [email protected] install E:\build\_appCache\sw-appcache-behavior-0.3.0\node_modules\puppeteer-firefox
> node install.js
ERROR: Failed to download Firefox rv0.0.1!
Error: Download failed: server returned code 404. URL: https://github.com/puppeteer/juggler/releases/download/v0.0.1/firefox-win64.zip
    at response (E:\build\_appCache\sw-appcache-behavior-0.3.0\node_modules\puppeteer-firefox\lib\BrowserFetcher.js:264:21)
    at ClientRequest.requestCallback (E:\build\_appCache\sw-appcache-behavior-0.3.0\node_modules\puppeteer-firefox\lib\BrowserFetcher.js:320:7)
    at Object.onceWrapper (events.js:272:13)
    at ClientRequest.emit (events.js:180:13)
    at HTTPParser.parserOnIncomingClient (_http_client.js:540:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:117:17)
    at TLSSocket.socketOnData (_http_client.js:445:20)
    at TLSSocket.emit (events.js:180:13)
    at addChunk (_stream_readable.js:274:12)
    at readableAddChunk (_stream_readable.js:261:11)
  -- ASYNC --
    at BrowserFetcher.<anonymous> (E:\build\_appCache\sw-appcache-behavior-0.3.0\node_modules\puppeteer-firefox\lib\helper.js:32:15)
    at Object.<anonymous> (E:\build\_appCache\sw-appcache-behavior-0.3.0\node_modules\puppeteer-firefox\install.js:47:16)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
...

After removing puppeteer and running npm run build I got errors that microbundle is missing or misspelled:

E:\build\_appCache\sw-appcache-behavior-0.3.0>npm run build

> [email protected] build E:\build\_appCache\sw-appcache-behavior-0.3.0
> npm run build-sw && npm run build-window


> [email protected] build-sw E:\build\_appCache\sw-appcache-behavior-0.3.0
> cd packages/appcache-polyfill-sw && npm run build && cd -


> [email protected] build E:\build\_appCache\sw-appcache-behavior-0.3.0\packages\appcache-polyfill-sw
> npm run clean && microbundle --name=appcachePolyfill


> [email protected] clean E:\build\_appCache\sw-appcache-behavior-0.3.0\packages\appcache-polyfill-sw
> rimraf build

Der Befehl "microbundle" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run clean && microbundle --name=appcachePolyfill`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

Regards,
Nic

This appears not to be working for me in Safari 14. I'm a bit hampered because my app doesn't have a build step, but I've got it working for Chrome. In safari, I can follow with the debugger into the service worker. Something is happening, but the debugger bounces around and the result is inconsistent. Sometimes some offline functionality is available. I'm tearing my hair out.

Hi, we have been using the library successfuly for a couple of months now. However, we recently noticed that around 0.5% of our users are stuck on an old version. Two members of our dev team were able to reproduce the issue locally but unfortunately we do not have a reliable way to do so.

When the issue occured I noticed that the website has both legacy application cache as well as webservice cache. The issue could only be resolved by checking by pass network on the service worker and refreshing the page twice.

This issue happaned on the Android version of Chrome 86 which still has ApplicationCache available.

I noticed that @jeffposnick mentioned

In Chrome, once there's a service worker registered and a page is loaded in scope of that service worker, AppCache is disabled. (I.e. the service worker always "wins", even if there's still a manifest attribute on the <html>.)

The example in the readme file has an wait statement before the service worker is registered

init({
    cachePopulatedCallback: myCachePopulatedCallback,
  }).then(() => navigator.serviceWorker.register('sw.js'));

Could that be the root cause of the race condition? in our usecase we do an additional await for await caches.keys() before initializing the library.

I was thinking we could add navigator.serviceWorker.register('no-op-sw.js') at the top of the HTML file just to disable ApplicationCache. Do you have any suggestions?

I am attempting to use this to migrate from my web app's existing AppCache but I am encountering the following error:

Uncaught (in promise) DOMException: The FetchEvent for "SITE_ROOT" resulted in a network error response: an object that was not a Response was passed to respondWith().

and this points to the line:

event.respondWith(appcachePolyfill.handle(event));

It happens any time after the service worker has successfully cached the site's contents. Any help would be much appreciated.

Note: I am using this (polyfill) library because backwards compatibility with AppCache is still needed for my web app. I will only consider other libraries that allow me to continue to use my existing AppCache manifest.