您的位置：首页 > Web前端 > HTML5

如何把HTML5应用打包为一个snap应用

2017-02-13 10:16 453 查看

在今天的文章中，我们将介绍如何把一个HTML5的应用打包为一个snap应用。我们知道有很多的HTML5应用，但是我们如何才能把它们打包为我们的snap应用呢？特别是在Ubuntu手机手机开发的时候，有很多的已经开发好的HTML5游戏。我们可以通过我们今天讲的方法来把先前的click HTML5应用直接打包为snap应用，并可以在我们的Ubuntu桌面电脑上进行运行。当然，今天介绍的方法并不仅限于Ubuntu手机开发的HTML应用。这里的方法也适用于其它的HTML5应用。

1）HTML5应用

首先，我们看一下我之前做过的一个为Ubuntu手机而设计的一个HTML5应用。它的地址为：

https://code.launchpad.net/~liu-xiao-guo/debiantrial/wuziqi

你可以通过如下的方式得到这个代码：

bzr branch lp:~liu-xiao-guo/debiantrial/wuziqi

在这个应用中，我们只关心的是在它www目录里面的内容。这个项目的所有文件如下：

$ tree
.
├── manifest.json
├── wuziqi.apparmor
├── wuziqi.desktop
├── wuziqi.png
├── wuziqi.ubuntuhtmlproject
└── www
├── css
│   └── app.css
├── images
│   ├── b.png
│   └── w.png
├── index.html
└── js
└── app.js

我们希望把在www里面的内容能够最终打包到我们的snap应用中去。

2）打包HTML5应用为snap

为了能够把我们的HTML5应用打包为一个snap应用，我们可以在项目的根目录下打入如下的命令：

$ snapcraft init

上面的命令将在我们的当前的目录下生产一个新的snap目录，并在里面生一个叫做snapcraft.yaml的文件。这实际上是一个模版。我们可以通过修改这个snapcraft.yaml文件来把我们的应用进行打包。运行完上面的命令后，文件架构如下：

$ tree
.
├── manifest.json
├── snap
│   └── snapcraft.yaml
├── wuziqi.apparmor
├── wuziqi.desktop
├── wuziqi.png
├── wuziqi.ubuntuhtmlproject
└── www
├── css
│   └── app.css
├── images
│   ├── b.png
│   └── w.png
├── index.html
└── js
└── app.js

我们通过修改snapcraft.yaml文件，并最终把它变为：

snapcraft.yaml

name: wuziqi
version: '0.1'
summary: Wuziqi Game. It shows how to snap a html5 app into a snap
description: |
This is a Wuziqi Game. There are two kind of chesses: white and black. Two players
play it in turn. The first who puts the same color chesses into a line is the winner.

grade: stable
confinement: strict

apps:
wuziqi:
command: webapp-launcher www/index.html
plugs:
- browser-sandbox
- camera
- mir
- network
- network-bind
- opengl
- pulseaudio
- screen-inhibit-control
- unity7

plugs:
browser-sandbox:
interface: browser-support
allow-sandbox: false
platform:
interface: content
content: ubuntu-app-platform1
target: ubuntu-app-platform
default-provider: ubuntu-app-platform

