ScadaWeb as Progressive Web Apps

[kumajaya]

As a reference: https://web.dev/progressive-web-apps/

Of course I’m not expert to prepare a Service Worker for ScadaWeb but this is a partial PWA support.

1. Prepare a nice icon and save it as icon-192×192.png inside ScadaWeb/images/
2. Create manifest.webmanifest file inside ScadaWeb:

{
"name":"Rapid SCADA",
"short_name":"SCADA",
"description":"Rapid SCADA | Free, Open Source, Full Featured SCADA",
"lang":"en",
"background_color":"#f1f1f1",
"display":"standalone",
"theme_color":"#23282d",
"icons":[
{
"src": "/scada/images/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
}
]
}

3. Modify ScadaWeb/Login.aspx:

<script type="text/javascript" src="js/login.js"></script>
<link rel="manifest" href="/scada/manifest.webmanifest">
<meta name="theme-color" content="#23282d">
<link rel="apple-touch-icon" href="/scada/images/icon-192x192.png">
</head>

4. Modify ScadaWeb/MasterMain.Master:

</asp:ContentPlaceHolder>
<link rel="manifest" href="/scada/manifest.webmanifest">
<meta name="theme-color" content="#23282d">
<link rel="apple-touch-icon" href="/scada/images/icon-192x192.png">
</head>

5. Restart your web server.
6. Access RS from Chrome/Firefox/Edge mobile browser, add RS to home screen from browser menu. When you run RS from the home screen, it feel like a native mobile app without address bar.

[Mikhail]

This can be useful. Thanks a lot!

[Author]

Posts