HowTo: Make installable PWA Desktop and Android app
lazarus / 76-Pas2JS

----------------------------------------------------------------------
ps · 2020-07-03 09:26

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:
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i {  "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:
Code: Javascript  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
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:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i 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.

----------------------------------------------------------------------
mr-highball · 2020-07-03 14:57

Thanks @ps, will definitely give this a try!