[Seaside] Service workers
Dave
lasmiste at gmail.com
Sun Jul 28 16:37:44 UTC 2019
Hi Esteban,
I took another approach, because I thought the issue was related to
WARestfulFilter. I.E. the wrong version had this kind of relationship:
application := WAAdmin register: HelloPWASpike asApplicationAt:
'HelloPWASpike'.
application addFilterFirst: HelloPWASpikeServiceWorker new.
I didn't really understand the reason of the problem of the above version,
but I think it is something related to seaside, anyway I'll investigate it
later.
Then I changed the approach and I considered the WARestfulHandler.
So the initialization code became:
WAAdmin register: HelloPWASpike at: 'HelloPWASpike'.
Because now HelloPWASpike is a WARestfulHandler and it is working like a
charm.
Following, I put my code that is a simple translation of this example:
https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
You can play with it and install it on your phone. There is an error on
icons, but I haven't used Zinc that serves static files nor WAFileLibrary
(icons wasn't my priority).
Enjoy!
Dave
'From Pharo5.0 of 16 April 2015 [Latest update: #50772] on 28 July 2019 at
4:24:24.284408 pm'!
WARestfulHandler subclass: #HelloPWASpike
instanceVariableNames: ''
classVariableNames: ''
poolDictionaries: ''
category: 'MySpikes-Pwa'!
!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:16'!
indexHtml
<path: '/index.html'>
<get>
<produces: 'text/html'>
^ '<!!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="css/style.css">
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="white"/>
</head>
<body class="fullscreen">
<div class="container">
Hello World!!
</div>
</body>
</html>'! !
!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:09'!
styleCss
<path: '/css/style.css'>
<get>
<produces: 'text/css'>
^ 'body {
font-family: sans-serif;
}
/* Make content area fill the entire browser window */
html,
.fullscreen {
display: flex;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
/* Center the content in the browser window */
.container {
margin: auto;
text-align: center;
}
.title {
font-size: 3rem;
}'! !
!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:17'!
swJs
<path: '/sw.js'>
<get>
<produces: 'application/javascript'>
^ 'var cacheName = "hello-pwa";
var filesToCache = [
"/HelloPWASpike/manifest.json",
"/HelloPWASpike/index.html",
"/HelloPWASpike/css/style.css",
"/HelloPWASpike/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);
})
);
});
self.addEventListener("fetch", function(e) {
console.log("Fetch request for:", e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
'! !
!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:13'!
manifestJson
<path: '/manifest.json'>
<get>
<produces: 'application/json'>
^ '{
"name": "Hello World",
"short_name": "Hello",
"lang": "en-US",
"start_url": "/HelloPWASpike/index.html",
"display": "standalone",
"background_color": "white",
"theme_color": "white"
}'! !
!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/27/2019 18:29'!
mainJs
<path: '/js/main.js'>
<get>
<produces: 'application/javascript'>
^ 'window.onload = () => {
"use strict";
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./sw.js");
}
}'! !
Esteban A. Maringolo wrote
> In the Browser's developer console what answer are you getting for the
> MyApp/swJs request?
>
> Regards,
>
> Esteban A. Maringolo
>
> On Thu, Jul 25, 2019 at 6:41 PM Dave <
> lasmiste@
> > wrote:
>>
>> Thank you Esteban, I put some halts in the selectors you told me, but I
>> haven't found anything weird
>>
>> Cheers
>> Dave
>>
>>
>> Esteban A. Maringolo wrote
>> > I used Seaside-REST in the past and it is great to "complement"
>> > existing Seaside behavior or reusing some of the code, but if you were
>> > to build a complete app from scratch maybe Teapot/Tealight
>> > <https://github.com/astares/tealight> is a better fit for this
>> case,
>> > since you remove Seaside's server adaptor "middleware" from the stack.
>> >
>> > I don't know whether Seaside's strongest feature (stateful server side
>> > rendering) will be a big plus for PWAs, but I'm interested in your
>> > experience nonetheless, since these kinds of approaches are
>> > commonplace these days and might be useful for particular "sections"
>> > of a full-fledged Seaside app.
>> >
>> > As for your particular question you should put a breakpoint/halt at
>> > the different entry points:
>> > * ZnSeasideServerAdaptorDelegate>>handleRequest:
>> > * WAServerAdaptor>>handleRequest:
>> > * WARequestHandler>>handleFiltered:
>> >
>> > Or to catch any error during the request:
>> > WAServerAdaptor default server debugMode: true
>> >
>> >
>> > Regards,
>> >
>> > Esteban A. Maringolo
>> >
>> > On Thu, Jul 25, 2019 at 11:29 AM Dave <
>>
>> > lasmiste@
>>
>> > > wrote:
>> >>
>> >> Hi guys!!
>> >>
>> >> I'm playing with Seaside-REST to implement a PWA
>> >> (https://en.wikipedia.org/wiki/Progressive_web_applications). I don't
>> >> really
>> >> know if it is feasible, but I try :-)
>> >>
>> >> The first issue I'm facing is the serviceworker, it seems it does not
>> >> listen
>> >> for fetch requests and I'm guessing because Seaside or Zinc are doing
>> >> something under the hood.
>> >>
>> >> This is my code to register the service worker
>> >>
>> >> mainJs
>> >>
>> >
> <get>
>> >>
>> >
> <produces: 'application/javascript'>
>> >> ^ 'window.onload = () => {
>> >> "use strict";
>> >>
>> >> if ("serviceWorker" in navigator) {
>> >>
>> >>
>> *navigator.serviceWorker.register("MyApp/swJs")*.then(function(registration)
>> >> {
>> >> console.log("Service Worker registered with scope:",
>> >> registration.scope);
>> >> }).catch(function(err) {
>> >> console.log("Service Worker registration failed:", err);
>> >> });
>> >> }
>> >> }'
>> >>
>> >>
>> >> And this is the code of the serviceworker
>> >>
>> >> swJs
>> >>
>> >
> <get>
>> >>
>> >
> <produces: 'application/javascript'>
>> >> ^ '/* Serve cached content when offline */
>> >> *self.addEventListener("fetch",* function(e) {
>> >> console.log("Fetch request for:", e.request.url);
>> >> });'
>> >>
>> >> The serviceworker is successfully registered but I'm expecting a log
>> >> entry
>> >> every time I point to an url on my domain, unfortunately that doesn't
>> >> happen.
>> >>
>> >> I'm mimicking the code of this example
>> >>
>> https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
>> >> even if I'm trying to further simplifying it
>> >>
>> >> Can you help me, please?
>> >> Dave
>> >>
>> >>
>> >>
>> >> --
>> >> Sent from: http://forum.world.st/Seaside-General-f86180.html
>> >> _______________________________________________
>> >> seaside mailing list
>> >>
>>
>> > seaside at .squeakfoundation
>>
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> > _______________________________________________
>> > seaside mailing list
>>
>> > seaside at .squeakfoundation
>>
>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>>
>>
>>
>> --
>> Sent from: http://forum.world.st/Seaside-General-f86180.html
>> _______________________________________________
>> seaside mailing list
>>
> seaside at .squeakfoundation
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> _______________________________________________
> seaside mailing list
> seaside at .squeakfoundation
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
Sent from: http://forum.world.st/Seaside-General-f86180.html
More information about the seaside
mailing list