Converting WordPress website to Progressive Web App - wordpress

I am building a Progressive Web App but there is a very little documentation and support online so far. I am listing down all my questions in this email.
What is the current support of Service Worker API (Offline Mode) for
desktops? I wrote a small app which worked in offline mode for
mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need
to configure development environment for this so we need to know
what will we be needing to test our apps. It doesn't work on
IOS-Safari/Chrome even.
The service work uses caches extensively and there is a very good
way to debug or unregistered service worker internals on Dekstop
Chrome; but if I run my application on Mobile how would I remove
service worker cache?
If I have a responsive application (A WordPress site) and need to
convert it into PWA; would I need to rewrite the application with
RestAPI for mobile version all again? (Read App Shell of PWA). In
PWA, application shell is separate from data however in CMS like
WordPress data is not separate from the UI.
I have been looking for these answers for very long and not being able to find any proper support.

What is the current support of Service Worker API (Offline Mode) for desktops? I wrote a small app which worked in offline mode for mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need to configure development environment for this so we need to know what will we be needing to test our apps. It doesn't work on IOS-Safari/Chrome even.
Safari is not supporting service workers right now but it should work in Chrome 42 although you should consider to update your browser. Anyway, you can check the state of the art in a variety of places:
Service workers: https://platform-status.mozilla.org/#service-worker
Push API: https://platform-status.mozilla.org/#push
Background Sync: https://platform-status.mozilla.org/#background-sync
More about SW:
Is Service Worker Ready? https://jakearchibald.github.io/isserviceworkerready/
Can I Use? http://caniuse.com/#feat=serviceworkers
The service work uses caches extensively and there is a very good way to debug or unregistered service worker internals on Dekstop Chrome; but if I run my application on Mobile how would I remove service worker cache?
You need to debug Chrome for Android from Desktop Chrome.
Anyway, the URL chrome://serviceworkers-internals is available on Chrome for Android although there is no an easy way of clearing offline caches.
If I have a responsive application (A WordPress site) and need to convert it into PWA; would I need to rewrite the application with RestAPI for mobile version all again? (Read App Shell of PWA). In PWA, application shell is separate from data however in CMS like WordPress data is not separate from the UI.
No. Actually, WP has a very well architecture to decouple content from theme. The problem is that run on the server but you don't need your site running on the client to become a PWA. Mozilla is supporting a suite of WP plugins to help progressivizing your WordPress installations:
Offline Shell [github] identifies your shell assets (i.e. theme files) and cache them in an offline cache.
Offline Content [github] identifies your dynamic content and cache it as the user visit it.
Web Push [github] allows you to push real time notifications to your readers as soon as you publish new content.
Add To Home Screen [github] engages your readers by putting your WordPress in the Home Screen.
They are all very young plugins but you can track them on GitHub and contribute if you want!

A very nice and helpful answer is already added by #Salva, but I thought let me add few things which might be helpful.
For 3rd part, I have worked on an automatic progressive web app converter platform, https://www.escalatingweb.com. I think you can use this platform to convert your web app on WordPress into progressive web app. You can use it to convert your web app into pwa within minutes.
I have also written a very nice tutorial to use automatic pwa converter platform http://www.techromance.com/2017/07/22/automatic-pwa-converter-platform/.
For 2nd part,
Just to add to above answer, and for testing purpose, you can delete all the cache for a particular website from site settings, which will also clear service worker's cache.
For 1st part, nothing to add as such.
P.S. Please nobody be offended in case they find it as a cheap way promoting my platform. The intention is just to help the community, either by building the platform or making it aware to the needful audience.
Thank you #McNab for the suggestion. :)

I also using a Wordpress site and there is a plugin can solve your problem. Instead of installing lots of Mozilla's plugin, you can install Super Progressive Web Apps plugin (search for it in plugin install), it works perfectly. Tried both on Android phone and IOS
https://wordpress.org/plugins/super-progressive-web-apps/

Related

How to build a desktop app from a web app whilst being able to capture the communication with the server?

I'm trying to transform a web application to a desktop one without rewriting the code. Two solutions I found that seem promising are Qt with WebEngine (WebView) and Electron. The thing is I would like to be able to capture the communication with server, for example database queries and stuff like that and treat it locally. Is that possible using either of that tools? If so do you have any tips on how to go about the issue?
Thanks in advance.
If you don't have enough time to build a desktop app, I recommend to build hybrid app. (Native App + Web). Use Cache, I am not sure about Web Database.
you can read these..
Web Cache
Web DB (it works on browser like Chrome, Safari, Android Browser...)
Just for future reference I decided on Electron and used onBeforeRequest function to capture the http requests.

Meteor mobile build vs having a phonegap browser

