Blog

Blog

PHODAL

Ionic/Cordova Google App Indexing

由于某个需求需要添加Google App Indexing,便给博客写了个App来尝试这个功能。功能大概就是: 在手机上的Google的搜索结果页直接可以打开App的相应页面。

Ionic Google App Indexing Example

步骤大概可以分成两部分,一是在网页端添加相应的内容,一个则是在客户端App添加相应的配置和步骤。

Google App Indexing网页端

如官网(在网站上添加应用深层链接)所示,一共提供了三种方法:

  1. 在该网页的 < head > 部分使用 < link > 元素。
  2. 在用于指定该网页的站点地图 < url > 元素中使用 < xhtml:link> 元素。
  3. 针对 ViewAction 这一可能会发生的操作使用 Schema.org 标记。

由于方法3比较麻烦,方法2对Sitemap造成伤害,只有方法一是比较好的。即在每一个页面添加相应对的alternate,如我的首页会变成

<link rel="alternate" href="android-app://com.phodal.blog/https/www.phodal.com/">

这个href由四部分组成

  1. Android Scheme: 即android-app
  2. App包名: 在这里即com.phodal.blog
  3. 协议: 在这里是HTTPS
  4. URL: 即www.phodal.com

对应于其他页面可能就是

<link rel="alternate" href="android-app://com.phodal.blog/https/www.phodal.com/blog/nginx-194-with-http2-install/">

因为用的是Django,所以比较简单的在base.html里添加了

<link rel="alternate" href="android-app://com.phodal.blog/https/www.phodal.com{{ request.get_full_path }}" />

这样我们就完成了网页部分的内容

Google App Indexing手机端

由于我们这里用的是Ionic + Cordova,所以这里用到了Cordova的一个插件,叫Custom URL scheme

1.安装插件

$ cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=android-app

2.添加配置到AndroidManifest.xml

            <intent-filter>
                <data android:scheme="android-app" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
            </intent-filter>

3.添加相应的处理函数,即handleOpenURL,在我的情况下是:

function handleOpenURL(url) {
  var event = new CustomEvent('AppIndexing', {detail: {'url': url}});
  setTimeout(function () {
    window.dispatchEvent(event);
  }, 0);
}

在app.js里还会有一个run

  .run(['$state', '$window',
    function ($state, $window) {
      $window.addEventListener('AppIndexing', function (e) {
        var urlSlug = e.detail.url.split("/");
        if (urlSlug[3] \&\& urlSlug[4] &\\& urlSlug[3] === 'blog') {
          $state.go('app.blog-detail', {slug: urlSlug[4]});
        }
      });
    }
  ])

即当访问的URL是blog的时候,且存在博客的URL时才会到相应的页面。

然后

  1. 发布我们的应用,
  2. 在Developer Console中点击服务和API,可以关联网站

测试

除了用Google,还可以直接用ADB测试是否工作

adb shell am start -a android.intent.action.VIEW -d "https://www.phodal.com/blog/internet-of-things-architecture-iot" com.phodal.blog

如果没有意外的话,应该会打开相应的页面。

其他

博客代码: PhodalDev 博客App代码:Phodal App

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签