kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-08-03 11:28:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a file handling demo (#488)

Browse Source
This commit is contained in:
Jaifroid 2023-11-10 16:43:45 +00:00 committed by GitHub
parent 6792996ec4
commit bd46d08646
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 4 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.md) ] [ [Picking a folder of archives](screenshots/Folder-Picking.md) ] [ [Install PWA on Firefox Android](screenshots/Install-PWA_Firefox_Android.md) ] [ [Demo of all OPFS features](screenshots/Demo-OPFS_all_features.md) ] [ [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) ] [ [File handling (desktop)](screenshots/Demo-FileHandling.md) ] [ [Install PWA on Firefox Android](screenshots/Install-PWA_Firefox_Android.md) ] [ [Demo of all OPFS features](screenshots/Demo-OPFS_all_features.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)

40
screenshots/Demo-FileHandling.md Normal file
View File

@ -0,0 +1,40 @@
# Opening a ZIM from the File System (desktop browsers only)
Simply visit **_[pwa.kiwix.org](https://pwa.kiwix.org)_** in a dekstop browser and install. More info after the demo:
![File handling demo](File_handling.gif)
See also: [ [Install PWA](Install-PWA.md) ] [ [Folder picking](Folder-Picking.md) ] [ [Demo of all OPFS features](Demo-OPFS_all_features.md) ]
## How do I install the PWA?
In Chromium browsers (Chrome, Edge, Brave, etc.), an Install button will show in Configuration. In Safari on macOS you can use File ->
Add to Dock, and in Firefox (desktop), you can bookmark the app. The demo shows file handling in a Chromium browser on Linux, but it's
exactly the same process on Windows and macOS. For Firefox and Safari, see "What about Firefox and Safari?" below.
## The File Handling API is available on Chromium desktop browsers
Currently file handling as shown in the demo can only be used on modern **Chromium browsers** in Linux, macOS and Windows (not yet on mobile).
You will need to give permission the first time that you open a ZIM from the file system. For the best experience, be sure to tick the box
allowing the app to always open ZIM files.
## What about Firefox and Safari?
In all browsers, you can drag and drop a file from the file exploer, with very similar effect to the File Handling API. However, you might
find it more convenient to put all your ZIM archives in one folder and [open the folder](Folder-Picking.md) from within the app. Then you
can very quickly switch between archives. For a really seamless experience, consider using the [Private File system](Demo-OPFS_all_features.md)
on (Firefox and Chromium) browsers.
## Why don't my files show the Kiwix icon?
Due to the fear of Web Apps fishing and spoofing by registering themselves for common file types such as Word, Excel, etc.,
Chromium browsers have not yet implemented file system icons, though they intend to do so. You can follow progress on this issue in
[#486](https://github.com/kiwix/kiwix-js-pwa/issues/486).
## Help, another app opens, or the app starts but doesn't open the ZIM!
This can sometimes happen with the installed PWA, if you have another app installed that handles ZIM files. You can usually fix this by right
clicking the file, choose Properties, and click the "Change" button next to "Opens with" (in Windows), or under the "Open With" tab in Linux.
Choose "Kiwix JS PWA Edition" under the list of suggested apps. Then click "Apply" (Windows) or "Set as Default" (Linux).
See also: [ [Install PWA](Install-PWA.md) ] [ [Folder picking](Folder-Picking.md) ] [ [Demo of all OPFS features](Demo-OPFS_all_features.md) ]

BIN
screenshots/File_handling.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 MiB

8
screenshots/Folder-Picking.md
View File

@ -4,6 +4,8 @@ Simply visit **_[pwa.kiwix.org](https://pwa.kiwix.org)_** in a modern browser. R
![Folder-picking demo](Firefox_folder_picking.gif)
See also: [ [PWA Installation demo](Install-PWA.md) ] [ [File handling](Demo-FileHandling.md) ] [ [Demo of all OPFS features](Demo-OPFS_all_features.md) ]
## Use the File System Access API or the Webkitdirectory API
All modern desktop browsers now allow you to pick a folder of ZIM archives and switch quickly between archives in the folder. **Chromium browsers** (e.g. Chrome, Edge) use the
@ -29,5 +31,7 @@ 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 [File handling](Demo-FileHandling.md). Together, these APIs provide
a near-native experience..
See also: [ [PWA Installation demo](Install-PWA.md) ] [ [File handling](Demo-FileHandling.md) ] [ [Demo of all OPFS features](Demo-OPFS_all_features.md) ]

4
screenshots/Install-PWA.md
View File

@ -4,7 +4,7 @@ Simply visit **_[pwa.kiwix.org](https://pwa.kiwix.org)_** in a modern browser. R
![Install-PWA demo](Install-PWA_demo.gif)
See also: [ [Install PWA in Firefox for Android](Install-PWA_Firefox_Android.gif) ] [ [Install PWA and use OPFS in Chrome for Android](Demo-OPFS_Chrome_Android.gif) ]
See also: [ [File handling](Demo-FileHandling.md) ] [ [Install PWA in Firefox for Android](Install-PWA_Firefox_Android.gif) ] [ [Install PWA and use OPFS in Chrome for Android](Demo-OPFS_Chrome_Android.gif) ]
## Install in Chrome/Edge, bookmark in Firefox, add to Home in Safari
@ -39,3 +39,5 @@ the API and can't currently be avoided.
## Add the PWA to the Edge sidebar
If you are using Microsoft Edge (Chromium), you can now add the PWA to the Edge sidebar. See our demo [Add Kiwix PWA to Edge sidebar](Add-KiwixPWA-to-Edge-sidebar.md).
See also: [ [File handling](Demo-FileHandling.md) ] [ [Install PWA in Firefox for Android](Install-PWA_Firefox_Android.gif) ] [ [Install PWA and use OPFS in Chrome for Android](Demo-OPFS_Chrome_Android.gif) ]