pwa-builder / pwabuilder-cli Goto Github PK

Cordova 4.x supports using the Crosswalk runtime (http://www.crosswalk-project.org) as the "webview" which ensures a consistent user experience across any device running Android from 4.0 and up.

"Special thanks to the W3C App Manifest working group"

We are editing the spec as part of the WebApps working group :)

You could say: "Special thanks to the W3C Web App Manifest editors and the W3C WebApps Working Group"

As most names in the W3C Manifest spec are lower case what about using something like:

"mjs_access_whitelist"

For me it is also not clear what _urlAccess stood for... like it wasn't clear that it was a whitelisting of URLs who could access extended APIs.

I searched a little, but could not find the source of this file. Just so you know.

# Test - Build - Submit

## Test

1. Your application uses the same rendering and JavaScript Engine as the Internet Explorer Browser so most of you testing can be done on your website and in the browser.

2. To test your application on a device, download the ManifoldJS test harness from the Store, and follow the directions. _Coming soon!_

> **Note:** Looking for some debugging tools that work on all your platforms? Try [Vorlon.js](http://www.vorlonjs.io). It makes mobile testing a breeze, and works inside the app ManifoldJS apps.

## Build

1. Download and install Visual Studio (community edition works fine) and open the source code folder.

2. Open the Project in Visual Studio.

3. Use the store commands from Visual Studio to create the app package.

## Submit to Store

This is the bad part -

1. Register as an Apple developer [here](https://developer.apple.com/register/).

2. Reserve the name of your app.

3. Submit app package from store.

Current when this function fails, all we get back is

Error: One or more errors occurred when generating the application.

But no mention of what those errors actually were.

If I try and run my site www.tacosfeedthebear.com through getManifestFromSite I would expect a warning that no manifest exists and that a new one will be created, but instead I am seeing:

Error: Failed to retrieve manifest from site.

Stacktrace:

Error: Failed to retrieve manifest from site.
    at Request._callback (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/lib/manifestTools.js:105:23)
    at Request.self.callback (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/request/request.js:368:22)
    at Request.emit (events.js:110:17)
    at Request.<anonymous> (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/request/request.js:1219:14)
    at Request.emit (events.js:129:20)
    at IncomingMessage.<anonymous> (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/request/request.js:1167:12)
    at IncomingMessage.emit (events.js:129:20)
    at _stream_readable.js:908:16
    at process._tickCallback (node.js:355:11)

It seems to fail because it sues the short name for the ID which can not have a space or foreign characters. We should parse this value and take out anything incompatible.

you can use site: http://merrypixmas.com/ as an example.

http://www.manifoldjs.com/community

Contrbution Guidelines -> Contribution Guidelines
Contirbutions should -> Contributions should

You could also mention FirefoxOS app store in opening para

(I looked to see if website source was here so could do a PR but didn't find it)

Platform-specific validation rules are applied to windows81 platform only. Current approach does not allow multiple platforms to share the same validation rules (beyond using the 'all' category).

Sending a junk url to projectBuilder.createApps() will throw a fatal error here that will crash the process instead of returning an error in the callback.

Error:

Building the project... { content:
   { start_url: 'http:',
     short_name: 'BingCom',
     icons: [],
     display: 'fullscreen',
     orientation: 'any' },
  format: 'w3c',
  errors: [ { member: 'start_url', issues: [Object] } ],
  suggestions:
   [ { member: 'icons', issues: [Object] },
     { member: 'mjs_urlAccess', issues: [Object] } ],
  warnings: [ { member: 'icons', issues: [Object] } ] } /Users/ryanbillingsley/Dev/manifold-api/tmp/0e3165c1 [ 'android', 'ios', 'chrome', 'firefox' ] false
Generating the Chrome application...
Generating the Firefox application...
Generating the Cordova application...
/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/lib/projectBuilder.js:430
            .replace(/-/g, '')
            ^
TypeError: Cannot read property 'replace' of null
    at createCordovaApp (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/lib/projectBuilder.js:430:13)
    at /Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/lib/projectBuilder.js:610:25
    at /Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/mkdirp/index.js:29:20
    at FSReqWrap.oncomplete (fs.js:95:15)

Is it possible to support a data: URL or use an icon locally? (especially when running ManifoldJS from node, not the site)

Are there any open-source boilerplate "apps" with all the assets and the manifest setup correctly so we can test ManifoldJS and see it in action?

If the node package is installed under a path with spaces e.g. C:\Users\FirstName LastName\AppData\Roaming\npm\node_modules\manifoldjs, the following exception is thrown:

"Command failed: 'C:\Users\FirstName' is not recognized as an internal or external command".

More details in this thread:
http://stackoverflow.com/questions/30177174/failing-to-create-package-with-manifoldjs

we need to move it to 69 as it is in current insider build

This might be a Cordova error, but this is what happens:

$ cd cordova
$ cordova emulate ios
(errors out because the first word is prepended to the filename somehow)
$ (remove spaces in name field in manifest)
$ cordova emulate ios
(launches app)

Example: "name": "My App"
Temp filenames: "My My App.whatever"
Then cordova tries to launch My App and can't find it

The spec says find the first that contains a token manifest (so, <link rel="foo bar manifest baz"> is valid).

The log, when in debug mode, shows that the same image is downloaded multiple times. This should not happen.

Even though the plugin's before_prepare hook runs more than once when building the project, it uses the last modified time of the downloaded image files to make conditional requests using the if-modified-since header, so it should download the images the first time only.

Fiddler shows that requests are always returning 200 OK. However, reissuing the same request using the Composer feature in Fiddler returns 304 Not Modified.

Just a heads up that we've added a splashscreens member to the W3C Web Manifest spec. However, we are still gathering implementer feedback and we currently don't have strong commitment from any vendor to support them (i.e., please don't add them to ManifoldJS just yet! 😄).

Will report back with more info soon. Design wise, they take the exact same object as icons (an array of image objects), so validation/transformation will be identical.

In my existing Website, I'm getting specific container size to automatically fill up the whole screen with an image (using $(window).height() and $(window).width()). It doesn't return any value when wrapped using ManifoldJS on Android.

Also, the $( window ).resize(function() { doesn't seem to work.

Any clue how to do something similar?

So, I'm looking to avoid Cordova/Webview-based solutions from a future 'universal app' build process. Does manifold.js require Cordova on projects? Or is it like NativeScript?

Also, do you have Gitter room for casual questions like mine?

This issue is to review the behavior of manifoldjs with the scope member, which was raised in issue #42

Moving this to a new issue:

from @brandonros:

{
  "start_url": "http://google.com/",
  "short_name": "Google",
  "icons": [],
  "display": "fullscreen",
  "orientation": "any",
  "name": "Google",
  "description": "Search the web.",
  "version": "1.0",
  "build": "1",
  "publishername": "Google",
  "organizationid": "Google"
}

File generated directly from website.

➜ ~ manifoldjs http://google.com/ -p ios -b -m manifest.json
ERROR: Invalid manifest format.

Hi There, am i missing something here from the Example ?

manifoldjs http://meteorite.azurewebsites.net -d native  -p ios -b

05/01/15 @ 3:35PM - pulkit.kathuria@Mac Pro ~/Downloads/temp sudo rm -rf native;sudo manifoldjs http://meteorite.azurewebsites.net -d native  -p ios -b
Validation warning (ios): An app icon of the following sizes is required: 76x76, 120x120, 152x152 and 180x180
Validation warning (ios): An 1024x1024 app icon for the App Store is required
Validation warning (ios): A launch image of the following sizes is required: 750x1334, 1334x750, 1242x2208, 2208x1242, 640x1136, 640x960, 1536x2048, 2048x1536, 768x1024 and 1024x768
ERROR: Failed to copy the manifest to the app folder.
WARNING: The Cordova project could not be created successfully.
WARNING: One or more errors occurred when generating the application.

permission (threw in 777)

05/01/15 @ 3:39PM - pulkit.kathuria@Mac Pro ~/Downloads ls -la
..
...
drwxrwxrwx   3 pulkit.kathuria  XXX\Domain Users   102 May  1 15:40 temp

$ manifoldjs
: No such file or directory

There are some comments in Hacker News that people have tried the generator from manifoldjs.com and reporting that it isn't working.

I just did a quick test and it didn't come back. Might want to check into this.

When I install this, I see:

➜  dir ✗ npm install -g manifoldjs/manifoldjs
npm WARN engine [email protected]: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.0","npm":"2.5.1"})
npm WARN engine [email protected]: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.0","npm":"2.5.1"})
npm WARN engine [email protected]: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.0","npm":"2.5.1"})
/Users/Nicholas/.nvm/versions/node/v0.12.0/bin/manifoldjs -> /Users/Nicholas/.nvm/versions/node/v0.12.0/lib/node_modules/manifoldjs/manifoldjs.js
[email protected] /Users/Nicholas/.nvm/versions/node/v0.12.0/lib/node_modules/manifoldjs
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

We should see if these are issues to be filed upstream, or if we need to update our dependencies.

Sites like cnet.com already have a manifest.json (http://www.cnet.com/manifest.json).

It should be possible to use it directly instead of downloading from the site and then uploading it to manifoldjs

ERROR: Failed to add the Hosted Web App plugin to the Cordova project.

Seeing this when attempting to the build the projects on Azure.

Full stack trace:

ERROR: Failed to add the Hosted Web App plugin to the Cordova project.
WARNING: The Cordova project could not be created successfully.
POST /manifests/9cc50462-8c52-4406-a50a-6a226352cfad/build 500 16058.088 ms - 22
Error: One or more errors occurred when generating the application.
    at D:\home\site\wwwroot\node_modules\manifoldjs\lib\projectBuilder.js:55:21
    at Array.forEach (native)
    at D:\home\site\wwwroot\node_modules\manifoldjs\lib\projectBuilder.js:51:17
    at _fulfilled (D:\home\site\wwwroot\node_modules\q\q.js:794:54)
    at self.promiseDispatch.done (D:\home\site\wwwroot\node_modules\q\q.js:823:30)
    at Promise.promise.promiseDispatch (D:\home\site\wwwroot\node_modules\q\q.js:756:13)
    at D:\home\site\wwwroot\node_modules\q\q.js:564:44
    at flush (D:\home\site\wwwroot\node_modules\q\q.js:110:17)
    at process._tickCallback (node.js:419:13)

This seems to be an issue with the mkdirp package (see https://github.com/substack/node-mkdirp/issues/66 and https://github.com/substack/node-mkdirp/issues/70). We'll need to do some validation before calling mkdirp.

There are some breaking changes in the tool when updating the cordova dependency version to v5.0.0 that causes the building process of the cordova apps to fail.

If a W3C manifest is found from the target Web site, it is being validated for containing a start_url member and a short_name member. However, the specification doesn't seem to mandate any members to be present (http://www.w3.org/TR/appmanifest/#manifest-and-its-members).

A good default behavior in this case might be to generate the values similarly to how they are generated if the site does not have a manifest, i.e., they are implied from the given Web site URL.

Is there a prerequisite that I could be missing causing this too fail?

WARNING: Failed to add windows platform.
WARNING: One or more tasks failed while generating the Cordova application.
POST /manifests/89a4eb57-ed04-47b6-86b2-2a023d67abaa/build 500 3786.862 ms - 1032
Error: One or more errors occurred when generating the application.
    at /Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/lib/projectBuilder.js:55:21
    at Array.forEach (native)
    at /Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/lib/projectBuilder.js:51:17
    at _fulfilled (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/q/q.js:794:54)
    at self.promiseDispatch.done (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/q/q.js:823:30)
    at Promise.promise.promiseDispatch (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/q/q.js:756:13)
    at /Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/q/q.js:564:44
    at flush (/Users/ryanbillingsley/Dev/manifold-api/node_modules/manifoldjs/node_modules/q/q.js:110:17)
    at process._tickCallback (node.js:355:11)

Executing grunt currently produces the following error:

Running "mochaTest:test" (mochaTest) task
C:\Projects\meteorite\ManifoldJS\lib\common\utils.js:2
if (typeof _$jscoverage['C:\Projects\meteorite\ManifoldJS\lib\common\utils.js'
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Mocha exploded!
Error: BLANKET-Error parsing instrumented code: SyntaxError: Unexpected token ILLEGAL
at C:\Projects\meteorite\ManifoldJS\node_modules\blanket\src\index.js:174:35
at Object.blanket._blanket.instrument (C:\Projects\meteorite\ManifoldJS\node_modules\blanket\src\blanket.js:125:17)
at Object.require.extensions..js (C:\Projects\meteorite\ManifoldJS\node_modules\blanket\src\index.js:155:25)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\Projects\meteorite\ManifoldJS\test\common\utils.js:3:13)
at Module._compile (module.js:456:26)
at Module._extensions..js (module.js:474:10)
at Object.require.extensions..js (C:\Projects\meteorite\ManifoldJS\node_modules\blanket\src\index.js:179:17)
Warning: Task "mochaTest:test" failed. Use --force to continue.
Aborted due to warnings.

Running OSX 10.10.2 Yosemite. Installed Manifold with:

npm install -g ManifoldJS

In terminal I try to run:

manifoldjs www.http://meteorite.azurewebsites.net
and I receive:

DaveVoyless-MacBook-Pro:~ DaveVoyles$ manifoldjs http://meteorite.azurewebsites.net
env: node\r: No such file or directory

What do you think the issue could be?

OS: Windows 8.1

Method: CLI

When I point towards http://www.Babylonjs.com, it says that the file doesn’t have a manifest. This is expected, but I assumed it would try to generate a manifest on its own, as it had done for my personal website, but it does not.

I tried again on my person site, www.DaveVoyles.com and ran into an issue.

It runs into an issue when trying to find the icons. I noticed that on the web based generator, I don’t have any icons for my links, but it tries to force them with an empty box next to the links in the header.

Image 1: http://www.davevoyles.com/wp-content/uploads/2015/05/Manifold-Error-DaveVoylesdotcom.jpeg

I can run the Web Based Manifest Generator, and it all works fine. Here is an image of my website being running inside of the WIn Phone emulator running Cordova. I can see that isse with the icons here.

Image 2: http://www.davevoyles.com/wp-content/uploads/2015/05/Manifold-Windows-Phone.jpeg

shouldn't be required if the -m is used and the start_url is an absolute URL

Currently:

• Images with the cordova logo are generated for cordova apps
• Visual Studio's "placeholder" images are generated for windows 10 apps
• No default images are provided for Chrome
• No default images are provided for Firefox

Ideally:

• The tool should provide default images with the manifoldJS logo for all the generated platforms, and for the corresponding sizes
• The images should be hosted somewhere (should not be included in the package) and manifoldjs should request the images from there when generating the apps (at runtime)

Including outstanding issues and issues that can be resolved by upgrading node.js or Cordova

Adding a version field to the manifest breaks the generator, and adding it post-gen to the manifest in the cordova directory is ignored on build for iOS/Android.

In order to support Android Studio out of the box, you need to add the CordobaLibs project into the sourceSets section of the build.gradle

sourceSets {
main {
manifest.srcFile 'AndroidManifest.xml'
java.srcDirs = ['src', 'CordobaLib/src']
resources.srcDirs = ['src', 'CordobaLib/src']
aidl.srcDirs = ['src', 'CordobaLib/src']
renderscript.srcDirs = ['src', 'CordobaLib/src']
res.srcDirs = ['res']
assets.srcDirs = ['assets']
}
}

This should be added as a post script of the tool

ManifoldJS generates the following include rule in Windows 10 when the input W3C manifest contains http://mydomain.com as start_url:

<uap:ApplicationContentUriRules>
 <uap:Rule Match="http://mydomain.com/*" Type="include" />
</uap:ApplicationContentUriRules>

However, when navigating to e.g. http://mydomain.com/somepath the URL is opened in the browser.

The following MSDN article describes the type of include rules that can be specified in a Windows 10 hosted web app: https://msdn.microsoft.com/en-us/library/windows/apps/dn705792.aspx

According to the above article, these are the ways to specify a URL match in the include rules:

• An exact hostname
• A hostname for which a URI with any subdomain of that hostname is included
• An exact URI
• An exact URI that can contain a query property
• A partial path and a wildcard to indicate a particular file extension

could we only make the add icon button enabled when there is a valid URL in the icon box? The default values seem to be implemented incorrectly?

This issue is based on a discussion on issue #28.

From @kenchris:

I guess getting as much right info out of the invalid manifest makes sense and issuing warnings instead. That way people would know how to contact cnet.com (if it is not them packaging up their own site :))

We could add a way to specify the kind of manifest used in order to retrieve more information or be more flexible with the manifest detection logic

➜ ~ npm install -g ManifoldJS
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "-g" "ManifoldJS"
npm ERR! node v0.12.2
npm ERR! npm v2.7.5
npm ERR! code E404

npm ERR! 404 Not Found: ManifoldJS
npm ERR! 404
npm ERR! 404 'ManifoldJS' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/marcos/npm-debug.log

An example of this can be found when targeting the I/O 2015 site.

This discussion is based on the comments from issue #31.

Let's continue discussing about this topic in this new issue.

From @marcoscaceres:

For capabilities (again because of our focus on Web browsers), we were not able to find non-proprietary APIs that required a capabilities declaration (hence why they are missing from the spec right now).

From @kenchris:

Regarding capabilities:

With the permission spec (non-upfront permissions) this seems like a thing that will go away
Permissions differ a lot per platform
Due to these reasons, I think it is best that the tool will figure out what permissions to enable per platform.

AFAIU, I can use the Windows object on Windows and you will implement parts of that for other platforms using Cordova? Or Is it possible to use the Cordova APIs directly?

I think that we should create a msj_ extension here, but I need to find out exactly how all of this works in order to help you design such an extension :-)

If you support the Core Cordova APIs, we could add something like

"msj_cordova_plugin": ["battery-status", "contacts"]

where the name is taking from the plugin name itself (ie "org.apache.cordova.battery-status"). For each platform you already know which permissions each plugin requires.

If you don't support the Cordova APIs directly and just emulated Windows object, then we should find another solution. I kind of like the ability to use the core Cordova APIs though, as many hybrid apps do that already, like Untappd.

It has some chrome_ extensions which should be fine.

• Cordova uses nopt (https://www.npmjs.com/package/nopt)
• The optimist page recommends to use minimist (https://www.npmjs.com/package/minimist)

See here the reason why cordova uses nopt instead of optimist: apache/cordova-cli@b5b4a14