Lazarus

Programming => Networking and Web Programming => Pas2JS => Topic started by: ps on July 03, 2020, 11:26:09 am

Title: HowTo: Make installable PWA Desktop and Android app
Post by: ps on July 03, 2020, 11:26:09 am

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][+][-]

1. {
2.   "name": "Your App Name",
3.   "short_name": "App name on startup screen",
4.   "description": "App description",
5.   "icons": [
6.     {
7.       "src": "/manifest/icon128.png",
8.       "sizes": "128x128",
9.       "type": "image/png"
10.     },
11.     {
12.       "src": "/manifest/icon256.png",
13.       "sizes": "256x256",
14.       "type": "image/png"
15.     },
16.     {
17.       "src": "/manifest/icon512.png",
18.       "sizes": "512x512",
19.       "type": "image/png"
20.     }
21.     ],
22.     "start_url": "/default-url-of-your-app",
23.     "display": "standalone",
24.     "orientation": "portrait",
25.     "theme_color": "#ffffff",
26.     "background_color": "#47B972",
27.     "scope": "/"    
28. }

 
install-worker.js:

Code: Javascript  [Select][+][-]

1. self.addEventListener('install', (event) => {
2.     self.skipWaiting();
3.   });
4.  
5.   self.addEventListener('activate', (event) => {
6.     return self.clients.claim();
7.   });
8.  
9.   self.addEventListener('fetch', function(event) {    
10.     event.respondWith(fetch(event.request));
11.   });
12.  
13.  

And in app creation:

Code: Pascal  [Select][+][-]

1. constructor TYourApp.Create;
2. begin
3.   IsMobile := ContainsStr(window.navigator.userAgent, ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini']); // detect mobile
4.   if isFeature('serviceWorker', window.navigator) then begin
5.     window.navigator.serviceWorker.register('/install-worker.js'); // pwa install support
6.     writeln('service worker supported');
7.   end else Writeln('serviceWorker not supported!');
8.   window.addEventListener('beforeinstallprompt', @JSOnInstallPrompt); // for install  
9. end;
10.  
11. function TYourApp.JSOnInstallPrompt(E: TJSBeforeInstallPromptEvent): Boolean;
12. begin
13.   Result := True;
14. end;
15.  

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.

Title: Re: HowTo: Make installable PWA Desktop and Android app
Post by: mr-highball on July 03, 2020, 04:57:50 pm

Thanks @ps, will definitely give this a try!