docs: docs/pwa improvements (#1762)

Co-authored-by: Joaquín Sánchez <userquin@gmail.com>
This commit is contained in:
Horváth Bálint 2023-02-16 14:18:34 +01:00 committed by GitHub
parent 436489461c
commit b1dbd22cd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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". - Customize the name of the app (if desired) and tap "Add".
- The PWA should now appear on your home screen. - 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 ### Firefox
To install a Progressive Web App (PWA) on Firefox, follow these steps: 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. - Confirm the prompt on your device to allow USB debugging.
- Open Chrome/Edge browser in your device. - Open Chrome/Edge browser in your device.
4) Open Chrome on your computer and go to `chrome://inspect/#devices`. 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). - Your device should be listed in the "Remote Target" section after a few seconds (if not, open Chrome/Edge and navigate to any page).
- Enter `http://localhost:5314` in the open in a new tab input and click Open button. - 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. - 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: 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: - 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 - Cache: `[x]` Cache storage and `[x]` Application cache
- Click on Clear site data button - 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. - 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".