parts:
webapp:
after: [ webapp-helper, desktop-ubuntu-app-platform ]
plugin: dump
source: .
stage-packages:
- ubuntu-html5-ui-toolkit
organize:
'usr/share/ubuntu-html5-ui-toolkit/': www/ubuntu-html5-ui-toolkit
prime:
- usr/*
- www/*

这里的解释如下：

由于这是一个HTML5的应用，我们可以通过webapp-helper来启动我们的应用。在我们的应用中我们使用被叫做webapp-helper的remote part
由于在Ubuntu的手机中，web的底层部分是由Qt进行完成的，所以我们必须要把Qt也打包到我们的应用中。但是由于Qt库是比较大的，我们可以通过ubuntu-app-platform snap应用通过它提供的platform接口来得到这些Qt库。开发者可以参阅我们的文章https://developer.ubuntu.com/en/blog/2016/11/16/snapping-qt-apps/
在我们的index.html文件中，有很多的诸如<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>。这显然和ubuntu-html5-ui-toolkit有关，所以，我们必须把ubuntu-html5-ui-toolkit这个包也打入到我们的应用中。这个我们通过stage-packages来安装ubuntu-html5-ui-toolkit包来实现
我们通过organize把从ubuntu-html5-ui-toolkit中安装的目录ubuntu-html5-ui-toolkit重组到我们项目下的www目录中以便index.html文件引用
我们再来看看我们的原始的index.html文件：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An Ubuntu HTML5 application</title>
<meta name="description" content="An Ubuntu HTML5 application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

<!-- Ubuntu UI Style imports - Ambiance theme -->
<link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

<!-- Ubuntu UI javascript imports - Ambiance theme -->
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

<!-- Application script -->
<script src="js/app.js"></script>
<link href="css/app.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div class='test'>
<div>
<img src="images/w.png" alt="white" id="chess">
</div>
<div>
<button id="start">Start</button>
</div>
</div>

<div>
<canvas width="640" height="640" id="canvas" onmousedown="play(event)">
Your Browser does not support HTML5 canvas
</canvas>
</div>
</body>
</html>

从上面的代码中，在index.hml文件中它引用的文件是从/usr/share这里开始的。在一个confined的snap应用中，这个路径是不可以被访问的（因为一个应用只能访问自己安装在自己项目根目录下的文件）。为此，我们必须修改这个路径。我们必须把上面的/usr/share/的访问路径改变为相对于本项目中的www目录的访问路径：

<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
<script src="ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

这就是为什么我们在之前的snapcraft.yaml中看到的：

parts:
webapp:
after: [ webapp-helper, desktop-ubuntu-app-platform ]
plugin: dump
source: .
stage-packages:
- ubuntu-html5-ui-toolkit
organize:
'usr/share/ubuntu-html5-ui-toolkit/': www/ubuntu-html5-ui-toolkit
prime:
- usr/*
- www/*

在上面，我们通过organize把ubuntu-html5-ui-toolkit安装后的目录重新组织并移到我的项目的www目录中，从而使得这里的文件可以直接被我们的项目所使用。我们经过打包后的文件架构显示如下：

$ tree -L 3
.
├── bin
│   ├── desktop-launch
│   └── webapp-launcher
├── command-wuziqi.wrapper
├── etc
│   └── xdg
│       └── qtchooser
├── flavor-select
├── meta
│   ├── gui
│   │   ├── wuziqi.desktop
│   │   └── wuziqi.png
│   └── snap.yaml
├── snap
├── ubuntu-app-platform
├── usr
│   ├── bin
│   │   └── webapp-container
│   └── share
│       ├── doc
│       ├── ubuntu-html5-theme -> ubuntu-html5-ui-toolkit
│       └── webbrowser-app
└── www
├── css
│   └── app.css
├── images
│   ├── b.png
│   └── w.png
├── index.html
├── js
│   ├── app.js
│   └── jquery.min.js
└── ubuntu-html5-ui-toolkit
└── 0.1

在上面，我们可以看出来ubuntu-html5-ui-toolkit现在处于在www文件目录下，可以直接被我们的项目所使用。

我们在项目的根目录下打入如下的命令：

$ snapcraft

如果一切顺利的话，我们可以得到一个.snap文件。我们可以通过如下的命令来进行安装：

$ sudo snap install wuziqi_0.1_amd64.snap --dangerous

安装完后，由于我们使用了content sharing的方法来访问Qt库，所以，我们必须安装如下的snap：

$ snap install ubuntu-app-platform
$ snap connect wuziqi:platform ubuntu-app-platform:platform

执行上面的命令后，我们可以看到：

$ snap interfaces
Slot                          Plug
:account-control              -
:alsa                         -
:avahi-observe                -
:bluetooth-control            -
:browser-support              wuziqi:browser-sandbox
:camera                       -
:core-support                 -
:cups-control                 -
:dcdbas-control               -
:docker-support               -
:firewall-control             -
:fuse-support                 -
:gsettings                    -
:hardware-observe             -
:home                         -
:io-ports-control             -
:kernel-module-control        -
:libvirt                      -
:locale-control               -
:log-observe                  snappy-debug
:lxd-support                  -
:modem-manager                -
:mount-observe                -
:network                      downloader,wuziqi
:network-bind                 socketio,wuziqi
:network-control              -
:network-manager              -
:network-observe              -
:network-setup-observe        -
:ofono                        -
:opengl                       wuziqi
:openvswitch                  -
:openvswitch-support          -
:optical-drive                -
:physical-memory-control      -
:physical-memory-observe      -
:ppp                          -
:process-control              -
:pulseaudio                   wuziqi
:raw-usb                      -
:removable-media              -
:screen-inhibit-control       wuziqi
:shutdown                     -
:snapd-control                -
:system-observe               -
:system-trace                 -
:time-control                 -
:timeserver-control           -
:timezone-control             -
:tpm                          -
:uhid                         -
:unity7                       wuziqi
:upower-observe               -
:x11                          -
ubuntu-app-platform:platform  wuziqi
-                             wuziqi:camera
-                             wuziqi:mir

当然在我们的应用中，我们也使用了冗余的plug，比如上面的camera及mir等。我们可以看到wuziqi应用和其它Core及ubuntu-app-platform snap的连接情况。在确保它们都连接好之后，我们可以在命令行中打入如下的命令：

$ wuziqi

它将启动我们的应用。当然，我们也可以从我们的Desktop的dash中启动我们的应用:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航