实战Forge Viewer渐进应用 – 当Xamarin遇上WebAssembly

45次阅读

共计 6329 个字符,预计需要花费 16 分钟才能阅读完成。

Xamarin 作为移动端的跨平台原生开发框架的老牌劲旅,一直被视作 Mono Project 寄予厚望的当家花旦之一。近年来,虽然 React Native/Ionic 等后起之秀夺去大半江山,但随着 Xamarin 入驻微软并宣告免费,加之.NET/C# 生态的日益完善与精进,Xamarin 已然重焕青春!
那么,如果我们将它与上期技术分享介绍的业界新贵 WebAssembly 双剑合璧,又会迸发出怎样的化学反应呢?今天我们就将 Autodesk Forge Viewer 离线方案整合到 Xamarin,并发布为基于 WebAssembly 的 Progressive Web App(简称 PWA,渐进式应用)– 即实现浏览器 URL 访问直接安装的神奇效果!
引言彩蛋
首先,让我们 First things first:????Autodesk ADN(开发者社区团队)祝您在新的一年大吉大利!!???? 事顺利!!????
为什么要 WebAssembly 和 PWA?
在原生和 H5 应用如火纯青的今天,WebAssembly 和 PWA 的相对意义与优势在于:

如上期技术分享介绍,WebAssembly 赋能我们在浏览器中以原生的性能运行 CC#、Java、Rust 等及基于它们的框架和技术
编译后的执行包(wasm)为二进制,精简高效的同时保护源代码,各种安全机制防范恶意代码的篡改与攻击,增强应用的安全性
PWA 给予用户非原生应用胜似原生应用的浏览器客户端体验,通过浏览器访问 URL 即可完成 PWA 的安装,无需发布至应用商店

Xamarin 的优势
相比 Cordova/PhoneGap、Ionic、Appgyver 等 H5 混合框架,以及 React Native、Titanium 等原生框架,我们为什么要关注 Xamarin 呢?

相较 Cordova/PhoneGap、Ionic、Appgyver 等混合框架具有原生优势

相较基于 JavaScript 的 React Native、Titanium,.NET/C#在语言某些特性上具备相对优势,也便于熟悉.NET/C# 桌面与后台开发的朋友迅速上手
.NET/C# 生态的相对优势,如可以使用我们的 Forge .NET Client SDK

相较基于状态的 Functional Approach 具有更底层原生 UI 的优势

实战开始!
今天实战的环节为:Forge Viewer 渐进应用 > Xamarin 应用 > 发布为 WebAssembly 的 PWA > 移动端测试
Forge Viewer PWA
往期我们有介绍过利用 ServiceWorker 和 Cache 等 API 实现 Forge Viewer 离线方案,但是悉心的朋友或许已经发现该方案仍有不少瑕疵(将在下期着重阐述),现在我们更一进步: 将整个加载过程离线缓存与客户端! 其成果是独立的 Forge Viewer PWA,满足移动和桌面端的离线使用。

首先定义 Viewer 渐进应用的 ServiceWorker,有关该 API 的详细介绍可以参考往期。不同于往期中介绍的方案,这次我们将要缓存所有 Viewer 脚本、样式和加载模型的请求,且在预设的缓存列表中只有 CSS,其余脚本依赖与模型数据全部在应用首次加载阶段缓存,省去手动适配不同 Viewer 版本与模型资源的麻烦。首先我们来监听请求事件,收集所有需要缓存的请求,并记录从后台获取的 Access Token,以供 Forge API 认证所需。出于性能考虑,待模型加载完成后再统一缓存所有资源:
const urlsToCache = [
‘viewer.html’, //Viewer 页面路径
‘viewer-serviceworker.js’, // 本 ServiceWorker 路径
‘https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css’ //Viewer.js 样式
];

self.addEventListener(‘fetch’, event => {

event.respondWith(
caches.match(event.request)
.then(async response => {
if (response) return response;

if (event.request.url.endsWith(‘/api/token’)) {\\ 判断请求指向获取 Access Token 的后台服务

const response = await fetch(event.request);
fetchOptions.headers = {‘Authorization’: ‘Bearer ‘ + response.access_token} \\ 设定访问 Forge API 请求的 Access Token
return response;

} else fetches.push(event.request.url);
return fetch(event.request)
})
)
});

在 ServiceWorker 中定义缓存操作
self.addEventListener(‘message’, async event => {
switch (event.data.operation) {
case ‘EXECUTE_CACHE’:
await caches.open(CACHE_NAME).then(async cache => await Promise.all(fetches.map(url=>fetch(url, fetchOptions).then(resp => cache.put(url, resp)))));
event.ports[0].postMessage({status: ‘ok’, fetches});
break;
}
});

待 Viewer 触发 GEOMETRY_LOADED_EVENT,即模型加载完毕,一切所需资源已记录在案,再统一触发缓存
navigator.serviceWorker.register(‘/service-worker.js’).then((registration) => {
alert(‘Service worker registered’, registration.scope);
let script = document.createElement(‘script’);
script.onload = function () {
const viewer = new Autodesk.Viewing.Private.GuiViewer3D(myViewerDiv);

Autodesk.Viewing.Initializer(options, () => {

… // 按需以在线或离线模式初始化 Viewer 并加载模型

viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {

const channel = new MessageChannel();
channel.port1.onmessage = (event) => console.log(event);

navigator.serviceWorker.controller.postMessage({operation: ‘EXECUTE_CACHE’}, [channel.port2]); // 模型加载完成,该模型所需资源已作记录,遂向 ServiceWorker 发送消息,开始缓存所需资源
})
});
};
script.src = “https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/viewer3D.min.js”;
document.head.appendChild(script)

});

