search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.66k stars 279 forks source link

[DOCS] Unclear handling of precached files / offline support #4575

Closed hybridherbst closed 7 months ago

hybridherbst commented 8 months ago

What's your suggestion for improvement for our docs?

My understanding of generating an offline-capable PWA build is that all resources that a serviceWorker would install for offline support (as described by the service worker code) are included in the native package as well.

For example, if a website preaches 50MB of resources through its service worker, then an APK file should contain those 50 MB so tthat installation and operation can happen completely offline.

However, I can't find documentation on what PWABuilder detects as "offline support", and common things like using vite-pwa to generate workbox-based offline support don't seem to be detected out of the box.

So, some questions:

  1. Where can I learn more about what specific structure needs to be in place for PWABuilder to detect offline support?
  2. Is my assumption right that precached files will be included so that e.g. an APK can be installed and operated completely offline?

I tried both a couple of PWAs that I know have well-working offline support (where PWABuilder neither detects it nor adds the resources to an APK) as well as the "demo url" PWA (webboard.app) where offline support is detected, but I also can't find any resources in the APK.

Do you have an implementation or a solution in mind?

Clearer docs on what/when/how "offline support" is detected and intended. Also clearer docs on what it means – e.g. can I put the APK on a completely offline device and everything works? (as with a regular APK file)

Have you considered any alternatives?

No response

zateutsch commented 8 months ago

@hybridherbst Hey there! I work on docs for PWABuilder and I think it would be good to have some clarification on these points.

To address your questions:

  1. We use Lighthouse to detect offline support on our backend. This should work with Workbox, so I'm not sure what's going on in your use case. If you could send your app URL, we could take a closer look at what could be going on.
  2. I'm not our expert on android, but as far as I understand, PWAs packaged for Android are different than typical APKs, they are what Google calls a TWA (Trusted Web Activity). These packages use the browser to run, even if they appear like an isolated software. I think, even if you are precaching, that you will need internet connection to initially run the app, and then it will work offline as expected. @jgw96 Feel free to correct me on this since you know much more on this front.

Either way, I'll look into adding some docs on these two Qs.

hybridherbst commented 7 months ago

Sorry for missing your response @zateutsch!

The URL in question is the same as in https://github.com/pwa-builder/PWABuilder/issues/4552. I hackily worked around the timeout issue described there in a local copy of PWABuilder, but then ran into the issue described here.

I think (2) is a bit unexpected; ideally the .apk would be distributable like any other APK and "just work" without any internet access. Would it be possible to pre-seed the cache with files that are shipped alongside the APK? I noticed that the cache seems to be shared, as in, when the website was already installed from the internet and then the APK is installed offline all files are there, but after clearing Chrome caches the APK doesn't work anymore.

The usecase here is distribution of a PWA for usage at tradeshows, museums and other locations with limited or no internet access, or the need for mass-installation (plug in device, run an adb install command, plug in next device). I was hoping that PWAs can be bundled/packaged to also allow for this usecase.

jgw96 commented 7 months ago

Hey @hybridherbst , so yeah, a PWA is going to have to be connected to the internet atleast once. It can then work fully offline after, however it does need to connect even just once to grab the HTML, CSS and JS to cache. PWAs still get their assets over the network, just like a website, however PWAs can cache these assets using a Service Worker. Your scenario however, of a PWA that NEVER connects to the internet, has been chatted about in W3C circles and was even experimented with in Chrome a while back https://developer.chrome.com/docs/web-platform/web-bundles/ with the Web Bundles idea. However, I am not aware of any new work around Web Bundles. For your specific use case, if there is a possibility the app will NEVER connect to the internet before the user needs to use it, I would suggest going a full hybrid route where the HTML, CSS and JS are fully local to the device. https://capacitorjs.com/ is a good solution for this scenario, although there are many other hybrid frameworks out there.

jgw96 commented 7 months ago

Closing as this is now outside of the scope of PWABuilder

hybridherbst commented 7 months ago

Sad to hear! My understanding was PWABuilder tries to cover that use case, thanks for clarifying. I would have hoped there's a way to use PWABuilder, include the assets, and pre-seed the cache locally somehow...

khmyznikov commented 7 months ago

@hybridherbst the capacitor should suit your needs, you can keep almost entire web app code.