How to save website for offline in flutter mobile

Question

Important note - I want this functionality for mobile apps only, not for flutter web.

I am having some trouble saving the website inside the flutter app. I have tried using the cache method and savewebarchive method for the inappwebview. The issue with the method is that it is not saving the full content of the website. It is only saving HTML and CSS files.

I want to save the whole website with all the content like HTML, CSS, js, font files, Images and store it inside the flutter app. I have gone through a few plugins but none of them were helpful.

I am looking for the same functionality as httrack.

Any right direction would be appriciated.

Answer 1

Here is an example of what you want offline Pop, Pop, Win! game.

Supporting offline mode requires roughly the following:

1. Determining which resources to put in the cache for offline use.
2. Creating a service worker that prepares a cache of these resources.
3. Registering the service worker, so that subsequent requests can be served from the offline cache (in case the network is down).
4. In that service worker, pre-populating the offline cache with the URLs, and also handling the appropriate fetch request either from the cache, or from the network.
5. Making sure that the service worker detects changes to the app or static assets, and puts the new version in the cache.

To do the steps above you will need this package Progressive Web App (PWA) for Dart

Changes in your application Import the pwa package in your pubspec.yaml:

dependencies:
  pwa: ^0.1.2

After running pub get, add the client to your web/main.dart:

import ‘package:pwa/client.dart’ as pwa;
main() {
  // register PWA ServiceWorker for offline caching.
  new pwa.Client();
}

Automatically generated progressive web application The pwa package provides code generation that handles items 1–2 and 4–5 from the above list. To ensure proper cache use (both populating and invalidating the cache) use the following workflow:

1. Build your web app with all of the static resources landing in build/web:

pub build

2. Run pwa’s code generator to scan (or rescan) your offline assets:

pub run pwa

3. Build your project again, because you need to have your (new) pwa.dart file compiled:

pub build

These steps produce a file named lib/pwa/offline_urls.g.dart that contains a list of the offline URLs to be cached. The .g.dart extension indicates that the file is generated and may be overwritten automatically by pwa’s code generator tool.

On the first run, this workflow generates the web/pwa.dart file that contains your service worker with reasonable defaults. You can modify this file (to customize the offline URLs or use the high-level APIs, for example) because the code generator won’t change or override it again.

All these steps are from this article, you can find better details there.

Answer 2

Without existing Flutter plugins, one of the quickest approach is to simply use Android and iOS plugins, and write a simple Flutter wrapper around it.

For android, you may be interested in this link. For iOS, this link may be helpful. These links are just examples - you can search further on Google to find out more plugins that suit your needs. (For example, search android kotlin save whole website etc).

After the solution is found on android and ios, you can develop a Flutter plugin very easily in order to let your Flutter code call those Android/iOS snippets. Personally I suggest use Kotlin for Android, Swift for iOS, and do not forget pigeon for code generation.

By the way, if you want to draw some UI with Android/iOS code instead of Flutter code, you may also be interested in platform views.