From b1dbd22cd42928c610ba2fd9c1d045749cbde4e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horv=C3=A1th=20B=C3=A1lint?= <40771359+horvbalint@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:18:34 +0100 Subject: [PATCH] docs: docs/pwa improvements (#1762) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joaquín Sánchez --- docs/content/80.pwa.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/content/80.pwa.md b/docs/content/80.pwa.md index 7fcd9e76..f44f455d 100644 --- a/docs/content/80.pwa.md +++ b/docs/content/80.pwa.md @@ -30,6 +30,12 @@ To install a Progressive Web App (PWA) on Safari, follow these steps: - Customize the name of the app (if desired) and tap "Add". - The PWA should now appear on your home screen. +### Other borwsers on iOS + +Browsers on iOS other than Safari (like Chrome) are very limited on PWA functionalities. Besides Web Push Notifications (like in Safari) not even PWA installation is supported. + +If you are using one of these browsers and want to add Elk to your homescreen, you will have to use Safari and follow the instructions above. + ### Firefox To install a Progressive Web App (PWA) on Firefox, follow these steps: @@ -119,8 +125,9 @@ To debug the PWA service worker in your mobile browser, you will need to: - Confirm the prompt on your device to allow USB debugging. - Open Chrome/Edge browser in your device. 4) Open Chrome on your computer and go to `chrome://inspect/#devices`. - - Elk application should be listed in the "Remote Target" section after a few seconds (navigate to any page). - - Enter `http://localhost:5314` in the open in a new tab input and click Open button. + - Your device should be listed in the "Remote Target" section after a few seconds (if not, open Chrome/Edge and navigate to any page). + - Click the "Port forwarding..." button and type "5314" into the "Port" input and "localhost:5314" into the "IP address and port" input, then press "Done". + - Enter `http://localhost:5314` in the "Open tab with url" input and click the "Open" button. - Click on the "Inspect" button to open the DevTools. 5) Remember to remove the service worker from your device browser using dev tools once you finish testing the service worker: - Go to `Application > Storage`, you should check following checkboxes: @@ -129,3 +136,4 @@ To debug the PWA service worker in your mobile browser, you will need to: - Cache: `[x]` Cache storage and `[x]` Application cache - Click on Clear site data button - Go to `Application > Service Workers` and check the current service worker is missing or has the status deleted or reduntant. +6) Disable port forwarding: open the "Port forwarding..." modal again on the `chrome://inspect/#devices` page and either uncheck the "Enable port forwarding" option or remove the entry from the list and click "Done".