I have made an angular + workbox application that now is converted using PWABuilder to Cordova project targeting ios platform.
Now my problem started with offline page, I want my application to work the same way it works on chrome browser with offline mode.
That is, even if I'm in offline mode, I'm able to use website and store the requests for later on.
But on IOS device, when I open application, then turn airplane mode or disconnect wifi and re-run an app a white screen appears. (Offline page support is disabled in manifest.js - I don't need Offline.html)
I have registered routing by
workbox.routing.registerNavigationRoute('/');
And then
// couple of following lines:
workbox.routing.registerRoute('regex with js,manifest...etc', networkFirstStrategy({cacheName} ...)
And the weird fact is that on ios this somehow can't be cached, or somethings different happens.
I'm waiting for any suggestions, or leads that can help me fix this behaviour.
Answer
The WebView as used by Cordova in the latest iOS (12.0.1) will not run Workbox because it doesn't support Service Workers.
Details
Cordova apps run in a WebView.
The app executes in a WebView within the native application wrapper... source
The WebView in the latest production iOS (12.0.1) only supports Service Workers within three specific contexts, which doesn't include Cordova apps.
At this time [the Service Worker API] is only available in Safari, applications that use SFSafariViewController, and web applications saved to your home screen. source
Next Steps
It may be possible to add Service Worker support via a Cordova Plugin. For example: cordova-plugin-service-worker.
In addition, you may also need to add Background Sync support as the latest Safari does not support Background Sync. For example: cordova-plugin-service-worker-background-sync.
The Workbox docs state that they provide a fallback strategy when Background Sync is not supported:
Workbox Background Sync...also implements a fallback strategy for browsers that
don't yet implement BackgroundSync. source
However, an open issue on Github shows that the fallback strategy may not work on iOS.
Related
1)WEB
I am automating the web tests on the mobile browsers on the mobile cloud.
I see that the cleanup which happens after each release of the phone on the cloud - is the possibility to make suite length shorter.
On Android I have such solution: I do not start the web tests as (desiredCapabilities.setBrowserName(MobileBrowserType.CHROME);)
but as a separate app:
(desiredCapabilities.setCapability("appPackage", "com.android.chrome");
desiredCapabilities.setCapability("appActivity", "com.google.android.apps.chrome.Main");)
I do not start the driver new between the tests (which would lead to the release of the phone), but simply:
(Driver.resetApp();) before each test to delete the cache in the browser.
Native
I automate native apps too, and want to increase the speed - therefore need to delete the cache inside the app
My problem is iOS Mobile Safari and with native apps:
driver.resetApp() does not work for iOS: https://discuss.appium.io/t/want-to-clear-storage-or-cache-for-ios-app-tried-driver-resetapp-but-it-is-not-working/35891
fullReset=true (Appium 1.6.5 - Real iOS Device Execution - Reset Safari (clear history and website data)) with restart of the driver is not a solution for me, while then I need to wait the cloud provider to release the phone and clean it up.
(https://discuss.appium.io/t/clear-app-data-ios/29356)
Does anyone know any way how to delete the safari Mobile cache without restarting a browser?
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.
We are experiencing a pwa application with services worker and everything that surrounds this theme.
I have questions about cache. Information is currently cached and accessed when offline. This works well when we talk about Android. In IOS it seems that the cache is not shared when we add the application to the home screen (installed). It seems that IOS keeps a cache for the application accessed in Safari and the installed one (I'm talking about the same application). In android it seems that the same cache is shared for the version installed and accessed in chrome.
In IOS after adding the home screen I am forced to log in online to generate the installed application cache.
About IOS would you like to know if you have already gone through this? And what would be the best way to persist this data so that the same cache is shared in the application accessed in Safari and the installed version.
In the service worker you mention the name of the cache, until and unless you change it there or update it e.g;
const staticCacheName = 'pages-cache-v3'; it will remain same and will be shared among versions. This may be true for the Android am not sure about IOS. Please update me if you have already found a better answer. Cheers:)
If this is still relevant, then I think that you should look at my answer in this question, because you are faced with the same problem.
PWAs on iOS 12 no longer shares Service Worker cache with Safari?
As Apple announced Service Worker support for iOS 11.3 a few months ago, I recently started trying to get a service worker to work on iOS. On Safari it works as expected, after vising the website, it works offline. However, when trying to use the same feature in Chrome, I had intermittent results. Specifically, the service worker would only work every other page refresh, with the original refresh after going offline being one of the ones not working.
I know that Chrome on iOS is built on a version of Safari, therefore I am confused about this behavior.
Is this due to incomplete support from Chrome iOS for Service Workers? Because it is Chrome on iOS, I'm not sure of any easy way to debug it either, so any other tips to help track down the problem would be appreciated. Thank you!
Chrome for iOS do not support service workers currently(as of Apr-2020) and also the "Add to home screen" option is not available, if you are interested in that. Any offline page loading that you are experiencing should be from regular browser cache.
Here is an official documentation from Apple's web-kit page.
Update: A previous version of this post stated the Service Worker API
is available in all applications using WKWebView. At this time it is
only available in Safari, applications that use
SFSafariViewController, and web applications saved to your home
screen.
Notably, Chrome uses WKWebView as its browser engine in iOS, which don't have service worker support yet as per the above statement(which you can find in the link provided above). So the only way you can use Service worker in iOS is to use Safari browser or use one of the above supported web-views inside a native app.
Here is an article on what all PWA features iOS is still missing. Remember, this is a fast growing area. Always check if what is applicable now, especially if the documentation/article is getting older.
Here is an adapter to help debug in Chrome dev tools for pages loaded iOS - webkit/safari. Hope it becomes as easy as Android Chrome debugging one day!
Chrome for iOS is open source (https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html)
We can install the Chrome app with our developer signed certificate on an iOS device, launch the Chrome App, and start testing.
It is technically feasible.
As an update in January 2021: the official documentation from Apple's web-kit page still says the same thing, and I just battled a very difficult to debug issue in Chrome iOS - posting here in case it helps someone.
I had an iFrame containing a cross-origin Angular 10 PWA with Service Worker enabled, and the iFrame content would not show after an initial load - no errors, no server logs, just blank. The only solution that worked was to self-destruct the Service Worker per Angular's docs, and now the iFrame loads fine.
I have a Qlikview dashboard that I need to present and I've created a site that loads the Qlikview server onto the browser and runs it from there.
I now need to create an iOS app that does this. But the requirement is that the dashboard shouldn't open on the browser. The server should be loaded and run from the app itself. Is there any way to do this?
PS, I'm completely new to iOS App development and any help will be appreciated.
Yes. While saving it as a shortcut and opening it in the browser would be simple, using Apache Cordova is the best way to develop a smartphone app with HTML5/CSS/JavaScript. From the website:
When using the Cordova APIs, an app can be built without any native
code (Java, Objective-C, etc) from the app developer. Instead, web
technologies are used, and they are hosted in the app itself locally
(generally not on a remote http server).
And to make things better, it's open source.