sluedecke
commented
3 years ago When it comes to alternative approaches, after some research I came up with the modifications below. They assume that you use capacitor v3.
Service Worker / PWA in native capacitor apps
A) Enable service workers in native brigdes
Android
Add this to MainActivity.java::onCreate (Sources: capacitor issue 1655, Stack Overflow answer):
if(Build.VERSION.SDK_INT >= 24 ){
ServiceWorkerController swController = ServiceWorkerController.getInstance();
swController.setServiceWorkerClient(new ServiceWorkerClient() {
@Override
public WebResourceResponse shouldInterceptRequest(WebResourceRequest request) {
return bridge.getLocalServer().shouldInterceptRequest(request);
}
});
}iOS
Add a list of your domains incl. server.hostname / localhost to Info.plist, e.g.:
<key>WKAppBoundDomains</key>
<array>
<string>192.168.0.3</string>
<string>127.0.0.1</string>
<string>localhost</string>
</array>Enable limitsNavigationsToAppBoundDomains in your src-capacitor/capacitor.config.json and set server.url:
{
"appId": "your.fancy.app.id",
"appName": "Your Fancy app",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "www",
"ios": {
"limitsNavigationsToAppBoundDomains": true
},
"server": {
"url": "http://192.168.0.3"
}
}
If you are stuck with capacitor v2, this might help:
Add this to node_modules/@capacitor/ios/Capacitor/Capacitor/CAPBridgeViewController.swift::configureWebView (Sources: capacitor issue 4122, flirt.dev on iOS 14 and service workers):
// 2021-10-07 GUIDE enable bound domains / service worker
if #available(iOS 14.0, *) {
configuration.limitsNavigationsToAppBoundDomains = true
} else {
// Fallback on earlier versions
}B) Build and run (still somewhat shaky and probably not optimized, but it works for me)
-
build twice
# build your client normally to get all the icons generated / names set etc. quasar build -m capacitor -T ios # build AGAIN, but this time the app as PWA only and copy it into src-capacitor quasar build -m pwa rm -rf src-capacitor/www/* cp -r dist/pwa/* src-capacitor/www pushd src-capacitor npx cap sync popd # [iOS] edit capacitor.config.json to have the server url set -
Open app in IDE or do stuff with
gradlew/xcodebuild
yusufkandemir
aggroot
mfyang
Is your feature request related to a problem? Please describe.
My web app uses a service worker to capture fetch requests from the browser and add an authentication header. E.g. for all
<img src=.../>tags and similar. This works well for a web app deployed as pwa.Another use case is to do some extensive prefetching within the service worker in order to go offline with the app.
This does not work at all as a capacitor app since:
quasar build -m capacitor -T ...builds an spa and not the pwa equivalentDescribe the solution you'd like
I would love to have an option to deploy my PWA as a capacitor project by adding a new mode to
quasar dev/buildor some modifier to the capacitor mode.Describe alternatives you've considered
Alternative is to add the authentication header as a query parameter to the
<img src=.../>and adapt my server to look for authentication in both the request headers and query parameters. This is implemented and works.For prefetching one could move the logic from the service worker back into the app itself. I did not test that yet.