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.

Solution 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.

Solution 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.

Solution 3

Since you asked for some directions:

If you already know which websites you want to be able to view offline, you can use HTTrack to download them and bundle the files generated in your Flutter application.

If you want to be able to dynamically download websites, there is currently no Dart/Flutter package that will do the website ripping for you. You would either have to implement it yourself, or perhaps make an API that would use an already made program (HTTrack for example) and then send the files to your application.

Comments

[raj kavadia]

It saves the HTML file, yes but it is not saving the whole content of the website like images font files.

[raj kavadia]

I am not looking for flutter web. I am looking for the android & ios flutter app.

[Martin Zeitler]

Seriously, why do you tag the question flutter-web then?

[Jabbar]

@rajkavadia your question is misleading!

[Martin Zeitler]

Have retagged accordingly. Also upvoted, because only done so to prevent further confusion.

[raj kavadia]

I have tried using it that way but some files are not present inside the archive itself. like the files with .blob and .woff extention that carries some data inside the webpage itself.

[ch271828n]

@rajkavadia So you may need to create another question asking about android and ios. btw which platform do you fail? what methods have you tried?

[ch271828n]

@rajkavadia any updates?

[ch271828n]

@rajkavadia Congratulations!

[Bruno Kinast]

The question is about saving an arbitrary website in a Flutter app for offline viewing, not having PWA in a Flutter app. So I don't think this helps.

[Jabbar]

@Suporte01 basically if add these steps to your website you can run it inside a flutter app offline after first load

[raj kavadia]

sorry its not working on the site that i want.

[raj kavadia]

its not fatching sites with blobs and woff files.

[ch271828n]

@rajkavadia what method have you tried? there are a lot of methods for android/ios and you may try others

[raj kavadia]

Have tried this link and also tried JSOUP for java but it's not working on specific sites.

[ch271828n]

@rajkavadia hmm have you tried others? that is more like a pure-android problem.

[ch271828n]

@rajkavadia Hi the bounty (it is non-refundable) is going to end in 2 hours. Have you made any progress?