I'm successfully getting Chrome on Android to install my PWA to home screen, using a manifest.json file - I have recently added "version" and changed it from "0.9.26" to "0.9.27" - however, the PWA always installs to the home screen and reports: "Version: 1" - how does versioning work with PWAs? And how do we ensure the user is using the latest version when they open the PWA?
As far as I know you don't have any control over the version of a PWA generated APK and version is not a supported attribute. It wouldn't make sense for there to be any either since the APK doesn't package any of your app code it just loads the assets from the web.
You control what version of the PWA your users are on by deploying the new version of the site and making sure any service worker you have will update any cached assets.
Related
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
When I am updating the logo of the PWA app the icon is not getting updated for the previously installed applications. However for newly installed apps I am getting the correct logo.
Did you try updating the new image icon in manifest.json & then showing a prompt to users to refresh the PWA?
You can try to have a look at the documentation for Android APK (from the question is not clear your target device: web or mobile).
Chrome will periodically compare the locally installed manifest against a copy of the manifest fetched from the network. If any of the properties in the manifest required to add the PWA to the home screen have changed in the network copy, Chrome will request an updated WebAPK, reflecting those new values.
This feature is not yet available for desktop, but planned in a future release.
Do you use any framework (Angular, React) to build your PWA? If you want to read more details about how to install an app on the homescreen or the web manifest properties, you can have a look here.
i just created an Ionic project and i added capacitor on it ( with a "npx cap init" ), i set up my service worker ( i just left the <--- ...... ---> in my index.html ). Then i run " ionic serve " from my laptop, and i tried to access it from my mobile phone ( so basically i did a personnal hotspot with my mobile internet, i mean my laptop and mobile phone have the same internet connection ), and it works.
I can access to my ionic app from my mobile whereas it is runt on my laptop, but now i'd like to add/download this app on my mobile phone and use it offline.
Do you know any way i can do that ?
Thanks a lot !
Capacitor works by serving your static assets (like javascript and HTML) from a self-hosted web server, whose behavior is dependent on your capacitor.config.json. This behaviour is most obvious if you look at the source code.
If you have server.url specified in capacitor.config.json, Capacitor's self-hosted server will act as a proxy for the server you point to.
If you do not have server.url specified, Capacitor's self-hosted web server will serve the files that were bundled with your native app.
Based on this, when you are creating the build for your phone, you will need to remove the server url property from your capacitor.config.json. You may also need to generate the capacitor.config.json on the fly in order to separate your development and production needs.
Note that the Ionic Framework and Capacitor have two completely different deployment paths; this answer assumes that you use Capacitor to create your builds.
Of course you can make an app and install it on your phone - that is basic purpose of Capacitor. Docs for android, docs for ios
Steps are similar to this (example for android):
Install Android Studio
At capacitor.config.json define techSupportEmail
npx cap add android
npm run build && npx cap copy android && npx cap open android
Enable developer mode on your phone
Plug your phone in
In Android Studio choose your device and hit "play" button
Problem
When I release a new version to the production channel in Ionic Pro Deploy (Channels) then I have to cycle my app twice in order to get the latest version. Even worse, on the first cycle my app reverts back to a far earlier version for some reason.
What I mean by cycling is, starting from a state where the application is shut down and not open, I open the app, wait for the splash screen to go away and app to be ready, and then close the app.
Question
How do I get my app to download the latest version on the very next time I open the Ionic app following my production release?
Plugin configuration
I used the plugin config from the dashboard.ionicjs.com page:
cordova plugin add cordova-plugin-ionic --save \
--variable APP_ID="[myappid]" \
--variable CHANNEL_NAME="Production" \
--variable UPDATE_METHOD="background"
Execute the command you already showed but set UPDATE_METHOD to "auto"
If you wand more control over your updating methods have a look at this:
https://ionicframework.com/docs/pro/deploy/plugin-api.html
In my case, live deploy worked correctly on a "blank" Ionic project. Live deploy also worked correctly on "my" app on iOS but not on Android.
I followed the follow steps and successfully fixed Android. However, during this process iOS suddenly had the same problem (would apply update on app install/close/open).
Set versions as per Ionic support. IonicPro live deploy currently requires these versions. Ionic are in the process of fixing this dependency:
"cordova-plugin-ionic-webview": "1.1.19",
"cordova-plugin-ionic": "4.1.7",
Install a new version of "blank" project. Update my app to use the same npm plugin versions (some of my app plugins were old).
Remove/add android platform. My hunch is this is what ultimately resolved the issue.
I wanted to try a remove/add ios platform to see if that also resolved the issue on iOS. But it was less work to ultimately switch over to IonicPro rather than re-config the local build setup.
Live deploy worked correctly on both iOS and Android after creating binaries in IonicPro.
We have built Packaged App for our Web Application.
Is it possible to provide Chrome installer in a Packaged App bundle or somehow trigger Chrome installation in the background from Packaged App.
Currently Chrome Browser is separate Dependancy for using Packaged Apps so it is difficult to convince Users to first install Chrome browser.
Also, people can install the App for any location as a complete package.
It's not possible yet, but you can star http://crbug.com/173762 to get notified when it does work.