Why is the difference between using a simple phonegap browser app pointed at your site vs using meteor's mobile build options?
a simple phonegap browser app pointed at your site
Not sure exactly why you would be ready to use this option, compared to a simple shortcut / link to your site, or even an "installable" Web App.
Anyway, since you point at your site, it means you require an Internet connection whenever you open your app, and you are limited by what a website can access to on your device.
meteor's mobile build options
It becomes similar to a native app (it is actually called a "hybrid" app), so you can use it totally offline, and you can access more device functionalities (file system, notifications, etc.).
Nothing really specific to Meteor here, it is rather why using a hybrid app v.s. a shortcut.
In the end, you should base your decision on your requirements:
Do you need to access your app while offline?
Is your app primary functionality accessing "real time" content that makes no sense using your app while offline? (like news, forums, etc.)
Do you need to access specific device functionalities, that are not accessible by a normal website?
You should have plenty resources on that topic on the Internet.
Your question might rather be: what is the difference between a standard hybrid app (typically built through Cordova / Phonegap) and one built through Meteor?
In that case, you are asking what Meteor brings specifically? (as it uses Cordova under the hood to build the app)
First of all, you have all advantages of Meteor framework for normal website (minimongo, isomorphic methods, etc.)
You also have by default the Hot Code Push functionality. You can also set it up on your Cordova / Phonegap app, but you will have to configure it yourself, whereas Meteor does everything for you.
Finally, you might benefit from Meteor packages that bring Cordova plugin + client code + server code, something unique to Meteor as it is a full-stack framework.

Detect phonegap app from wordpress

I am building my app in phonegap. In that app I am calling my wordpress website like window.location="http://www.example.com/";.
Because of window.location my app UI and mobile browser UI are looks same. So I want to detect phonegap app to defer from browser UI. Is there any way to do this.
#JayTh
Okay. Thanks. VERY GOOD TO KNOW. I spend hours getting beginners to understand issues. You got them.
Okay, once you load a webpage from a website you are NOT allowed to access any of the Cordova Plugin APIs. However, you can access HTML5 API, like camera and geolocation. Again, you cannot access any of the Cordova Plugin APIs, and any of the 800+ 3rd-party APIs.
The best way to access the web, is via inAppBrowser. However, the third paragraph states:
The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview.
Apple is serious about their security, so if they detect you are going around this, they may reject your App. Just to be clear on this, there is a new security protocol, which Phonegap Build now requires, and so does Apple. With Phonegap Build, it will create the required Apple ATS entries into the Info.plist.
So, the best I can do at this point is give you three (3) links.
Top Mistakes by Developers new to Cordova/Phonegap
Core Plugins Setup
HOW TO apply the Cordova/Phonegap the whitelist system
On 1., you have hit #5 When designing the app, thinks phonegap works like a website or webbrowser.. For the remainder, I recommend just reading the bold sentences.
On 2., if you want to use the Cordova Plugins, it is best to use the version numbers, if not you will get the latest, and your code may break. This is because now, Phonegap Build now uses NPM for the plugins. And many times bugs fixes get into the plugin, that require the latest compiler - and Phonegap Build is always at least one version behind.
On 3., You'll need to use the whitelist to apply the fixes that maybe required for any new plugins you are using.
If you have more questions, I can answer them in comments. If it get too complicate, we can move to Google Group of Cordova/Phonegap - Best of Luck.

Deploying a webapp that uses chrome native client without involving webstore

I'm investigating the possibility of building a chrome app for a specific enterprise customer. This app would only be used by that customer (ie, it is not a general purpose app).
Among the use cases described on the Technical Overview are the ability to replace "Legacy desktop applications" and "enterprise applications that require heavy computation" - the solution I'm considering fits into both these gaps, as we have some mathematical libraries that we'd like to incorporate into a client-side web app.
Later on in the same document, however, it indicates that you can only deploy native client apps that are deployed on chrome webstore, as clarified by the https://developers.google.com/native-client/devguide/distributing document (and various developer scenarios).
Question: Is it possible to have build a web-app that uses Native Client, and distribute that to users worldwide, but without using Chrome Webstore (ie, using an internal server)?
Note: I've seen this document about creating a private chrome app collection on webstore, but this seems to be specific to ChromeOS. I'm interested in deploying to users that have the latest stable build of Chrome.
It is absolutely possible to run a Native Client app without hosting it on the Chrome Webstore -- otherwise, it would be very difficult to develop an NaCl app in the first place. It is possible for end users to use an NaCl app hosted on any random site. The catch is that the user needs to specifically enable the feature in their Chrome browser. It looks like the current way to enable this is to visit the "chrome://plugins/" page (or "about:plugins" page, same thing), and check the "Enabled" box under "Native Client".
Perhaps enterprise-level administration makes this easier to roll out, or perhaps allow finer-grained control so that only NaCl apps within the corporate intranet are trusted while not allowing stuff from the broader internet (NaCl is supposed to be safe and sandboxed, but Google is still playing it safe and paranoid, just in case).
For a public example of a self-hosted NaCl app, check out NaClBox, a Native Client port of the venerable Dosbox emulator. While it is also hosted in the Chrome Webstore, their support page describes how to run it directly from their site.

What are some steps to create a mobile web version of website?

I have built a website with asp.net jquery sql server 2008.Now i want to build a mobile version of it(web,accessible via the browser).Do i have to to migrate data to the cloud?if i build in .NET mobile ,will it be accessible from iphone and adroid as it will be accessible via browser?my website is social directory for places,is there a gps api that can help me to indicate that a user is near a place?
If you're creating a mobile version of a current app that has existing data sources etc theoretically the only thing you should have to change is your front end to be suitable for a mobile browser.
In the end you web server will still be serving the pages as if it was any other normal browser (except it would just be the mobile version), and have the same access to resources (eg. databases0 that the standard site does.
In terms of "the cloud" there is no reason that you need to really host anything in there (web/data server) but if you site ends up getting large and/or you don't want to worry about managing infrastructure issues etc investing in the cloud may be a good idea, there is plenty of reasons to go to the cloud but for what you are trying to achieve it is not a necessity.

Resources