I want to publish my app as PWA so what i did is
insert this script to index.html
<!--script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script-->
then install
npm run ionic:build --prod
it looks like it deploy it but my questions are:
what files I need to upload to host for publish the app as PWA?
why when I change something in the app and run ionic serve nothing changed and it changed only in the index.html of the WWW folder? why?(because now it's PWA??)
when I open www folder and I run open index.html when i press on button that open alert dialog it not open that. why?
when I run the command? only in the end of development?
Run
ionic cordova platform add browser
ionic build browser --prod --release
Then go to [project_folder]/platforms/browser/www and copy the content at you http server.
Don't bother with Cordova for a PWA. Just use npm run build --prod and upload the /www folder.
PWA is more of a collection of concepts, so it's not just "on" or "off". At a minimum though you probably want to add a manifest file so you can make it more "app like" by hiding the browser frame, setting your icon, app name etc. Uncommenting the line to add service worker doesn't magically make it a PWA if you haven't put anything "useful" into service worker (which you may or may not need to do, depending on how your app works). Also note that you will need HTTPS to use a service worker.
You will also need to manually remove the line from index.html that includes cordova.js (which will be a 404 error if you just upload /www).
I use this command for building web app
ionic cordova build browser
Then copy the contents from IONIC-PROJECT/platforms/browser/www to the web server.
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).
I've just created a flutter web application and now I am ready to deploy it. Looking at the docs it looks like I need to use Firebase Hosting? But I want to host the app on my own server. I tried copying the web directory from Build but when I go to the path I get a blank screen on web. How do I deploy it correctly? Or is it just simply not possible without Firebase?
First you need to compile the application.
In a terminal, command prompt or Powershell, go to the root directory of your project.
From there run a build:
flutter build web
This will create a new directory inside your project.
c:\your-project-folder\build\web
Copy everything that is in the web folder to wherever you want to publish / host your application.
Your application is bundled up into a main.dart.js file.
An index.html is also in that directory. You should be able to run your Flutter web app by visiting that index.html.
All the instructions for building a Flutter application for web platform is here.
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."
I have created my first Ionic app using CLI, so I did:
ionic start my-project --v2 blank
I run ionic serve command inside the project's folder, and I can see the brand new project in the browser. I did some changes in the project and run ionic serve again, perfectly fine.
I created another project with CLI:
ionic start second-project --v2 blank
Then, I run ionic serve from inside the second project's folder and the first one is actually loaded, not the second one.
What did I miss?
I didn't try to clear the browser history but I remembered that I did play around with Service Workers in my first app, it was a PWA.
So I ran ionic serve then opened Chrome's Developer Tools and found out that it was still there, so I Unregistered the service worker and deleted it under the Cache Storage section.
Stopped and ran ionic serve again and it loads the right app now.
This is how I solved this issue.
Chrome was still using the cache from that previous app. I ran ionic serve it loaded my wrong app, then I opened the Developer Tools, and under Applications tab, Service Workers option, it was there.
I clicked the 'Unregister' option, then under 'Cache Storage' section I deleted the registered previous application's cache with the right click option. This solved my problem.
I am trying to run a LoopBack server with ionic client, but I am getting the "Error: Cannot GET /cordova.js" error.
My code can be cloned from github at: https://github.com/giladba/BetterTrader2.git
Problem description:
I created a LoopBack application, and at the client directory I created an Ionic tabs application.
After that, I ran these commands on the client directory:
ionic platform add android
ionic build android
In server/middleware.json I redirected the index.html folder to the Ionic www folder like so:
"files": {
"loopback#static": {
"params": "$!../client/www"
}
but when I run node . I get cordova.js not found when I open http://localhost:3000/ in the browser:
note that even though there is an exception the application seems to be working fine.
Any idea how I can fix the exception?
Cordova gets injected into the app when deployed on a mobile device. When you use the ionic serve command locally, for example, cordova.js always 404s. You don't need it unless you're on a mobile device in a cordova app, and it will be deployed automatically in that case.