How to clear cache by command in ionic web app? - ionic-framework

When I upload the latest version of my web application to the server, the user must do the following to see the latest version:
If the program is running in the browser it should hit the shift + f5 buttons.
If the program is running in the mobile browser, it should clear the cache as follows:
Settings / Privacy / Clear browsing data / Clear data
Now how can we do this automatically with programming so that the user doesn't have to?

to store data you need sqlite or native storage blugin
with sqlite you can use simple delete requet
with blugin you can set your data to null or use delete methode

I've added version (ex: ?ver=1.0) to the end of scripts in the index.html file:
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js?ver=2.2"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js?ver=2.2"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js?ver=2.2"></script>
And then increase the version number each time you upload it

Related

How to transform Flutter web app into a PWA?

I am making a new Web application with Flutter web.
I want to add service workers to my app in order to make it a PWA.
What I need to use to achieve my goal ?
I have tried to do it with dart packages (service_worker or pwa), but they are deprecated for Dart 2.
Since a service worker is just javascript code you can write one in plain javascript (e.g. in a sw.js file), bundle it with your flutter web app and then register the service worker from the index.html file like this (source):
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
You currently need to switch to Flutter Channel Dev (at Feb 17th 2020, current Dev version 1.15.3)
For existing projects, use the terminal to hit the command:
flutter create .
For new projects, you would have a 2 files: manifest.json and index.html inside your web folder.
While checking index.html you would notice the following script:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/flutter_service_worker.js');
});
}
If the script is not there, added inside <body></body>
This script creates the PWA support for you and be able to "install" the app on a device (this also includes MacOS)
Follow this GUIDE to complete your PWA functionalities.

ionic 4 sub paths not loading when running ionic serve

I had an ionic 4 beta project of --type=angular that was loading at any path without issue.
Periodically, i have been updating my packages by running an npm update and am currently at:
"#ionic/angular": "^4.0.2"
as well as updated installs for the ionic cli, and am currently at:
CLI 4.10.3
I am not sure when this app loading issue started, but i suspect it was after running the last npm update or update install of the cli.
When running ionic serve my application loads correctly, and i am able to navigate to all sub paths without any issues.
However, when:
• refreshing the browser while viewing a sub path
• attempting to enter a url with a sub path
• live reloading while viewing a sub path
the app attempts to load all js files relative to the sub path and fails to run like so:
http://localhost:8100/page/sub/path
fails to load because the app attempts to load runtime.js here:
http://localhost:8100/page/sub/path/runtime.js
my base href is currently set to ./
When i inspect the html source, the script tags are formatted as follows:
<script type="text/javascript" src="runtime.js"></script>
If i attempt to load a page directly at the root, the application loads ok without issue like so:
http://localhost:8100 loads OK
http://localhost:8100/page loads OK
So again to recap, the app only fails to load the js assets at a sub path.
Any idea where to begin troubleshooting?
For anyone running into this same problem, i have the answer.
I am not sure when or why, but my base href was set incorrectly and this was the problem.
I changed my base href from ./ to / and this solved my problem.

javascript library not loaded in ionic

Im including the google cast external javascript library. When I run with ionic serve it works good, but when I run the app in the phone, the library is not loaded. Debugging can see that :
https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/a/d/ad4c985f45c1c538bdfbfbb02d10141b6929e1d5.png
The "http" is replaced by "file"!
I tried to include the libraries with that code:
script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1">
and with type="text/javascript" added; but all codes replaces http by file, and the library is not loaded.
Any suggestions?
When you run the app do not add cdn files starting with "//:", add them like "http://".
If its possible download those files and keep them in directory, after that give directory path to file.
e.g. <script type="text/javascript" src="assets/js/library.js">

Play framework bootstrap images not available in production work in dev

I added Bootstrap to my Play 2.1 application. After adding the following routes, it works well in development:
GET /img/glyphicons-halflings.png controllers.Assets.at(path="/public", file="/images/bootstrap/glyphicons-halflings.png")
GET /img/glyphicons-halflings-white.png controllers.Assets.at(path="/public", file="/images/bootstrap/glyphicons-halflings-white.png")
This works fine in develop mode, but when I package the application using "dist" in play console, the glyphicons aren't available. What could possibly be causing that?
I also ran a jar xf on my the application's snapshot jar and can verify the images are there and are in the same layout as they are when I run play run locally.
All you need to use Bootstrap is unzip it into public/bootstrap/ folder and then just include it via Bootstrap's CSS in your view (you don't need to create separate routes(s) for glyphicons etc) while it's ready to use package, just don't move its pieces to folders proposed by Play docs and keep them in original structure:
<link rel="stylesheet" type="text/css" href='#routes.Assets.at("bootstrap/css/bootstrap.css")'>

cordova 1.7.0 set info error

I am using cordova 1.7.0. My app is running fine in simulator but a message comes like
Error: executing module function 'setInfo' in module 'cordova/plugin/ios/device'. Have you included the iOS version of the cordova-1.7.0.js file?
I have included
<script type="text/javascript" charset="utf8" src="[location of cordova.ios(for ios)]"></script>
in index.html but did not work.Plz help.
there must be something wrong with the path to the js.
The index.html file is read?
Is your www folder maybe a group instead of a reference folder?
Go step by step
This generally happens when the cordova file is not properly available when the page is loaded. You can check that it is referencing properly by opening the index.html (or your start page) in the Chrome and check in Inspect Element that all the resources are loaded and there are no errors.
to solve this problem, just follow steps in picture