Hey Danny! Great work on this. Any chance you could post the code to the examples? :)

In safari on iOS 17-1-2 on an iPhone 12 mini, without installing the PWA, the AR robot demo briefly flashes an AR screen (0.5 seconds) that says “Zero kb” then it closes.

I ask for a bit of help and documentation around the implementation.
Where is the source code of it?

And how do you manage server side the kind of attestation format (I'm referring to the attestationObject.fmt property) that could be 'fido-u2f', 'android-safetynet' etc.

Thanks for any help

1- in Speech recognition, the page is Swipeable horizontally because the result text box is wider than the screen (tested on iPhone 8 Plus). fixed

2- in Speech recognition, the result text box is fillable by the user but shouldn't. fixed

3- in dark mode, the color of the bottom bar icons and text is white, which is inconsistent with the rest of the ui elements. (minor)

4- the top and bottom bars is swipeable which creates annoying behavior when trying to swipe.

5- when I reload, the "Your device is currently offline." message disappears. fixed

6- when I get "Geolocation error", the background is still swipeable. fixed

7- in the Info section, the form in the bottom is wider than the screen. fixed

8- in Audio recording, the volume slider isn't swipeable.

9- this. fixed

10- when I reload while offline usually I get this, but I couldn't reproduce this behavior while recording the screen.

11- sometimes I get this while offline. (can't reproduce)

12- screen recording fixed

13- is this supposed to happen this quickly? can't reproduce

Repro:

• go to homepage and navigate to any of the feature pages
• Then go back by swipe on the edge of the screen

Results

• The bottom navigation moves with the swipe (instead of only the content section)
• after it has transitioned the whole page refreshes

Expected

• the best case would be for the navigation to stay fixed at the bottom like a native app.
• if that's not possible then prevent the refresh. I think many website nowadays have a seamless back experience when swiping from the side.

This is a great project for understanding pwa and explore its capability. For most developers, this project will be much more usefull if we can explore the feature, and view the code, implement it ourselves.

Please kindly consider it, we love OSS!

Geolocation does not work on iOS 16.4.1 (a).
I always get a "Your device does not have the permission to access GPS information. Please enable this in your device's settings".

It does not matter if I just open the webpage or as PWA (after "Add to home screen"). I never get asked if I want to allow geolocation. And different to notifications in PWA, I also can't see a "location" option in my System app settings to configure permissions.

With push support now on iOS safari, I am getting no sound from alerts using this. Is that expected system behaviour?

When I try to install the PWA (via the provided button) on a Samsung Galaxy S7 Edge phone (Android 8.0), it seems to not be doable and when I install the site on the home screen via the browser's options it results in a website shortcut unlike when I do that via Chrome.
Is this normal or a bug?

I'm not sure if it's an API issue or something to do with this app, but whenever I on the "Network info" section on my phone or laptop (both connected to the wifi) I always get 4g as the "Network type" and that seems odd 😕.

When going to https://whatpwacando.today on iOS 17.3 Safari the PWA says JavaScript is disabled, when it's enabled:

Love it!
Maybe its an idea to detect if a feature is posible on the desired device to change the color of the feature. so posible green and not available red.
aside that great job!

Network type Bug
Device: Android Phone
Issue: In network information page, network type is shown as 4g.
My connected network: WIFI (my celular data is turned off)

Feature Suggestion
"Copy To Clipboard",
I know it is a part of web development and not specific to PWA and from a very long time now, however since you have also added audio player, I think this could be included too.

Thanks for your work, it helps a lot.

"Install to home screen" does not work in Firefox (FF 113.0.2, Win10).
Instead, it shows the explanation how to add the page to the Home Screen on iOS. It does work in Chromium and Edge, though.
Also, the explanation window is not fully visible here.

Changing light/dark mode works in Safari, but when you add app to home screen (PWA) then it does not work any more.

iOS 17.2

It is iOS PWA bug not whatpwacando.today bug

It seems something is not right with the service worker. That's also why there is no install prompt.

Hi, I am trying your app and I can not install the pwa either phone or desktop. I analize it in desktop chrome and the problem is that manifest is erroneous due to lost icons. I don't know if this it is the main problem or there are other. For this problem is your server which return a 403 when chrome try to bring the images. Check your server configuration or routes to solve the problem.

Thanks for your work!

iOS Safari supports web push notifications when added to home screen
But it doesn't seem to work on https://whatpwacando.today

On the iPhone 14 pro max running iOS version 16.6.1 while using Safari to visit the homepage, pressing the install to home screen button and then pressing the close button immediately prevents the user from scrolling page.

You could add the capability of having your PWA as a share target in opposition of use the share action

Correct speech recognition link in https://whatpwacando.today/speech-recognition to caniuse.com should be https://caniuse.com/speech-recognition

Is there any chance that this project become open source?

Hello Danny,
I feel the UI seems outdated will there be any update to this app? I would also like to contribute to this project and add visual improvements.

Regards,
dharmeshgurnani

Love the site! I had a suggestion because I want to try this on all my devices:

Having to click into each capability takes a bunch of time, would be even better to be shown the status for the current browser visually using either colors, symbols, or both.

authenticator can not recognized any physical token connected to usb drive

Hi!
I tried to test the notification functionality, but found these errors on the console:

Errors:

Uncaught (in promise) TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': No active registration available on the ServiceWorkerRegistration.
    at i (bundle.970dbe147463ef20abbf.js:225)
    at HTMLElement.<anonymous> (bundle.970dbe147463ef20abbf.js:225)

bundle.970dbe147463ef20abbf.js:225 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'showNotification' in undefined
    at i (bundle.970dbe147463ef20abbf.js:225)
    at HTMLElement.<anonymous> (bundle.970dbe147463ef20abbf.js:225)

OBS: I have already given permission to send the notification.

Browser: Microsft Edge
Version: 85.0.564.51

"Media Capture" and "AR/VR" work the first time the app is run, but if I click the home button on my iOS device and then click the app again on the home screen, the Media Capture displays no video input (everything is black) and the AR/VR screen only show the robot and no video.

If I kill the app and then click the app on the home screen, both features resume working.

Is the source available?

so currently I saw the demonstration of the device orientation affecting the 3d cube and tried to replicate it using device motion and react three fiber, but currently I can't find a way to get device motion API to work with any javascript frameworks

Currently installed app on Android 12. Tried running the app after installing via Chromium browsers - Chrome, Brave.

Expected behavior on Chromium browser:

1. Pop up notification requesting for permission for geolocation / web push notification appears
2. The geolocation and web push notification feature work.

Current behaviour:

1. Pop up notification requesting for permission does not appear.
2. Geolocation and web push notification does not work. geolocation shows an indefinite spinner.

For some reason, the app is working fine if PWA is installed via the Firefox mobile browser.

The voice recognition demo works on Safari / iOS (15.1). But when I "install" the PWA by adding it to the desktop, the fullscreen mode of the web site does not enable voice recognition anymore. There is not request for user authorization regarding the microphone, nothing happens.

Please share the source code for this project.

It say "Installing on MacOS", instead of losedows in Firefox.

Loads in the browser but not in the PWA.

When I am in flight mode and open the app I get a "cannot connect to site" error message and the app doesnt open.

To support offline mode

I am using samsung S8

Happened to me in firefox 117.0.1 on ubuntu.

Steps :

• On the website go to any feature.
• Go back to homepage using browser button or mouse button

Result :

• Back to the homepage, I can't click on any feature or even scroll the page. Going to another tab like info does not fix the problem, I have to manually refresh the page.

could this website benefit from SSR ?
or at least, showing a page describing benefits of allowing JS for this page...

Excellent PWA example. We have a project that needs a PWA app with camera and geolocalization.
Can you share your code o need your help?
We are using Vaadin (Hilla) PWA framework. Is it possible to use your example.

Could not send you an email for the app

I tested both on Android Chrome (OnePlus 7 OxygenOS 12.1, Chrome 120.0.6099.145) and Windows 11 Edge (121.0.2277.49 beta (64 bit)), and both fail to receive notifications for more than 5s. I don't know if it's a problem with my testing method, you can try it out~

I'm running iOS 17.0.2

I noticed that after trying "Media capture" or "AR/VR", the bottom nav bar would start moving with the page as I scroll it up and down and remains stuck halfway past the bottom of the screen until the app is killed and restarted. This is on an iOS device.

The background color is white and the text is light gray, making it hard to read.

PWA is used a lot, is it worth it? I'm new to mobile dev and I developed an MVP in React Native, but due to several technological limitations I thought about switching to PWA, does it make sense?

The text area on the FAQ page is never enabled and hence the Send remains disabled. As a result you cannot ask a question.
I'm using 1+ 5T Android

Steps to reproduce:

• Go to https://whatpwacando.today/payment
• Click on Checkout
• Nothing happens

On opening the console, the following error occurs:

Device Info:

Operating System: Windows 10 version 10.0 (64-bit), or Windows Server 2016 or 2019 version 10.0 (64-bit)
True Operating System Core: Unknown. Detection not supported or is blocked by browser setting(s)/extension(s).
Browser: Chrome version 106.0.0.0 (64-bit) (Engine: Blink)
True Browser Core: Unknown. Detection not supported or is blocked by browser setting(s)/extension(s).

Pressing "Register Credential" button at https://whatpwacando.today/authentication yeilds "Registration failed" popup message.

In console this presents as a CORS problem:

Access to fetch at 'https://api.whatpwacando.today/webauthn/registration-options' from origin 'https://whatpwacando.today' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The webpage is missing source code to check if Install to home screen is done/ and how todo it.

Hi,

Safari 16.2 on iOS and iPadOS has an advanced setting to enable experimental features.
I’ve enabled these two:

• Push API
• Builtin Web Notifications

And was expecting the notification demo feature of this PWA to be enabled, but it isn’t.
Is there additional tech that’s needed that I either need to enable or aren’t supported yet in Safari, not even as experimental feature? Or are there hard-coding in this PWA preventing it working ? Or those two particular experimental features are vendor-prefixed?

Note: I’ve enabled the “Contact Picker API” experimental feature, and the corresponding demo feature in this PWA started working since then

Would be cool if the main page would immediately give info for each feature which browsers support it. After clicking three features i lost interest in checking because i figured while a feature may be technically possible in a browser today, that's not the same as saying this is something a PWA can do. I interpret the latter as at least available in chromium browsers / firefox / safari.