#view
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="manifest" href="/pwa/manifest.json">
<link rel="stylesheet" href="/pwa/static/css/style.css">
<link rel="icon" href="/pwa/static/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/pwa/static/images/hello-icon-152.png">
<meta name="theme-color" content="#DE3C4B" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="white"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Hello World">
<meta name="msapplication-TileImage"
content="/pwa/static/images/hello-icon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
</head>
<body class="fullscreen">
<div class="container">
<h1 class="title">Hello World!</h1>
</div>
<script src="/pwa/main.js"></script>
</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
On Thursday, December 13, 2018 at 9:09:21 AM UTC, mweissen wrote:
>
> 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
>
>
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/web2py/4f5bd60a-6b42-4cc2-aaa0-be1d26cc102e%40googlegroups.com.
