How to package a HTML5 application as an snap application __html

In today's article, we'll describe how to package a HTML5 application as an snap application. We know there are a lot of HTML5 applications, but how can we pack them into our snap apps? Especially in the development of Ubuntu mobile phone, there are many HTML5 games that have been developed well. We can package the previous click HTML5 applications directly into SNAP applications and run them on our Ubuntu desktops, as we speak today. Of course, the approach presented today is not limited to the HTML applications developed by Ubuntu mobile phones. The method here is also applicable to other HTML5 applications.

1) HTML5 application
First, let's take a look at one of the HTML5 apps I've done before for the Ubuntu phone. Its address is:
Https://code.launchpad.net/~liu-xiao-guo/debiantrial/wuziqi

You can get this code in the following ways:

BZR Branch Lp:~liu-xiao-guo/debiantrial/wuziqi

In this application, we are only concerned with the content in its WWW directory. All documents for this project are as follows:

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

We hope that the contents of the WWW can eventually be packaged into our snap application.
2) Packaged HTML5 applied as snap
To be able to package our HTML5 applications as a snap application, we can break into the following commands in the root directory of the project:

$ snapcraft Init

The above command will produce a new snap directory in our current directory with a file called Snapcraft.yaml. This is actually a template. We can package our application by modifying this Snapcraft.yaml file. After running the above command, the file schema is as follows:

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

We modify the Snapcraft.yaml file and eventually turn it into:
Snapcraft.yaml

Name:wuziqi version: ' 0.1 ' Summary:wuziqi Game.
  It shows 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 the puts the same color chesses into the 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-i Nhibit-control-unity7 Plugs:browser-sandbox:interface:browser-support Allow-sandbox:false platfor M:interface:content Content:ubuntu-app-platform1 Target:ubuntu-app-platform default-provider:ubuntu-a
    Pp-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/* 

The explanation here is as follows: Since this is a HTML5 application, we can start our application by Webapp-helper. In our application we use the remote part called Webapp-helper because in Ubuntu's mobile phone, the bottom portion of the web is done by QT, so we have to package QT into our application. However, because the QT library is relatively large, we can use the Ubuntu-app-platform snap application through the platform interface it provides to get these QT libraries. Developers can refer to our article https://developer.ubuntu.com/en/blog/2016/11/16/snapping-qt-apps/in our index.html file, there are a lot of things like < Script src= "/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js" ></script>. This is obviously related to Ubuntu-html5-ui-toolkit, so we have to ubuntu-html5-ui-toolkit this package into our application. This we use Stage-packages to install Ubuntu-html5-ui-toolkit package to achieve We reorganized the directory Ubuntu-html5-ui-toolkit installed from Ubuntu-html5-ui-toolkit into the WWW directory under our project via organize to index.html file references Let's take a look at our original index.html file:
index.html

<! DOCTYPE html>  

From the above code, the file it references in the Index.hml file starts here from/usr/share. In a confined snap application, this path cannot be accessed (because an application can only access files that are installed in its own project root directory). To this end, we must modify this path. We must change the access path of the above/usr/share/to the access path relative to the WWW directory in this project:

 
    <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>
 

That's why we saw it in the previous 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/*
 

On top, we organize the Ubuntu-html5-ui-toolkit installed directory and moved it to my project's www directory, making the files available directly to our project. Our packaged file schema is displayed as follows:

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

In the above, we can see that Ubuntu-html5-ui-toolkit is now in the WWW file directory, can be directly used by our project.

We enter the following command in the root directory of the project:

 
$ snapcraft
 

If all goes well, we can get an. snap file. We can install this by using the following command:

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

After installation, since we use the content sharing method to access the QT library, we must install the following snap:

 
$ snap Install Ubuntu-app-platform 
$ snap Connect wuziqi:platform Ubuntu-app-platform:platform
 

After executing the above command, we can see:

 
$ snap Interfaces Slot Plug:account-control-: ALSA-: Avah                       I-observe-: Bluetooth-control-: Browser-support Wuziqi:browser-sandbox:camera -: Core-support-: cups-control-:d cdbas-control-:d OC                    Ker-support-: Firewall-control-: Fuse-support-: Gsettings        -: Hardware-observe-: Home-: Io-ports-control-: Kernel-module-control -: Libvirt-: Locale-control-: Log-observe snappy-debug:lxd-su Pport-: Modem-manager-: Mount-observe-: Network Dow              Nloader,wuziqi:network-bind Socketio,wuziqi:network-control-: Network-manager     -: Network-observe         -: Network-setup-observe-: Ofono-: OpenGL Wuziqi:openvswit CH-: Openvswitch-support-: optical-drive-:p hysical-memory-control-:p hy                   sical-memory-observe-:p pp-:p rocess-control-:p Ulseaudio                     WUZIQI:RAW-USB-: Removable-media-: Screen-inhibit-control wuziqi:shutdown -: Snapd-control-: System-observe-: system-trace-: Time-co Ntrol-: Timeserver-control-: Timezone-control-: TPM-: U                          HID-: Unity7 Wuziqi:upower-observe-: X11 -Ubuntu-app-platform:platform Wuziqi-wuziqi:camera-wu Ziqi:mir
 

Of course, in our application, we also use redundant plug, such as the above camera and Mir. We can see the connection between the Wuziqi application and other core and Ubuntu-app-platform snap. After making sure that they are all connected, we can enter the following command at the command line:

 
$ Wuziqi
 

It will start our application. Of course, we can also start our application from our Desktop dash: