Make Netlify CMS a Progressive Web App (PWA)!

[growdigital]

- Do you want to request a feature or report a bug?

Feature

- What is the current behavior?

When I go offline, Netlify CMS goes offline too 😞

- What is the expected behavior?

It would be great to make Netlify CMS a Progressive Web App, allowing for offline functionality. This means that the user could create content without an internet connection, without fearing of losing it.

A PWA would also greatly increase the market share of Netlify CMS, as people could start using it on mobile devices, as in devices connected to mobile data network (although do see #441 Make the CMS work for mobile).

[mittalyashu]

It would be great to make Netlify CMS a Progressive Web App

👍🏻

Allowing for offline functionality. This means that the user could create content without an internet connection, without fearing of losing it.

I don't think we should implement this feature of offline functionality, as NetlifyCMS fetches the data from .git repository to stay up to date with the changes and it is possible that other users might have made changes to the same repository which lead to conflict in changes.

What else could be done?

There should be an option in the config.yml file where users can select if they want NetlifyCMS to be PWA enabled or disabled.

pwa: true

This way a user don't have to deal with the PWA stuff and enjoy using NetlifyCMS on mobile.

Once the user enabled PWA in this config file, the users should be able to add this website (/admin) to home screen, where he/she can have directly edit.

[growdigital]

it is possible that other users might have made changes to the same repository which lead to conflict in changes

Isn’t this the case with any other interaction with the git repo? When I'm writing a blog on my text editor, commiting local changes, I'm effectively working "offline". Only when I git push am I "online".

It is interesting, as I don't know how NetlifyCMS handles git conflicts in the normal course of things.

[mittalyashu]

I don't know how NetlifyCMS handles git conflicts in the normal course of things.

Exactly. There is no way to deal with conflicts in NetlifyCMS interface and to deal with such problem we have to use Terminal, Editor or GitHub/GitLab/BitBucket.

With the help of NetlifyCMS, non-technical people like: writer or editor can edit or write new posts and they might don't even know how to resolve problems like pull request conflicts.

So, it good before hand not to add the option of saving changes locally when offline.

[tomrutgers]

Disabling the functionality to save changes locally when offline doesn't prevent conflict in changes. Therefore I don't see the value of an option to enable or disable such functionality. I don't think PWA is an option you can enable, it's more like a development strategy / requirement / spec. Just like responsiveness is (which is actually part of googles PWA checklist: https://developers.google.com/web/progressive-web-apps/checklist)

[mittalyashu]

Disabling the functionality to save changes locally when offline doesn't prevent conflict in changes.

I know, but once you are back online and then NetlifyCMS will try to commit those changes and what if someone else has already made some changes in that case there will be a conflict.

I don't think PWA is an option you can enable, it's more like a development strategy / requirement / spec.

Yes, but you can control weather to register a service worker or not.

[tomrutgers]

I know, but once you are back online and then NetlifyCMS will try to commit those changes and what if someone else has already made some changes in that case there will be a conflict.

That can happen when you're online as well, so it's not actually a problem caused by offline functionality.

I understand how not registering a service worker is a possibility, I just don't see why you'd want to do that. It's not a functionality that requires the user to think or behave differently, like the editorial workflow for example.

[mittalyashu]

As I have mentioned in my first comment https://github.com/netlify/netlify-cms/issues/1502#issuecomment-419372785, I am referring to two different things.

1. Do not allow users to save edits when they are offline (I take my words back regarding disabling the offline functionality 😝).

But still saving edits when offline is not a good idea, apart from that offline functionality can used for checking the dashboard, editorial workflow...

2. Allow users to enable or disable PWA on their website (when they try to access NetlifyCMS)

Not all organizations want to use PWA, that's why adding an toggle option would make sense. Apart from that PWA requires an HTTPS connection to work and if someone is not sure HTTPS in that case he/she can disable PWA.

It's not a functionality that requires the user to think or behave differently, like the editorial workflow for example.

It's kinda functionality only, as PWA brings lots of things:

1. Add to home screen: Users can quickly get access to NetlifyCMS
2. Push notifications: Send notification if a post is updated, moved in editoral workflow, or the status has been chaged.
3. Native app like experience: We can control how the app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.
4. Fast: As the files are cached, the loading speed will be increased.

PWA Implementation Checklist

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[joshuakeel]

I am very interested in this functionality. I'm not interested in the offline functionality so much as the other features @mittalyashu mentioned. Adding to home screen, removing browser chrome, etc.

I'd like the experience to be as close to a native app as possible.

[matiyin]

Same here. A few things leave me reluctant to use Netlify CMS for future projects:

• So far I rely on others improving the CMS functionality, as I'm a Vue developer mostly using Nuxt.
• Not being able to reorder collections is a major UX for my clients. I now have to do it the old skool way by making an Order number field, leaving clients confused if they want something in between posts. I tried using a custom widget but it gave too many issues so far.
• Making the CMS code a PWA would be very helpful for how my clients like to work: quick and easy from their mobile. No real need for offline use, but having it behave as a native app for my clients would be amazing.
• overall development of new features seems very slow, but I understand everyone is contributing in their own time. The re-order issue is from 2017 and seems to have died.

I see great potential for Netlify CMS, especially for Netlify as a company to push more users. I will continue to follow and use it, may it be for very small and simple projects. It was a pleasure to get to know it!

[erezrokah]

Hi @matiyin, in your second bullet do you mean reorder entries in a collection or ordering collections in the UI? By re-order issue do you mean https://github.com/netlify/netlify-cms/issues/475? I'm asking since we try to work our way through the most upvoted features first (that issue is now on second place). We recently did https://github.com/netlify/netlify-cms/issues/54 which allows allows consistency for displayed entries. I think some of the improvements introduced in that issue might help with the re-ordering issue as well (we cache git tree trees to avoid sending redundant API calls when listing all entries). As for the PWA issue, I think some work has been done as a part of https://github.com/netlify/netlify-cms/issues/2557 towards this.

[matiyin]

Hi @erezrokah , thanks for responding!

Hi @matiyin, in your second bullet do you mean reorder entries in a collection or ordering collections in the UI? By re-order issue do you mean #475?

Yes I mean #475, so for example when I have a collection of products, the client can order them by drag&drop. I now have a manual order number field in there. I'm using Nuxt so custom code.

I'm asking since we try to work our way through the most upvoted features first (that issue is now on second place). We recently did #54 which allows allows consistency for displayed entries. I think some of the improvements introduced in that issue might help with the re-ordering issue as well (we cache git tree trees to avoid sending redundant API calls when listing all entries).

Yes I'm already using #54 to be able to order on the custom order number field :) But setting those numbers manually is not the best UX.

As for the PWA issue, I think some work has been done as a part of #2557 towards this.

Wow those new UI ideas look great! Would indeed be a big step towards mobile use. Looking forward to see those changes released at some point and to test them.

Again, I will probably continue to use the CMS for smaller projects that need less custom work on the CMS part. One more issue for me: each time a client makes a change a build is made. I've tried the Workflow but still you have to publish each change manually, staking up builds in the queue. I've read an issue about this already, just can't find it now. So I know it's in the system. Thanks for all of your team efforts in pushing this forward!

[erezrokah]

Thanks for the feedback and clarifications it is very helpful. I think you mean https://github.com/netlify/netlify-cms/issues/1025. Feel free to up vote/comment on that issue with suggestions.