About PWA with SC

Scriptcase 9 General
#21

For one: PHsPeed: Building Progressive Web Application - YouTube

#22

so i watched the video.
@aducom you build this app yourself, great! but what about integration with sc apps? what makes this product different from code you can find on the internet.
i don’t get the price tag. why is there a licence per year, instead of a fixed price

#23

It was an answer to the question of JoeSF in regard to my remark that there are products that can create PWA’s out of the box. I responded to the Portuguese webinar, which I found to be confusing and messy, and tbh, I have the same remark to the English version. But you’re right, it has nothing to do with SC. I don’t understand the license remark btw. But if you have questions regarding that, then please PM me. The code you can find on the internet is way easier to use then the video of SC demonstrates. In addition, if you use a backend like PHP to support your application then you always need an active internet connection. If that fails then you need to have some fall-back scenario. Building a full native PWA requires that you build all in a javascript framework, do all kinds of caching etc. The presented solution(s) have a PWA shell that embeds the application as an app, but cannot fully run stand-alone, but report the issue that internet connection is gone (a simple ‘worker’)

#24

I needed to do the same and managed to figure it out :). This is a complete working solution. To create a very very basic PWA (as per the original requestor asked) in Scripctase follow instructions below.

The resulting application will have the following properties,

  • An application name
  • An application icon
  • Background colour
  • Full screen display
  • Installable

Create a json Manifest (manifest.webmanifest)

{
"theme_color": "#f69435",
"background_color": "#ffff00",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"app_name": "MyApp",
"short_name": "MyApp",
"description": "MyApp",
"icons": [
    {
        "src": "MyApp192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "MyApp512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
]
}

Make sure you change the start_url to your start page.

Create Icons
Create 2 icons with a box dimension with 192×192 and 512×512 pixel dimensions (Myapp512.png and MyApp192.png).

These icons will be used as the application icons that appear on your desktop \ tablet window.

Create an External Library within the Project Space

Create an external project library called PWA and upload,

  • manifest.webmanifest
  • MyApp192.png
  • MyApp512.png

Add the External Project to your Project

  • Click use library for the new PWA library.

Add Manifest Link to Application

Add the following into onExecute event or other event.

echo '<link rel="manifest" href="'.sc_url_library('prj', 'PWA', 'manifest.webmanifest').'" />';

I’ve tested this solution on (Desktop )Edge, (Desktop) Chrome and Android Chrome and they all install fine.

1 Like