WriteFreely blog as Progressive Web App

Feedback Feature requests
1

It would be convenient to have WriteFreely blogs exposed as Progressive Web Apps - they increase visitor engagement by adding sites to their mobile devices as apps and therefore having much easier access. Also PWA has nice visual appeal by adding color to browser tab when visiting. Making blogs exposed as PWAs can be implemented following Gitea’s example:

Expose JSON file with colors, title and icons like:

{
    "short_name": "Gitea",
    "name": "Gitea - Git with a cup of tea",
    "icons": [
      {
        "src": "/img/gitea-lg.png",
        "type": "image/png",
        "sizes": "880x880"
      },
      {
        "src": "/img/gitea-sm.png",
        "type": "image/png",
        "sizes": "120x120"
      },
      {
        "src": "/img/gitea-512.png",
        "type": "image/png",
        "sizes": "512x512"
      },
      {
        "src": "/img/gitea-192.png",
        "type": "image/png",
        "sizes": "192x192"
      }
    ],
    "start_url": "/",
    "scope": "/",
    "background_color": "#FAFAFA",
    "display": "standalone",
    "theme_color": "#6cc644"
  }

And link it in site HEAD:

<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">

Steps to implement:

  • Each blog should have own manifest JSON generated based on customization settings;
  • Favicon/icon upload and resize needed (maybe as part of image upload implementation);
  • Add and use JavaScript color picker to help choose color(s).
2

That’s a great idea @gytisrepecka! It’d be especially interesting making it a PWA helped you write to your WF blog easier on mobile. Have you tried to implement it on your blog yet? I’d be curious to see it in action.

3

From technical point-of-view Progressive Web App is rendered using Android’s internal browser engine (Chromium), so it would work pretty much the same as user visiting WriteFreely on browser. On the other hand, user skips one step: no need to open browser and go to website when you already have an icon between apps.

I need to explore more if maybe login credentials could be stored in generic Android Accounts framework - that would be awesome :relaxed:

I am in progress setting up development environment on CentOS 7/8, will post some screenshots as soon as I have working prototype :nerd_face:

1 Like
4

To gather bits and pieces needed for implementation, I’ve set up PWA on my company’s minisite. Here are the components required:

  • Meta tags in site’s head;
  • Shortcut icons (PNG) in different sizes (image upload would help here, perhaps with my small library with added resizer as well);
  • manifest.json with application details (name, description, icons, theme color, etc.) - this should be generated for each blog based on settings (blog customization page);
  • JavaScript worker to cache elements for web app offline view - most likely common for whole installation of WriteFreely unless each blog has separate logo image. Otherwise only css/write.css needs to be cached.

For the reference, some reading:

When I think about offline page it perhaps should be editor (home page of logged-in user) - that way, say, being on airplane would enable user to write his/her blog. It’s exciting to know that PWA can use database in similar nature as usual app does and have long-lived sessions for authenticated users. More coolstuff for implementation details here.

2 Likes