有什么方法可以将一个完整的 Web 应用程序（已经响应并与小屏幕完全兼容，已经具有触摸 UI 控件等）移植到 Android/iOS 上？
我的 Web 应用程序是准系统的 HTML/JS/CSS，超级普通（我什至不使用 jQuery）也是如此。
我以为我可以将我的 Web 应用程序粉碎到一个空的 Ionic-Cordova 项目中并使用它，但我想知道是否有更快/更好的方法来做到这一点？
也许一个我不知道的工具或服务将一个文件夹作为输入并弹出一个 android/IOS 可执行文件？
答案 0 :(得分：-1)
将网络应用程序移植到移动应用程序的简单方法是在 android 中创建一个 WebView app。然后给它你的网络应用链接地址
答案 1 :(得分：-1)
您可以制作 PWA (Progressive Web App)。
<块引用>渐进式网络应用 (PWA) 是使用网络技术构建的现代高质量应用。 PWA 提供与 iOS/Android/桌面应用程序类似的功能，即使在不稳定的网络条件下也能可靠运行，并且可安装，让用户更容易找到和使用它们。
基本上，您必须将 manifest 中的 .json 文件添加到您的项目根目录中，您将在其中告知有关您的应用程序的许多信息，例如图标、名称、主要颜色、显示模式（选择 {{1 }} 如果你希望它像一个真正的应用程序）等等......
（在此处查看：https://web.dev/add-manifest/）并链接到您的项目页面：
standalone之后，您必须使其可安装 (https://web.dev/codelab-make-installable/)，为此您需要在项目中使用 <link rel="manifest" href="/manifest.json">
脚本，您可以在此处获取 (https://glitch.com/edit/#!/make-it-installable?path=service-worker.js%3A1%3A0)
service-worker只需将其添加并保存在项目的 const CACHE_NAME = 'offline';
const OFFLINE_URL = 'offline.html';
self.addEventListener('install', function(event) {
console.log('[ServiceWorker] Install');
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
// Setting {cache: 'reload'} in the new request will ensure that the response
// isn't fulfilled from the HTTP cache; i.e., it will be from the network.
await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
})());
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
console.log('[ServiceWorker] Activate');
event.waitUntil((async () => {
// Enable navigation preload if it's supported.
// See https://developers.google.com/web/updates/2017/02/navigation-preload
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
})());
// Tell the active service worker to take control of the page immediately.
self.clients.claim();
});
self.addEventListener('fetch', function(event) {
// console.log('[Service Worker] Fetch', event.request.url);
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
const preloadResponse = await event.preloadResponse;
if (preloadResponse) {
return preloadResponse;
}
const networkResponse = await fetch(event.request);
return networkResponse;
} catch (error) {
console.log('[Service Worker] Fetch failed; returning offline page instead.', error);
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(OFFLINE_URL);
return cachedResponse;
}
})());
}
});
文件中即可。
之后，请确保您在项目中使用该代码注册服务工作者：
.js现在您可以通过一些 /* Only register a service worker if it's supported */
// Service Worker
window.addEventListener('load', () => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
});
元素使您的网站可安装，例如：
<button>当有人在您的 window.addEventListener('beforeinstallprompt', (event) => {
// Get the event first
window.deferredPrompt = event;
});
document.querySelector('#buttonInstall').addEventListener('click', () => {
const promptEvent = window.deferredPrompt;
if (! promptEvent) {
return;
}
promptEvent.prompt();
promptEvent.userChoice.then((result) => {
window.deferredPrompt = null;
});
}
});
中时，您可以通过这种方式隐藏安装按钮：
PWA这里有一些重要的事情：
您的应用必须满足特定条件才能安装，您可以 在此处查看：https://web.dev/install-criteria/
如果安装弹出窗口没有出现，说明你做了一些事情 错误，或者您的清单已损坏或您的脚本。
您可以在浏览器开发者工具中查看您的 manifest.json 是否正常打开它 (F12)，转到 if (! window.matchMedia('(display-mode: standalone)').matches) {
// hide your install button
}
选项卡并转到 Application，这将显示您的所有清单参数它也会显示是否有问题。
我建议你阅读上面的所有链接，还有很多 详细解释 PWAs