Load local resources in Windows Hosted Web Apps (Project Westminster) - javascript

I'm currently packaging a website as a "Hosted Web App" for the Windows Store.
Is it possible to check if JavaScript, CSS and image files are already on the users devices inside the app package? This way a lot of traffic could be saved for files that don't change much after all.
Of course there would need to be a fallback to the hosted files in case the site is being called in a normal browser.

This is something that we're currently investigating and will be enabling more of in the future. Today you are able to access resources from the app package using the ms-appx-web:/// app protocol to load the resource. You can build this into your website code. We do have a security violation issue when your site is using https (as it definitely should) that we're working on resolving.

Related

How To Run a Flutter Web Application Offline?

I got a problematic assignment from my employers.
I was given the task of developing simple software that will run strictly on Google Chrome,
without attempting to connect to the web (Security reasons).
I know flutter development and I feel comfortable with the sdk.
How should I develop a web app that can be deployed using a usb stick?
Looks like PWA can be an option, but the documentation is lacking in detail.
The system does not have the ability to run a local web server.
The Flutter app must be able to work with JS libraries, I intend to use jsQR.
service workers and indexedDB could help you for develop offline route app and offline api.
mdn docs for service workers
I'm not sure that this will fit your particular case: you say that the system can't run a local webserver, but what if you provide the webserver along with your software?
I just discovered get_server: you can find it here. It aims to allow developers to host their own HTTP server by using only flutter, without resorting to external tools or other coding/scripting languages. It allows also (and that's the relevant part) to wrap your flutter web app and make it run on local network.
For now I only tried with a very simple example, but it seems to be working. These are the steps I took:
create a new flutter project: since I needed the webserver to run on Windows, I had to get flutter ready for that (see here for help)
add get_server to the new pubspec.yaml
run flutter build web on your flutter web project, and copy the build/web output
folder in the root folder of the new project (I renamed the folder while copying since flutter might change the content of the web folder)
delete all the content of lib/main.dart
paste this (this the actual content of main.dart)
import 'package:get_server/get_server.dart' as gs;
void main() {
gs.runApp(
gs.GetServerApp(home: gs.FolderWidget('folderName')),
);
}
folderName is the name of the renamed folder containing the flutter web app build.
I ran this on Windows 'device' from AndroidStudio, and my original flutter web app was reachable at localhost:8080 (for now I just used the default options of get_server). I also got the webserver (empty) GUI as a white window: I guess that can be useful for some information regarding the server itself, although, if that windows closes, localhost:8080 becomes unavailable.
But, once released, you should be able to just run the executable from the USB stick, and then connect to it with Chrome.
PS: after some time using GetServer, I had to switch to other packages because of not-so-good docs and support. Now I'm using shelf, but also Alfred is a notable mention.

Is the Chrome FileSystem API only available for Chrome Apps (from Chrome Web Store)?

I downloaded the Chrome App samples from https://github.com/GoogleChrome/chrome-app-samples and tried running the FileSystem sample.
The code works when installed from Chrome Web Store, but I'm interested to know whether the FileSystem API can be made to work for non-Chrome-app cases. A simple experiment trying loading index.html on localhost served by my local Apache webserver exhibits a failure because chrome.filesystem is undefined.
Is Chrome Filesystem intended only for Chrome Apps (I can see that clues might be in the name of the samples repo and the fact that it uses a manifest.json) or is there a way of making it work for general (non-Chrome-app) web applications?
Thanks
Is Chrome Filesystem intended only for Chrome Apps
Yes.
is there a way of making it work for general (non-Chrome-app) web applications?
No. Normal web applications are subject to many security limitations (because you "install" them by visiting a webpage).
A simple experiment trying loading index.html on localhost served by my local Apache webserver
Loading resources over HTTP can be done using the XMLHttpRequest object. No escalated privileges on the client required.

How to check the version of our software from a browser?

We have a legacy software package made for native Windows. I'm writing a system to automate installing updates. One of the options is for the client to visit a web page, and from that web page, check for updates to their installation. There are two ways of identifying the software version: either reading a particular EXE file and looking at its file version, or reading the registry for our software (actually the third way is reading from their SQL Server database but that's obviously out of the question). Either of these methods would work, but I have no idea how to do it from javascript in a browser.
I'm sure there is some security, but I have seen other systems do this, so I'm sure it's possible. In general, the web page can check the client's computer for existence of certain software, and if it exists, check for the version. How can I do this from Javascript?
In MaVRoSCy's comment above: "only in IE this is possible with some ActiveX help, except if you run a dedicated local server just to serve this functionality". This actually fits perfectly, because each client computer already has a Windows Service running in the background at all times.
A simple HTTP server can be added into this client service listening on a universal non-common port number such as 16580. This HTTP server can handle requests like /currentversion which returns the current application version.
The javascript on the web page (hosted elsewhere but viewed on that client's browser) calls http://127.0.0.1:16580/currentversion to obtain the latest version.
One of the options is for the client to visit a web page, and from that web page, check for updates to their installation
Bad idea and wrong methodology
Checker|Updater have to be embedded into app
Checker have to (on start|on demand|whatever)
identify build of local app (any usable way)
Get && parse external permanent URL with data of Latest Existing Build (at least version and URL of Build)
Inform, if needed, about new version and|or download|update core, if requested by user|configuration

mobile web app HTML and JavaScript file location

I'm new to mobile web app development. I have a simple fundamental question regarding mobile web app. Mobile web app is written in HTML and JavaScript. So are these HTML and JavaScript files stored on the mobile device locally or sent from a server? This question may be too simple for most people. But I ask this because if all JavaScript code is stored on mobile device, then how about cross domain access issues? Thanks.
It depends. If you package it in PhoneGap you will have all your assets stored in a single package that can be installed in multiple devices, but if you're working on a mobile web app thats served from a remote server, all the scripts, templates and css's will have to be downloaded. If you're having issues with cross domain comunications, try using JSONP in your requests.
All the files are downloaded each time you request certain url, for mobile devices and pcs as well.(the file will be downloaded or not depending on the caching setting, if the file was modified, etc)

What is the best way for a website to check if a user has installed a client app?

Let's say I've got a website that works better if a client has installed and logged into a desktop application. I'd like to be able to do 2 things:
Alter the website if they haven't installed the app (to make it easy for them to find a link to the installer)
If they've installed the app on a couple of machines, determine which machine they are browsing from
I'd like something that works on Windows and OSX, on any of the major browsers. Linux is a bonus.
A few thoughts:
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
Could I just let the client serve HTTP on localhost and do some javascript requests to fetch a local ID? I know google desktop search did something like this at one point. Is this a standard practice?
Thanks!
You can register a protocol from your desktop application (see this). This can be used, for example, to open your desktop application with arbitrary data from the website. You could then have your desktop app send a HTTP request to your webserver, telling it what machine you are on.
You can have a browser plugin (activex for IE or Netscape plugin for the rest of the browsers) that can communicate with the application. When the webpage is loaded, it can try to instantiate the plugin and if it succeeded, it can use it as a proxy to the application. If it fails, then either the app is not installed or the plugin was explictly disabled by the user. Either way, your website should degrade its functionality accordingly.
Update: Forgot to answer your questions:
Flash does it exactly this way. Flash is a browser plugin that is created by the web pages.
You can have a machine ID generated at the application/plugin install time and your plugin can pass that machine ID to the webpage when it is created.
On the topic of using local webserver:
I would stay away from having a local webserver, mainly because of security considerations. It takes quite a lot of work to make sure your local webserver is locked down sufficiently and there are no XSS vulnerabilities that other malicious websites can exploit to make it do stuff on their behalf.
Plus, having a webserver means that either it has to run as a system-wide process, or if it runs as the user, you can have the website interact with only one user's instance of the application, even though multiple users can be logged on and running it at the same time.
Google Desktop Search suffered from both the XSS security vulnerability (though they fixed it) and the limitation of only one user being able to use it on a machine (I don't know if they fixed this one yet, though chances are they did).
Websites can detect if you've got Flash installed.
Actually, I believe a browser can detect if you have the Flash plugin for the browser installed, and webpages can offer "installed" and "uninstalled" option that the browser can choose.
Otherwise, you are asking for a means, by putting some code in a webpage, of being able to analyze a user's home computer, and report what it learned to you website.
Can you say Major Security Hole?
If you can pick a development environment for the desktop app, then check out AIR from Adobe. It lets you develop desktop applications using either html/javascript, Flash, or Flex.
It has API calls you can use from a browser based flash app to see if the desktop based AIR app is installed, what version, etc. You can even launch it and pass parameters from the web app to the desktop app.
http://www.rogue-development.com/blog2/2008/03/interacting-with-an-air-app-from-a-browser-based-app/
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
it's quite a bit simple, your browser tries to render some additional files, with some specific formats such as flash .swf and I the browser doesn't find installation, then will be start downloading, or you will get the option to download that program.
Flash also uses AC_RunActiveContent.js please take a look at this js, people usually put this on their webpages
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave cabs/flash swflash.cab#version=8,0,0,0','width','981','height','635','id','build5','align','middle','src','build5','quality','high','bgcolor','#ffffff','name','build5','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','build5' ); //end AC code
}

Categories