I created a progressive web app and am using electron for app distribution to use some native features.
The PWA app works fine offline in Google Chrome.
The PWA updates work fine in the electron app but starting app offline fails to load anything. Using the inspector, the service workers are running.
No errors in the console and page is blank.
Is there a trick I am missing ?
PS: when loading page online, the network tab shows that all assets except the index page are served by the service worker. Oh, and on Google chrome, there is a (disk cache) for index page. This might be it.
After more testing I realised that this was an issue with my webpack configuration.
I use WorkboxPlugin to build the manifest and it was placed before HtmlWebpackPlugin and needs to come last. This was why the index page was not working: it was not in the manifest.
Related
I'm working toward adding PWA functionality to a web app for a client. However, I'm getting variattions between my test app and my implementation. on all apple devices, my client app has a readonly url bar that I cannot seem to get rid of. I created a stand alone test app with angular and added on the pwa functionality using Angular's pwa package as outlined here.
Here are the varying results. test app is on the left, and client app is on the right:
The apps as the appear install on my mac
The supporting manifest files
As far as I can tell everything is the same but I'm getting different results. What am I missing?
The only difference I can think of to explore at the moment are the hosting environments. The test app is on netlify and the client app is on an AWS setup through CloudFront.
Here are the headers that are being returned by the index page for each:
This was due to the manifest file not living on root of the site. It was instead inside of an offline folder.
I have a PWA that I've been using perfectly till I updated my phone to 11.3 (introduce Service Workers supports, so in my iPhone it was only a bookmark) and all worked like a charm.
After I've updated to iOS 11.3 I wasn't able to enter to my app because I have an external login (in other domain) so each time I try to open my open this will open a safari browser to make the auth. Before PWA in iOS the external URLs were open in the same open (without open safari). Do you know if this is the correct behavior and, if it is ok, how can I fix it?
Thanks!
I managed to fix this by removing the manifest meta tag:
<link rel="manifest" href="/tracker/site.webmanifest">
My project is a simple PWA that uses Google's OAuth for login. I was getting redirected to Safari to login and unable to go back to the app (on my home screen). Hope it works for you too, I wasted 2 days trying to find a solution.
The reply by Anand tells me that offline capable PWAs need to implement service workers, since they are supported in 11.3 (or 11.4, not sure) and NOT manifests.
Anyways, this worked for me, hope it helps others as well.
When PWAs without service works(either your browser don't support it or your app don't have one) are added to home screen, its mere a bookmark. When the browser finds a SW, then it creates a package(like apk).
How to test this - Find a PWA site without service worker in android and add to home screen. When I tried it in one of Samsung device, it showed only "Remove" option and no uninstall option. When I added a PWA which had SW, got uninstall option. I was also able to locate the apk generated by Chrome when service worker is present.
Now on iOS - 3 possibilities I could think of.
1) My theory based on above behavior on PWAs with and without Service worker, your home icon create by iOS 11.2.x is a bookmark and the new version of safari is treating it as a bookmark to open it in browser. I couldn't test this as I've upgraded to 11.3 already and don't have a pre 11.3 PWA icon.
2) If you have reinstalled the icon(by removing and adding again to home screen) and still have the issue, its probably because your manifest file or service worker files have some issue/compatibility with Safari.
Since we don't have something like Lighthouse for safari, you can validate your manifest.json and service workers in Chrome Lighthouse.
3) Check on scope attribute in the manifest file to make sure you cover your entire domain you intent to cover. If you scope covers domain.com/myapp only, domain.com/otherapp will be opened in the browser when tried to open from any source.
It seems that with the last iOS version 11.4 this issue is solved, I think that now safari shares the context between the browser and the PWA and for example from PWA cookies can be accessed throw safari.
But I think there's still an issue when you open the PWA and you are being redirect to login (safari opens) once you're log in you stay in the browser (iOS does not return to the PWA, but this is a first step)
I had an issue with an Angular2 app (that makes use of Angularfire2) where a FirebaseListObservable was loading considerably slower on mobile Safari compared to any other browser when deployed to production. The production domain was a custom one - not one provided by Firebase.
Running an iOS simulator using XCode, I could see the below error in the Safari web browsers's console.
The solution was to look at the firebase-auth info message, not the errors themselves.
To fix, I had to add my custom domain to the Firebase console to the list of 'OAuth redirect domains'. At the time of writing, this can be found here: https://console.firebase.google.com/project/[YOUR_PROJECT_ID_HERE]/authentication/providers
I have web application ASP/MVC which uses application cache and it has to work as standalone application when added to home screen. It works fine, but on iOS10 it doesn't cache and doesn't work on offline mode. I don't have exact steps but it seems like it stops workign when i add this application for second/third time:
1 I add application to home screen and it works properly
2 I add this application to home screen again - it doesn't work
And all next installed applications doesn't work.
Also i wasn't able to reproduce it on one of the test servers.
I would try to clen cache (maybe it would help) but because of atandalone applications are opened not in Safary on iPhone - i don't know how to do this.
Also i found script to debug application cache
https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
But when i run application which doesn't work in offline mode - it simply doesn't enter in any of events handlers.
Found out what the problem was. There was redirecting on another page on my site and you could redirect even if application cache is still loading content so the caching stops and after redirecting back we on purpose setted manifest to empty string (it turned out like a feature that after redirecting back caching doesn't start being loaded). But on another OS caching started loading according to previous manifest, and only for iOS 10 if manifest turns out to empty string - caching doesn't start.
I have a web app that is intended for use as an iOS offline web app. A key feature of the app is that users can download files with extensions like .doc, .ppt, .pdf, etc. To make these available offline, I am making entries for any such files in a cache manifest.
One other caveat: the most user-friendly way I could get these files to open is to jump out of the offline web app and into Safari to actually open the file. This way, I get the "Open in {{Application}}" options that Safari provides. There seems to be some sort of disconnect during this switch from the offline web app to Safari.
Assuming a clean slate:
I've gone and wiped all the data for this site using Settings->Safari->Advanced.
I launch the offline web app while connected to the server (So we're in online mode.)
The application updates the cache successfully.
I close the web app and disconnect from the server.
I relaunch the app and all of the navigation chrome works, so we know the cache is functioning properly.
I click the link to open a file that needs Safari, so iOS switches to Safari and goes to the file's URL.
Safari says "Safari cannot open the page because the server cannot be found."
So, it seems the this application cache is accessible from the offline web app, but not Safari? Can anyone verify this?
And then going forward, if that is in fact the case: any ideas for a better way to do it? Thanks!
iOS Safari work same as Safari does. But I assumed that your iOS Safari doesn't load successfully, you know, the network of iPhone isn't fast as your PC. You must attach handlers to determine when your offline data is loaded successfully.
Check it out: http://www.html5rocks.com/en/tutorials/appcache/beginner/ and try to use JS to check status of ApplicationCache.