diff --git a/README.md b/README.md index b742b31e..c52a59ef 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/screenshots/Demo-FileHandling.md b/screenshots/Demo-FileHandling.md new file mode 100644 index 00000000..7f45b6b2 --- /dev/null +++ b/screenshots/Demo-FileHandling.md @@ -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) ] diff --git a/screenshots/File_handling.gif b/screenshots/File_handling.gif new file mode 100644 index 00000000..8aef8097 Binary files /dev/null and b/screenshots/File_handling.gif differ diff --git a/screenshots/Folder-Picking.md b/screenshots/Folder-Picking.md index 8d6d9db5..eb65a837 100644 --- a/screenshots/Folder-Picking.md +++ b/screenshots/Folder-Picking.md @@ -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) ] diff --git a/screenshots/Install-PWA.md b/screenshots/Install-PWA.md index c5371551..f3d1a13d 100644 --- a/screenshots/Install-PWA.md +++ b/screenshots/Install-PWA.md @@ -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) ]