How to turn a website into a snap application

In many cases, we want to turn a website into a snap application, so we can download it directly from the store and use it directly. We do not need to enter the address of this website in the browser. There are also a lot of times when our game is on a website, such as http://hexgl.bkcore.com/play/, we can package the URL directly into our snap app, so that it can be downloaded and run directly from the store. In today's tutorial, we'll show you how to package URLs into our app.

To illustrate the problem, we use www.sina.com.cn to show: Snapcraft.yaml

Name:sina-webapp
version: ' 1.0 '
Summary:sina webapp
Description: |
  Webapp version of the Sina Web application.

Grade:stable
confinement:strict

Apps:
  Sina-webapp:
    command:webapp-launcher-- Enable-back-forward--webappurlpatterns=http?:/ /www.sina.com/* http://www.sina.com/%u
    plugs:
      -browser-sandbox-
      camera
      -Network
      - Network-bind
      -OpenGL
      -PulseAudio
      -Screen-inhibit-control
      -Unity7
      -Network-control
      -Mount-observe

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-container: After
    : [ Desktop-ubuntu-app-platform,webapp-helper]
    stage-packages:
      -Fonts-wqy-zenhei
      - FCITX-FRONTEND-QT5
    Plugin:nil

Here we use the Desktop-ubuntu-app-platform cloud part. Note here, we also added support for Chinese fonts and input methods:

      -Fonts-wqy-zenhei
      -FCITX-FRONTEND-QT5

We can refer to my previous article, "Using the platform interface provided by Ubuntu-app-platform to reduce QT application size" To install and use Ubuntu-app-platform:platform. Specifically, we have to install the following:

$ sudo snap install Ubuntu-app-platform

We scored in Terminal:

$ snapcraft

You can package our app in snap format. We use the following command to install:

$ sudo snap install Sina-webapp_1.0_amd64.snap--dangerous

When we install it, we can find:

liuxg@liuxg:~$ Snap list
Name                 Version  Rev  Developer  Notes
amazon-webapp        1.3      x1              -
Azure                0.1      x2              -
core                 16.04.1  714  canonical  -
Hello-world          6.3   canonical  -
Sina-webapp          1.0      X1              -
Snappy-debug         0.26   canonical  -
ubuntu-app-platform  1   canonical  -

Our Sian-webapp has been successfully installed. In this area, we can also find ubuntu-app-platform and core two snap applications. In our application, as we define the following Plug:camera Mount-observe Network-control content based on the URL http://snapcraft.io/docs/reference/ interfaces, we found that these interfaces must be manually connected, so we must use the following command:

$ sudo snap connect sina-webapp:platform ubuntu-app-platform:platform
$ sudo snap connect Sina-webapp:camera core: Camera
$ sudo snap connect Sina-webapp:network-control core:network-control
$ sudo snap connect Sina-webapp: Mount-observe Core:mount-observe

With the above command, we made a manual connection. If due to our reinstallation or other reasons when we run our app, such as:

You need to connect the Ubuntu-app-platform package with your application   
to reuse GKFX assets, please run:  
snap Install ubuntu-app-platform  
snap connect sina-webapp:platform ubuntu-app-platform:platform  

For such error messages, we need to use the following tools:

$ Sudo/usr/lib/snapd/snap-discard-ns Sina-webapp  

To clear the previous settings, and before re-running our app, we can then manually connect the interfaces listed above.
We can find the icon of our app in our desktop dash and run it.




The source code of the whole project is: Https://github.com/liu-xiao-guo/sina-webapp. We can use the following command to download the app from the store:

$ sudo snap install Sina-webapp--beta

Read MORE: Https://github.com/fcole90/fcole-hexgl-webapp