由于某个需求需要添加Google App Indexing,便给博客写了个App来尝试这个功能。功能大概就是: 在手机上的Google的搜索结果页直接可以打开App的相应页面。
步骤大概可以分成两部分,一是在网页端添加相应的内容,一个则是在客户端App添加相应的配置和步骤。
如官网(在网站上添加应用深层链接)所示,一共提供了三种方法:
由于方法3比较麻烦,方法2对Sitemap造成伤害,只有方法一是比较好的。即在每一个页面添加相应对的alternate,如我的首页会变成
<link rel="alternate" href="android-app://com.phodal.blog/https/www.phodal.com/">
这个href由四部分组成
对应于其他页面可能就是
<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 }}" />
这样我们就完成了网页部分的内容
由于我们这里用的是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时才会到相应的页面。
除了用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 Idea墙, 也许,你会遇到心仪的项目