最后定义后台服务,获取 Access Token,.NET、Node、PHP 的教程可以参看这里

整合 Viewer PWA 至 Xamarin 应用

在 Visual Studio 中创建 Xamarin 项目,注意引用 Xamarin.Forms v2.5 而非 v3.x!

由于 Viewer 采用 WebGL 实现,其 PWA 的整合亦采用 WebView,创建基于 Xamarin XAML 的 Top Banner+WebView 的 UI 界面,其中 WebView 指向我们之前定义的 Viewer PWA 页面
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto” />
<RowDefinition Height=”*” />
</Grid.RowDefinitions>
<StackLayout BackgroundColor=”DimGray” VerticalOptions=”FillAndExpand” HorizontalOptions=”Fill”>
<StackLayout Orientation=”Horizontal” HorizontalOptions=”Center” VerticalOptions=”Center”>
<ContentView Padding=”0,10,0,10″ VerticalOptions=”FillAndExpand”>
<Image Source=”{Binding logo}” VerticalOptions=”Center” HeightRequest=”24″ />
</ContentView>
</StackLayout>
</StackLayout>
<ScrollView Grid.Row=”1″>
<StackLayout Orientation=”Vertical” >
<ContentView VerticalOptions=”FillAndExpand” >
<WebView Source=”URL/TO/YOUR/VIEWER/PWA.html”></WebView>
</ContentView>
</StackLayout>
</ScrollView>
</Grid>

可用所见即所得的设计器(如 GorillaPlayer)设计 XAML,和 Visual Studio 2017 自带的 XAML Previewer 预览 UI 效果(如箭头所示于 XAML 编辑器右上角按钮进入)

编译运行并检查在 UI 和 WebView 加载刚才完成的 Forge Viewer PWA 的效果
发布为基于 WebAssembly 的 PWA!

在 Visual Studio 中创建基于.NET Core 2.x 的 Console(控制台应用)项目,并引用方才创建的 Xamarin 项目

通过 NuGet 安装以下依赖,其中 Ooui 系列用于发布 WebAssembly

Ooui: https://github.com/praeclarum…

Ooui WASM: 发布 WebAssembly
Ooui Forms: Xamarin.Forms 的 Ooui 实现
Xamarin.Forms 2.5 // 重要!一定要使用 2.5 版本以兼容 Ooui

在 Program.cs 中定义发布过程
using OurXamarinApp
static void Main(string[] args)
{
Forms.Init();

var mainPage = new MainPage(); // 以 MainPage 为应用入口为例
UI.Publish(“/”, mainPage.GetOouiElement());
}

运行项目,将在项目的 \bin\Debug\netcoreapp2.1\dist 路径下生成 WebAssembly 和配套的前端页面与脚本:

定义缓存 WebAssembly 的 ServiceWorker:
const urlsToCache = [
‘index.html’,
“https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css”, //Ooui 依赖
“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”, //Ooui 依赖
‘service-worker.js’ // 本 ServiceWorker 路径
];

self.addEventListener(‘fetch’, function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
// Cache hit – return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});

在发布生成的 index.html 页面中注册该 ServiceWorker
window.addEventListener(‘load’, function () {
navigator.serviceWorker.register(‘service-worker.js’)
})

定义应用清单 (manifest.json),让浏览器识别我们的 PWA 并定义主题颜色、应用图标等元数据
{
“name”: “Forge Viewer PWA”,
“short_name”: “FVPWA”,
“icons”: [
{
“src”: “icons/icon-128×128.png”,
“sizes”: “128×128”,
“type”: “image/png”
},
{
“src”: “icons/icon-144×144.png”,
“sizes”: “144×144”,
“type”: “image/png”
},
{
“src”: “icons/icon-152×152.png”,
“sizes”: “152×152”,
“type”: “image/png”
},
{
“src”: “icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “icons/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
],
“start_url”: “index.html”,
“display”: “standalone”,
“background_color”: “#3498DB”,
“theme_color”: “#3498DB”
}

在 index.html 页面中引用清单
<header>

<link rel=”manifest” href=”/manifest.json”>
</header>

移动端测试

用各大 Web 服务器直接静态托管应用所在目录即可,并以支持 ServiceWorker 的浏览器访问,支持情况可参考:https://caniuse.com/#search=s…

在非 HTTPS/SSL 测试环境下,如遇浏览器安全限制:“不安全上下文”错误或无法注册 ServiceWorker (navigator.serviceWorker 为 null),则需给服务器启用 HTTPS/SSL,或使用 ngrok 等云管道服务为本地环境作代理
用访问应用 URL 时浏览器会提示保存快捷方式到桌面,图标由我们的应用清单定义:

保存后进入飞行模式打开应用,测试离线状态的加载:

大功告成!
延伸阅读

Xamarin 开发资源汇总:https://blog.csdn.net/qq_4147…

WebAssembly 遇上 React Native: https://github.com/vincentrie…

PWA 和小程序:https://www.cnblogs.com/softi…

正文完
 0