Universal Link 前端部署採坑記

2021-09-11 09:03:55 字數 3394 閱讀 6172

具體細節可以看

但univeral link 還是可以學習學習看看的~畢竟幾遍在safari下還有個好處,可以乾掉schema跳轉的那個難看的錯誤彈框

-- 以上來自2018.1.8修改

前言:

文章會適當說一些如何開發ios上的universal link,但類似的文章太多了一艘一大堆,每篇都介紹的挺清楚,因此也不是重點

其實整個universal link沒啥難的,真正上線過universal link的人這些應該都趟過一遍了,本文主要是我們team去應用universal link的時候一些文件沉澱和記錄

location.href = 'schema://***x'

複製**

if ([[url absolutestring] hasprefix:@"schema://"])

}複製**

一定會有這樣的產品需求的:

try 

else

}catch (e) {}

//延遲1000秒

settimeout(function ()

else

},1000)

複製**

延遲1000ms

安卓這麼用挺好,ios有個討厭的彈框

在第乙個環節,安卓上schema開啟失敗,沒有任何反映,也沒有任何提示,一切順利,但是ios就不同了。

schema會彈個可惡的跳轉失敗的框

schema 的2個弊端確實能通過universal link解決

類似的話題,隨便搜搜universal link能搜到一大堆,我這裡就略微多囉嗦兩句,一般各大教程裡會反覆說的,我盡量一帶而過,多說點我遇到的坑

劃重點

有心人可能看到,知乎的universal link配置的是oia.zhihu.com這個網域名稱,並且對這個網域名稱下比如/answers /questions /people 等urlpath進行了識別,也就是說,知乎的universal link,只有當你訪問,在移動端會觸發universal link,而知乎正經的urlhttps是不會觸發universal link的,知乎為什麼製作,為什麼不把他的主網域名稱配置universal link,這是由於universal link的乙個大坑所致

ps.

測試是否正確

這個**有點sb,就是你用他測試不通過,其實universal link也可能不生效的,比如我把知乎的oia.zhihu.com輸入進去,他就沒感應到,認為沒有。我搜尋的時候,發現也有人發現了這個問題,反正可以當個參考

#pragma mark universal links

if ([useractivity.activitytype isequaltostring:nsuseractivitytypebrowsingweb])

return

yes;

}複製**

恩比較千篇一律,我不多說了

沒命中,webview繼續跳轉url

整個universal link其實真要只是開發完成,完全寫不了幾行**,就差不多搞定了,不過還真是踩了幾個坑

前端開發經常面臨跨域問題,恩universal link也有跨域問題,但不一樣的是,universal link,必須要求跨域,如果不跨域,就不行,就失效,就不工作。(ios 9.2之後的改動,蘋果就這麼規定這麼設計的)

這也是上面拿知乎舉例子的時候重點強調的乙個問題,知乎為什麼使用oia.zhihu.com做universal link?

是不是不太好理解,那直接拿知乎舉例子

一般的公司都會有自己的主網域名稱,比如知乎的www.zhihu.com,在各處分享傳播的時候,也都是直接分享基於主網域名稱的url,但為了解決蘋果強制要求跨域才生效的問題,universal link就不能配置在主網域名稱下,於是知乎才會準備乙個oia.zhihu.com網域名稱,專為universal link使用,不會跟任何主動傳播分享的網域名稱撞車,從而在任何活動wap頁面裡,都能順利讓universal link生效。

簡單一句話

我們業務機房的集群是大部門下幾條業務線共用的,有一整套雲服務系統來進行機房集群的管理,有統一的接入層進行分發。雖然是不同的產品線,不同的服務,但是共享分布式的機房進行運作的。

很多universal link的教學文章是這麼寫的

將file 上傳到網域名稱所在的伺服器根目錄下

因為都是同樣的檔名,又因為整個事業部機器實際上是共用的,因此就發生了覆蓋。

解決辦法

2個產品線的link網域名稱其實是不一樣的,只不過恰巧這兩個網域名稱最重打到得機器是同乙個或者說有重疊,因此產生了覆蓋,完全可以將json檔案儲存成各自的名字,在接入層對網域名稱進行分發

想要開啟也不是不行,讓使用者重新用safari開啟,universal link的頁面,然後會出現很像蘋果smart bar的東西,那個東西點了後就能開啟(我是看到的,我沒親自操作過)

,

複製**

- (bool)handleuniversallink:(nsurl *)url  else

if ([pathcomponents[1] isequaltostring:@"_iosuniversallink"])

if (router && router.length > 0)

return

yes;}}

return

no;}

複製**

可以看出來我只開啟了這個網域名稱下2個universal link path.對沒錯,不像知乎那麼多。

router.use('/view', function (req, res, next) );

複製**

整個效果就是

同樣的道理,這個url,也沒有實際的頁面,如果不進行重定向,也會直接返回404,因此看一眼重定向的**

router.use('/_iosuniversallink', function (req, res, next) );

複製**

整個效果就是

這個設計看起來就是完美解決了pm得需求

解決了舊schema模式下的弊端問題:

schema的trick方式會有乙個醜陋的錯誤跳轉彈框

前端隨筆初識前端

接上章 table tr 行 td 列 width 的寬度 height 的高度 border 的邊框 cellspacing 單元格與單元格之間的間距 預設大約是2畫素 cellpadding 單元格與內容之間的空隙 預設值是0 bgcolor 背景顏色 bordercolor 邊框顏色 alig...

cursor的十八種樣式 前端前端前端

預設游標 通常是乙個箭頭 cursor default 3.auto 預設。瀏覽器設定的游標。cursor auto 4.crosshair 游標呈現為十字線。cursor crosshair 5.pointer 游標呈現為指示鏈結的指標 乙隻手 cursor pointer 6.move 此游標指...

前端隨筆初識前端HTML

html語言分成兩部分 標籤 標記,元素 長在尖括號後面的第乙個單詞 屬性長在標籤後面,用空格隔開的那個單詞 html檔案分成兩部分 頭部head,放描述性資訊 主體body,放可見的內容 結構 html標籤分成兩種 常規標籤 雙標籤 標籤名 屬性1 屬性值1 屬性2 屬性值2 內容 標籤名寫在尖括...