Work with the screen orientation in a common way for iOS, Android, and web
npm install capacitor-webview-cache-cleaner-pluginbash
npm install capacitor-webview-cache-cleaner-plugin
npx cap sync
`
Examples
I recommend something like:
`typescript
import { CapacitorWebviewCacheCleaner } from 'capacitor-webview-cache-cleaner-plugin';
// ...
if (/ some custom conditional matching the moment you want to flush /) {
if (this.capacitor.getPlatform() === 'ios') {
await CapacitorWebviewCacheCleaner.cleanWebViewCache();
}
}
`
For instance, in my case, an automatically injected Keycloak configuration into the local storage was never cleared between two app versions or between different environments, causing inconvenience for my users.
Here's an excerpt of the code selected to flush the cache only when there's a version or environment change.
`typescript
@Injectable()
export class MyService {
private currentMobileAppBuildVersion: string =
environment.envName + '-' + packageJson.version + '-' + packageJson.buildIncrementNumber;
constructor(
@Inject(CAPACITOR) private readonly capacitor: CapacitorGlobal,
@Inject(CAPACITOR_PREFERENCES) private readonly preferences: PreferencesPlugin
) {}
/**
* Clear all data in different storages available on the device (localStorage, sessionStorage, capacitor preferences, secure storage plugin and cookies)
*
*/
async clearAllLocalData(): Promise<[{ value: boolean }, void, void]> {
if (this.capacitor.isNativePlatform()) {
await CapacitorWebviewCacheCleaner.cleanWebViewCache();
}
localStorage.clear(); // web local storage by url
sessionStorage.clear(); // web local storage by tab, cleared on tab close
return Promise.all([
this.preferences.clear(), // Capacitor Preferences clearing
CapacitorCookies.clearAllCookies() // Cookies clearing
]);
}
}
`
API
cleanWebViewCache()
$3
`typescript
cleanWebViewCache() => Promise<{ value: string; }>
`Returns: Promise<{ value: string; }>
--------------------
Dev worklow
npm run verify : builds and tests web and native code
npm run fmt : autoformats web and native code
npm run lint : lints web and native code
npm run docgen : generates documentation from plugin interface (see Documentation)
npm run build : builds web code into ESM and bundle distributions
Whenever you are ready to publish your plugin, just use:
npm publish`