kiibohd
Make offline-plugin use ServiceWorker when running an PWA from the "Home Screen"
Are you aware of any different behavior when a PWA (using offline-plugin) is added to the home screen using "Add to Home Screen" on Chrome/Android or Safari/iOS?
I'm having problems with the app getting stuck using the cached version when it was installed and never updating. I even have offline-plugin responseStrategy set to network-first but it seems to always use the cached version after adding to the home screen.
The service worker is updating fine in Chrome on both Windows and Android. I expect the app to check for a new service worker every time the app has a clean start and switch to the new service worker after relaunching the app and/or rebooting the phone. But after a few days of testing and several restarts it's still stuck on the old version.
I discovered that this issue seems to be related to having both AppCache and Service Worker enabled. It seems that when a web app is added to the home screen on an Android the service worker does not function and the app cache takes over (contrary to what happens in Chrome). Or maybe neither was used and Android activated some other caching mechanism! When I did a series of test deployments which excluded AppCache, the Service Worker worked correctly and updated as expected.
I'm not sure if this is a bug in offline-plugin or Android. I haven't done any testing using vanilla javascript.
Since iOS now supports service workers, I don't really need AppCache as a fallback so I'm just going to leave it disabled!
@mattgaspar thanks for your investigation and for sharing your results
After reading up on this issue, there seems to be a couple of issues regarding appcache and adding a page to the home screen, such as having to wait for the appcache to cache assets for a prelonged time as well as some hacky code to add it to the registry. I would guess we will not focus on this since there is a working solution that is more or less future proof (using service worker).
Will close this for now, please let me know if you think othervise @NekR
Tip for anyone else running into this issue:
After disabling appCache in your webpack.config, you should also add an invalid manifest URL to your home page (index.html)
<html manifest="disabled.appcache">
Without this the Android devices seemed to remain stuck with the old cached files. This seemed to invalidate the app cache and remove the files. Leave this in-place until you think all Android devices have loaded the updated version.
@GGAlanSmithee and @NekR,
I haven't looked at the offline plugin source code but I'm guessing there is some type of feature detection to determine whether to use appCache or Service Worker. It seems like there may be a problem with the detection when used as a home screen app since appCache should not have been enabled in the first place on these devices.
I noticed that the Android devices did have the service worker running but maybe serving files from appCache?
FYI - My app has other app specific code in the service worker file, so it may have been activated by the register code in the app. It would have also been activated by initially running the app in Chrome before adding to the home screen.
(The webapp-manifest has a display type of standalone.)
@mattgaspar interesting. Kind of a edge-case I guess, but might still be warrented to atleast add to the docs. Or maybe even to handle this in the code.
Seems like
if (window.navigator.standalone) {
// fullscreen mode
}
can be used to feature detect wether the app is run from the home screen.
@NekR I guess we don't really do feature detection like this, but rather go by the options passed in. What you think about this?
WKWebView does not support Service Workers yet. So when running your javascript inside a WKWebView and you want to use caching, you still need the AppCache to work.
