kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-12 13:58:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add Demo documents

Browse Source
This commit is contained in:
Jaifroid 2023-10-07 15:28:42 +01:00
parent fccd0886f2
commit e56023b6b6
5 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# Kiwix JS for PWA, Windows and Linux (Electron, NWJS, UWP)
Demos: [ [Instal the PWA on Desktop](screenshots/Install-PWA.md) ] [ [Install PWA and use OPFS on Android](screenshots/Demo-OPFS_Chrome_Android.gif) ] [ [Picking a folder of archives](screenshots/Folder-Picking.md) ] [ [Install PWA on Firefox Android](screenshots/Install-PWA_Firefox_Android.gif) ] [ [Adding app to Edge sidebar](screenshots/Add-KiwixPWA-to-Edge-sidebar.md) ]
Demos: [ [Instal the PWA on Desktop](screenshots/Install-PWA.md) ] [ [Install PWA and use OPFS on Android](screenshots/Demo-OPFS_Chrome_Android.md) ] [ [Picking a folder of archives](screenshots/Folder-Picking.md) ] [ [Install PWA on Firefox Android](screenshots/Install-PWA_Firefox_Android.md) ] [ [Adding app to Edge sidebar](screenshots/Add-KiwixPWA-to-Edge-sidebar.md) ]
![Kiwix JS Seven Wonders Montage trans](https://user-images.githubusercontent.com/4304337/218268736-2820050c-289f-4d4b-aef9-7e9f4f33c658.png)

4
screenshots/Add-KiwixPWA-to-Edge-sidebar.md
View File

@ -11,5 +11,5 @@ You may need to adjust the width of the bar so that all the icons fit. You can a
fit. Please note that the current icon is white, which means it is more visible if the Edge theme is set to "Dark". We are looking into adding an
outline to the favicon that is used in order to make it more visible in light mode.
Please note that due to a [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1368818#c13) (which also affects extensions), folder picking is not available in the sidebar, so please simply pick the
file you want to load rather than picking a folder of archives.
Please note that due to a [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1368818#c13) (which also affects extensions),
folder picking is not available in the sidebar, so please simply pick the file you want to load rather than picking a folder of archives.

22
screenshots/Demo-OPFS_Chrome_Android.md Normal file
View File

@ -0,0 +1,22 @@
# Using the OPFS and installing the PWA on Android
Simply visit **_[pwa.kiwix.org](https://pwa.kiwix.org)_** in Chrome / Edge / Samsung Internet / Kiwi Browser, etc., on Android. Read more after the demo:
![Use OPFS on Chromium Android](Demo-OPFS_Chrome_Android.gif)
See also: [ [Install PWA on Firefox for Android](Install-PWA_Firefox_Android.md) ]
## Chromium browsers have first-class support for PWAs on Android
**Chromium** browsers (Chrome, Edge, Samsung, etc.) supports installing PWAs on Android (as well as on Desktop), and also have large quotas
for the Origin Private File System (OPFS). Installing the PWA useful, because the app runs in its own dedicated session and has its own icon
in your Home Screen (or Start menu on Windows).
## Why bother using the OPFS if I can just pick a file from anywhere?
File access is much, much faster (approx. 10x faster) for archives in the Origin Private File System than for archives picked from the visible
file system. Full-text search also works for archives in the OPFS, whereas access is too slow for that search type to be feasible for other
archives. However, for very large archives like full English Wikipedia which won't fit in the OPFS, you can still pick these archives from
anywhere on your device, including microSD cards.
See also: [ [Install PWA on Firefox for Android](Install-PWA_Firefox_Android.md) ]

20
screenshots/Folder-Picking.md
View File

@ -13,17 +13,21 @@ demoed above.
## Why do I have to give permission again after relaunch?
This is a browser security feature that we can't override in the PWA version. However, it's a very quick click or two in most browsers, and once you give permission to access a
folder, all the files in that folder become accessible with no further permission prompts. If you want a version of the app that doesn't ask for permission prompts, try the
Electron or NWJS versions.
This is a browser security feature. You can override it by using the Origin Private File System if available on your device and browser (see
below). However, it's a very quick click or two in most browsers to authorize access, and once you give permission to access a folder, all the
files in that folder become accessible with no further permission prompts.
If you want a version of the app that doesn't ask for permission prompts, try using the [Origin Private File System](Demo-OPFS_Chrome_Android.md)
-- it's very similar on mobile and desktop.
## What about split ZIM archives?
If you have an archive made up of a set of split files (ending `.zimaa`, `.zimab`, `.zimac`, etc.), then simply pick the folder containing them. The app will only display the
first part (`.zimaa`) in the archive list, but when you click on this, it will look for the other parts and launch the ZIM. If you are using a browser that doesn't support folder
picking (e.g. IE11), then simply pick ALL the split parts, or alternatively, you can drag-and-drop the whole set into the app.
If you have an archive made up of a set of split files (ending `.zimaa`, `.zimab`, `.zimac`, etc.), then simply pick the folder containing them.
The app will only display the first part (`.zimaa`) in the archive list, but when you click on this, it will look for the other parts and launch
the ZIM. If you are using a browser that doesn't support folder picking (e.g. IE11), then simply pick ALL the split parts, or alternatively, you
can drag-and-drop the whole set into the app.
## File Handling
In **Chromium browsers**, if you install the app, it can also take advantage of the [File Handling API](https://web.dev/file-handling/). Together, these APIs provide a near-native
experience. For more information, see our [PWA Installation demo](Install-PWA.md).
In **Chromium browsers**, if you install the app, it can also take advantage of the [File Handling API](https://web.dev/file-handling/). Together,
these APIs provide a near-native experience. For more information, see our [PWA Installation demo](Install-PWA.md).

21
screenshots/Install-PWA_Firefox_Android.md Normal file
View File

@ -0,0 +1,21 @@
# Installing the Kiwix JS PWA on Firefox for Android
Simply visit **_[pwa.kiwix.org](https://pwa.kiwix.org)_** in Firefox on Android. Read more after the demo:
![Install-PWA demo](Install-PWA_Firefox_Android.gif)
See also: [ [Install PWA and use OPFS in Chrome for Android](Demo-OPFS_Chrome_Android.md) ]
## Firefox can install PWAs on Android
**Firefox** supports installing PWAs on Android (but not on Desktop). This is useful because the app runs in its own dedicated session and has
its own icon in your Home Screen.
## Accessing your ZIM files
As shown in the Demo, Firefox for Android works best when using the Origin Private File System. Loading larger archives from the user-visible File System can be slow and glitchy on Firefox for Android, because the browser attempts to load the whole file into memory. So you are limited
to files that will fit in the OPFS.
On Chromium browsers, there is a larger quota for the OPFS.
See also: [ [Install PWA and use OPFS in Chrome for Android](Demo-OPFS_Chrome_Android.md) ]