Progressive Web Apps

Martin Weissenboeck

unread,

Dec 13, 2018, 4:09:21 AM12/13/18

to web2py-users

I am just learning how to write Progressive Web Applications (PWA). I think PWAs are a very important step towards app-like websites. There is a lot of good examples on developers.google.com. One example has the following structure:

webroot

|--images/

|--scripts/

|--styles/

|--favicon.ico

|--index.html

|--manifest.json

|--service-worker.js

I want to use web2py to manage the datatables. What would be the best way to combine the PWA file-tree with a web2py app?

I have found only one (?) discussion about this topic at https://groups.google.com/forum/#!topic/web2py/rHBfs1zFG44

But there are some new questions:

My web2py server manages a lot of applications and it seems, that the proposed solution accepts only one app with one service-worker.js and so on.
All scripts would be visible to everybody at http://mydomain.com/myapp/static/scripts. I think this not a good idea.

Any ideas, any hints?

Who has written PWAs with web2py?

By the way: my next stept would be to use Preact together with PWAs. But for now I want to go step by step...

Regards Martin

dirman

unread,

Nov 28, 2019, 8:22:37 AM11/28/19

to web2py-users

#view

<!doctype html>

<head>

<title>Hello World</title>

</head>

<h1 class="title">Hello World!</h1>

</div>

</body>

</html>

Write functions to return the three files instead. Dont put actual files in static folder

#controller

def manifest():

response.headers['Content-Type'] = 'text/json'

return '''

{

"name": "Hello World",

"short_name": "Hello",

"icons": [{

"src": "/pwa/static/images/hello-icon-128.png",

"sizes": "128x128",

"type": "image/png"

}, {

"src": "/pwa/static/images/hello-icon-144.png",

"sizes": "144x144",

"type": "image/png"

}, {

"src": "/pwa/static/images/hello-icon-152.png",

"sizes": "152x152",

"type": "image/png"

}, {

"src": "/pwa/static/images/hello-icon-192.png",

"sizes": "192x192",

"type": "image/png"

}, {

"src": "/pwa/static/images/hello-icon-256.png",

"sizes": "256x256",

"type": "image/png"

}, {

"src": "/pwa/static/images/hello-icon-512.png",

"sizes": "512x512",

"type": "image/png"

}],

"lang": "en-US",

"start_url": "/pwa/",

"display": "standalone",

"background_color": "#DE3C4B",

"theme_color": "#DE3C4B"

}

'''

def main():

response.headers['Content-Type'] = 'text/javascript'

return '''

window.onload = () => {

'use strict';

if ('serviceWorker' in navigator) {

navigator.serviceWorker

.register('/pwa/sw.js');

}

'''

def sw():

response.headers['Content-Type'] = 'text/javascript'

return '''

var cacheName = 'hello-pwa';

var filesToCache = [

'/',

'/pwa/',

'/pwa/static/css/style.css',

'/pwa/static/js/main.js'

];

/* Start the service worker and cache all of the app's content */

self.addEventListener('install', function(e) {

e.waitUntil(

caches.open(cacheName).then(function(cache) {

return cache.addAll(filesToCache);

})

);

});

/* Serve cached content when offline */

self.addEventListener('fetch', function(e) {

e.respondWith(

caches.match(e.request).then(function(response) {

return response || fetch(e.request);

})

);

});

'''

Access the page on http://localhost/pwa and test locally using Devtools and not lighthouse. Would work fine as a WPA app

David Zejda

unread,

Dec 4, 2019, 12:06:40 PM12/4/19

to web2py-users

Hi,

I use web2py to serve PWA, service worker for client-side caching and for proactive loading of contents which are likely to be requested in the next step.

In routes.py I have root_static = ['favicon.ico', 'robots.txt', 'service_worker.js'].

Per-app specific service worker. The script is visible to the client (which is common for client-side JS, isn't it?). If you don't like it you may consider something like https://javascript-obfuscator.org/ .

Layout like this:

<!DOCTYPE html>
<html>
<head>
    <title>{{=response.title}}</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">

David

Reply all

Reply to author

Forward