Simple steps how to create PWA Desktop and Android app with pas2js:
1. You will need mainifest.json
2. install worker
3. respond on install process
4. App must be on https.
manifest.json:
{
"name": "Your App Name",
"short_name": "App name on startup screen",
"description": "App description",
"icons": [
{
"src": "/manifest/icon128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/manifest/icon256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/manifest/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/default-url-of-your-app",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#ffffff",
"background_color": "#47B972",
"scope": "/"
}
install-worker.js:
self.addEventListener('install', (event) => {
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request));
});
And in app creation:
constructor TYourApp.Create;
begin
IsMobile := ContainsStr(window.navigator.userAgent, ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini']); // detect mobile
if isFeature('serviceWorker', window.navigator) then begin
window.navigator.serviceWorker.register('/install-worker.js'); // pwa install support
writeln('service worker supported');
end else Writeln('serviceWorker not supported!');
window.addEventListener('beforeinstallprompt', @JSOnInstallPrompt); // for install
end;
function TYourApp.JSOnInstallPrompt(E: TJSBeforeInstallPromptEvent): Boolean;
begin
Result := True;
end;
Now you can install app on android phone (when your app is first time used in your chrome browser, install dialog appears. Or you can hit "Place on home screen" from menu. In desktop Chrome or Edge (chrome bassed) you can install your app on desktop.
I'm using browser user agent to detect mobile app.