在今天的文章中，我们将介绍如何把一个HTML5的应用打包为一个snap应用。我们知道有很多的HTML5应用，但是我们如何才能把它们打包为我们的snap应用呢？特别是在Ubuntu手机手机开发的时候，有很多的已经开发好的HTML5游戏。我们可以通过我们今天讲的方法来把先前的click HTML5应用直接打包为snap应用，并可以在我们的Ubuntu桌面电脑上进行运行。当然，今天介绍的方法并不仅限于Ubuntu手机开发的HTML应用。这里的方法也适用于其它的HTML5应用。
1）HTML5应用
首先，我们看一下我之前做过的一个为Ubuntu手机而设计的一个HTML5应用。它的地址为：
你可以通过如下的方式得到这个代码：
bzr branch lp:~liu-xiao-guo/debiantrial/wuziqi$ 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
2）打包HTML5应用为snap
为了能够把我们的HTML5应用打包为一个snap应用，我们可以在项目的根目录下打入如下的命令：
$ snapcraft init$ 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" οnmοusedοwn="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$ wuziqi它将启动我们的应用。当然，我们也可以从我们的Desktop的dash中启动我们的应用:
1390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
